Ukratko

Najvažnije iz članka

  • Leaflet.js i OpenStreetMap čine moćan i besplatan alat za izradu interaktivnih web karata, idealan za fleksibilnost i kontrolu nad podacima.
  • Osnovna implementacija uključuje inicijalizaciju karte, postavljanje početnog prikaza i dodavanje sloja pločica (tile layer) za vizualizaciju OpenStreetMap podataka.
  • Moguće je dodati različite geografske objekte poput markera, krugova, polilinija i poligona, uz prilagođene pop-up prozore za interaktivnost.
  • Leaflet podržava GeoJSON format za jednostavno učitavanje i prikaz složenih geografskih podataka, uz mogućnost prilagodbe stila i interakcije za svaki objekt.
Sadržaj članka
  1. Zašto Leaflet.js i OpenStreetMap?
  2. Postavljanje projekta: Osnove HTML, CSS i JavaScripta
  3. Inicijalizacija karte i prvi prikaz
  4. Objašnjenje koda:
  5. Dodavanje markera, pop-up prozora i krugova
  6. Markeri (Markers)
  7. Krugovi (Circles)
  8. Poligoni (Polygons) i Polilinije (Polylines)
  9. Korištenje različitih slojeva pločica (Tile Layers)
  10. Rad s Geolocation API-jem: Pronalaženje korisnikove lokacije
  11. Napredne funkcionalnosti: Dodaci (Plugins) i GeoJSON
  12. Rad s GeoJSON podacima
  13. Zaključak

U današnjem digitalnom dobu, vizualizacija geografskih podataka postala je ključna komponenta mnogih web aplikacija. Bilo da se radi o aplikacijama za dostavu, praćenju vozila, turističkim vodičima, analizi podataka ili jednostavnom prikazivanju lokacija na web stranici, interaktivne karte su nezamjenjive. Dok su rješenja poput Google Maps API-ja popularna, ona često dolaze s licencnim ograničenjima i potencijalnim troškovima. Srećom, postoji robustan i fleksibilan ekosustav otvorenog koda koji nam omogućuje stvaranje jednako impresivnih, a često i prilagodljivijih rješenja. U ovom opsežnom vodiču, istražit ćemo kako iskoristiti Leaflet.js, laganu i moćnu JavaScript biblioteku, u kombinaciji s OpenStreetMap (OSM) podacima za izradu potpuno funkcionalnih, interaktivnih web karata.

Zašto Leaflet.js i OpenStreetMap?

Prije nego što zaronimo u praktičnu implementaciju, važno je razumjeti prednosti koje nude Leaflet.js i OpenStreetMap:

  • Leaflet.js:

    • Jednostavnost i Laganost: Dizajniran je da bude jednostavan za korištenje i ima malu veličinu datoteke, što rezultira brzim učitavanjem karata.
    • Fleksibilnost: Iako je lagan, Leaflet je izuzetno fleksibilan i proširiv putem dodataka (plugins) koji mu dodaju napredne funkcionalnosti.
    • Dokumentacija i Zajednica: Posjeduje izvrsnu, jasnu dokumentaciju i aktivnu zajednicu koja pruža podršku i razvija nove dodatke.
    • Mobilna podrška: Optimiziran je za mobilne uređaje.

  • OpenStreetMap (OSM):

    • Otvoren izvor i besplatno: OSM je globalni, kolaborativni projekt za stvaranje slobodne i otvorene karte svijeta. Svi podaci su dostupni pod otvorenom licencom, što eliminira brigu o licenciranim ograničenjima i troškovima.
    • Detaljnost i Ažurnost: S obzirom na kolaborativnu prirodu, OSM podaci su često iznenađujuće detaljni i ažurni, posebno u urbanim područjima.
    • Prilagodljivost: Postoji mnogo različitih stilova (tile providers) dostupnih za OSM, omogućujući vam da vizualno prilagodite kartu potrebama vaše aplikacije.

Kombinacija ove dvije tehnologije pruža moćan alat za svakog developera koji želi implementirati geografske funkcionalnosti bez visokih troškova ili kompleksnosti.

Postavljanje projekta: Osnove HTML, CSS i JavaScripta

Za početak, trebamo osnovnu HTML stranicu koja će služiti kao kontejner za našu kartu. Stvorite novu datoteku index.html i dodajte sljedeći kod:

<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interaktivna Karta s Leaflet.js i OSM</title>
    <!-- Leaflet CSS -->
    <link href="#"
          integrity="sha256-p4NxAoJBhIINfBIHP89BVSKTM8RxYHFCNNYHLkjhB6wsMCR8nFdIg/yHHjWkKM7z"
          crossorigin=""/>
    <!-- Naš prilagođeni CSS -->
    <style>
        #mapid {
            height: 100vh; /* Puni prikaz visine preglednika */
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="mapid"></div>

    <!-- Leaflet JavaScript -->
    <script src="#"
            integrity="sha256-20nEF3zZJnsL7dnKY9YpD/a3gIRxV+zmOSNLbPNuXq4="
            crossorigin=""></script>
    <!-- Naš prilagođeni JavaScript -->
    <script src=""app.js"></script>"
</body>
</html>

Ovdje smo uključili Leaflet CSS i JavaScript datoteke iz CDN-a. Također smo definirali <div id="mapid"></div> koji će biti kontejner za našu kartu i dali mu osnovni stil putem height: 100vh; kako bi zauzimao cijelu visinu preglednika. Na kraju, uključili smo app.js datoteku koju ćemo uskoro kreirati.

Stvorite datoteku app.js u istoj mapi kao index.html.

Inicijalizacija karte i prvi prikaz

Sada kada je HTML spreman, možemo inicijalizirati našu kartu. Otvorite app.js i dodajte sljedeći kod:

// Inicijalizacija karte: 'mapid' je ID elementa u HTML-u gdje će se karta prikazati.
// setView([latitude, longitude], zoomLevel) postavlja početnu poziciju i razinu zumiranja.
const mymap = L.map('mapid').setView([45.8150, 15.9819], 13); // Zagreb, razina zumiranja 13

// Dodavanje sloja pločica (tile layer) s OpenStreetMap-a
// Ovo je ono što čini "izgled" karte.
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="#" contributors'
}).addTo(mymap);

Spremite obje datoteke i otvorite index.html u pregledniku. Trebali biste vidjeti interaktivnu kartu Zagreba! Možete je pomicati, zumirati i primijetit ćete da se podaci učitavaju s OpenStreetMap-a.

Objašnjenje koda:

  • L.map('mapid'): Stvara novu instancu karte i povezuje je s DOM elementom čiji je ID mapid.
  • .setView([45.8150, 15.9819], 13): Postavlja centar karte na zadane geografske koordinate (širina i dužina za Zagreb) i razinu zumiranja na 13. Viša razina zumiranja znači bliži prikaz.
  • L.tileLayer(...): Stvara novi sloj pločica. URL https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png je standardni URL za OpenStreetMap pločice, gdje:
    • {s} je poddomena (za optimizaciju performansi).
    • {z} je razina zumiranja.
    • {x} i {y} su koordinate pločice.
  • maxZoom: 19: Postavlja maksimalnu razinu zumiranja.
  • attribution: Tekst koji se prikazuje na karti kao priznanje izvoru podataka. Ovo je izuzetno važno za OpenStreetMap zbog licencnih zahtjeva.
  • .addTo(mymap): Dodaje kreirani sloj pločica na našu instancu karte.

Dodavanje markera, pop-up prozora i krugova

Osnovna karta je dobar početak, ali većina aplikacija zahtijeva prikaz specifičnih točaka interesa. Leaflet to čini vrlo jednostavnim.

Markeri (Markers)

Markeri su ikone koje označavaju specifične lokacije na karti. Dodajmo marker za Zagrebačku katedralu:

// Dodavanje markera
const katedralaMarker = L.marker([45.8164, 15.9781]).addTo(mymap);

// Dodavanje pop-up prozora markera (tekst koji se pojavljuje klikom)
katedralaMarker.bindPopup("<b>Zagrebačka Katedrala</b><br>Prekrasno zdanje u srcu grada.").openPopup();

L.marker([lat, lng]) stvara novi marker. .bindPopup() veže pop-up prozor za marker, a .openPopup() ga odmah otvara (možete izostaviti .openPopup() ako želite da se otvara tek nakon klika).

Krugovi (Circles)

Krugovi su korisni za vizualizaciju područja oko određene točke, poput radijusa dostave ili zone interesa.

// Dodavanje kruga
L.circle([45.8150, 15.9819], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500 // Radijus u metrima
}).addTo(mymap).bindPopup("Ovo je krug s polumjerom od 500 metara.");

L.circle([lat, lng], options) stvara krug. Opcije uključuju color (boja obruba), fillColor (boja ispune), fillOpacity (prozirnost ispune) i radius (polumjer u metrima).

Poligoni (Polygons) i Polilinije (Polylines)

Za prikaz složenijih oblika poput granica područja, cesta ili ruta, Leaflet nudi poligone i polilinije.

Polilinija: Niz točaka spojenih linijama, obično za rute ili ceste.

// Primjer polilinije (putanja)
const polylinePoints = [
    [45.8100, 15.9700],
    [45.8120, 15.9850],
    [45.8080, 15.9900]
];
const polyline = L.polyline(polylinePoints, {color: 'blue'}).addTo(mymap);
polyline.bindPopup("Ovo je primjer polilinije.");

Poligon: Zatvoreni oblik s ispunjenim područjem, često za granice regija.

// Primjer poligona (neko područje)
const polygonPoints = [
    [45.7900, 15.9500],
    [45.7950, 15.9650],
    [45.7850, 15.9700],
    [45.7900, 15.9500] // Posljednja točka mora biti ista kao prva za zatvoreni poligon
];
const polygon = L.polygon(polygonPoints, {color: 'green', fillColor: '#0f0', fillOpacity: 0.3}).addTo(mymap);
polygon.bindPopup("Ovo je primjer poligona.");

Korištenje različitih slojeva pločica (Tile Layers)

Prednost OpenStreetMap-a je što postoji mnogo različitih tile providera koji prikazuju OSM podatke u različitim vizualnim stilovima. Možete ih koristiti za prilagodbu izgleda vaše karte. Neki popularni:

  • OpenStreetMap Standard: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
  • OpenTopoMap: https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png (topografska karta)
  • ESRI WorldStreetMap: https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}

Možete dodati kontrolu koja korisnicima omogućuje prebacivanje između različitih slojeva:

// Definirajte različite slojeve pločica
const osmStandard = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="#" contributors'
});

const openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 17,
    attribution: 'Map data: &copy; <a href="#" contributors, <a href="#" | Map style: &copy; <a href="#" (<a href="#"
});

const esriStreets = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012',
    maxZoom: 18
});

// Kreirajte bazne slojeve, s OpenStreetMap Standard kao zadanim
const baseLayers = {
    "OpenStreetMap Standard": osmStandard,
    "OpenTopoMap": openTopoMap,
    "ESRI Street Map": esriStreets
};

// Dodajte sloj za kontrolu
L.control.layers(baseLayers).addTo(mymap);

// Postavite zadani sloj (umjesto prethodnog L.tileLayer().addTo(mymap);)
osmStandard.addTo(mymap);

Sada ćete na karti imati mali kontrolni prozor u gornjem desnom kutu koji vam omogućuje prebacivanje između različitih stilova karte.

Rad s Geolocation API-jem: Pronalaženje korisnikove lokacije

Često je korisno prikazati korisnikovu trenutnu lokaciju na karti. To se postiže uz pomoć browserovog Geolocation API-ja.

// Funkcija za pronalazak lokacije
function onLocationFound(e) {
    L.marker(e.latlng).addTo(mymap)
        .bindPopup("Vaša trenutna lokacija s točnošću od " + e.accuracy + " metara.")
        .openPopup();

    L.circle(e.latlng, e.accuracy).addTo(mymap);

    mymap.setView(e.latlng, 15); // Zumiraj na korisnikovu lokaciju
}

function onLocationError(e) {
    alert(e.message);
}

mymap.on('locationfound', onLocationFound);
mymap.on('locationerror', onLocationError);

// Pokreni pronalazak lokacije
mymap.locate({setView: false, maxZoom: 16});
  • mymap.locate(): Funkcija koja pokreće proces pronalaska lokacije.
    • setView: false: Nećemo automatski pomaknuti kartu, već ćemo to učiniti ručno u onLocationFound.
    • maxZoom: 16: Maksimalna razina zumiranja ako se setView koristi.
  • on('locationfound', ...): Događaj koji se aktivira kada se lokacija uspješno pronađe. Objekt e sadrži latlng (koordinate) i accuracy (točnost u metrima).
  • on('locationerror', ...): Događaj koji se aktivira ako dođe do pogreške (npr. korisnik odbije dijeljenje lokacije).

Napredne funkcionalnosti: Dodaci (Plugins) i GeoJSON

Leaflet ekosustav je bogat dodacima koji proširuju njegovu funkcionalnost. Neki popularni dodaci uključuju:

  • Leaflet.markercluster: Za grupiranje velikog broja markera radi boljih performansi i preglednosti.
  • Leaflet.draw: Za crtanje oblika (markera, poligona, krugova) direktno na karti.
  • Leaflet.AwesomeMarkers: Za stiliziranje markera s Font Awesome ikonama.

Rad s GeoJSON podacima

GeoJSON je standardizirani format za kodiranje geografskih podatkovnih struktura. Leaflet ima izvrsnu podršku za GeoJSON, omogućujući vam jednostavno učitavanje i prikaz složenih geografskih podataka.

Pretpostavimo da imamo GeoJSON datoteku data.geojson s podacima o parkovima u Zagrebu:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Park Maksimir",
        "description": "Najveći i najstariji javni park u Zagrebu."
      },
      "geometry": {
        "type": "Point",
        "coordinates": [16.0163, 45.8156]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Botanički vrt",
        "description": "Prekrasan botanički vrt sa bogatom florom."
      },
      "geometry": {
        "type": "Point",
        "coordinates": [15.9739, 45.8078]
      }
    }
  ]
}

Možete ga učitati i prikazati na karti na sljedeći način (potrebno je koristiti fetch API ili slično za dohvaćanje datoteke):

// Učitavanje GeoJSON podataka
fetch('data.geojson')
    .then(response => response.json())
    .then(data => {
        L.geoJSON(data, {
            // Funkcija koja stilizira pojedine GeoJSON značajke
            style: function (feature) {
                return {color: '#ff0000'}; // Svi će biti crveni
            },
            // Funkcija koja se izvodi za svaki GeoJSON marker (Point)
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng).bindPopup(feature.properties.name + "<br>" + feature.properties.description);
            }
        }).addTo(mymap);
    })
    .catch(error => {
        console.error('Došlo je do pogreške pri učitavanju GeoJSON podataka:', error);
    });
  • L.geoJSON(data, options): Stvara GeoJSON sloj.
  • style opcija: Koristi se za stiliziranje polilinija i poligona. Prima feature objekt i vraća objekt sa stilom.
  • pointToLayer opcija: Koristi se za pretvaranje GeoJSON točaka u Leaflet markere ili druge slojeve. Ovdje smo ih pretvorili u standardne markere s pop-up prozorima.

Zaključak

Leaflet.js i OpenStreetMap predstavljaju izvanrednu kombinaciju za developere koji žele implementirati moćne, interaktivne web karte bez visokih troškova i uz potpunu kontrolu nad podacima i prikazom. Kroz ovaj vodič, pokrili smo osnove inicijalizacije karte, dodavanja različitih geografskih objekata poput markera, krugova, polilinija i poligona, manipulacije slojevima pločica te integracije s Geolocation API-jem i GeoJSON podacima.

Ovo je samo vrh ledenog brijega. Leaflet-ova modularna arhitektura i bogat ekosustav dodataka omogućuju vam da svoju kartu prilagodite gotovo svim zamislivim potrebama. Ohrabrujemo vas da istražite Leaflet dokumentaciju i razne dodatke kako biste otključali puni potencijal ove fantastične biblioteke. Uz malo prakse, bit ćete u mogućnosti stvarati sofisticirane geografske aplikacije koje obogaćuju korisničko iskustvo i pružaju vrijedne uvide.

Sretno kodiranje i mapiranje!

Izvori i dodatno čitanje

  1. Leaflet.js Službena Dokumentacija
  2. OpenStreetMap Službena Web Stranica
  3. MDN Web Docs - Geolocation API
  4. GeoJSON Format Specifikacija
#Geolokacija#JavaScript#Leaflet.js#OpenStreetMap#Web Karte
B
Uredništvo portala

BAJT

Službeni autorski profil redakcije portala BAJT. Sadržaj priprema i provjerava uredništvo portala.