JavaScript — Introduktion genom exempel

12.2 Karta och markörer

I detta och nästa exempel ska vi titta på ett API för en karttjänst. Det är en kombination av Leaflet (ett bibliotek med objekt för att skapa lager för olika element och hantering av interaktivitet med dem) och OpenStreetMap (ett "open source"-projekt för en webbtjänst med en världskarta).

I detta exempel ska vi se hur vi visar upp en karta och hur vi lägger in markörer på den. Vi kommer också lägga till en popupruta till markörerna.

Sammanfattning

För att kunna använda Leaflet, får man lägga in en link- och script-tagg i HTML-filen, för att ta in bibliotekets CSS- och JavaScript-kod.

I JavaScript-koden använder man sedan ett objekt kallat L för att referera till bibliotekets objekt. I det finns olika metoder och egenskaper, för att specificera vad man vill använda.

För att visa en karta börjar man med metodern map, där man som parameter skickar med id till det HTML-element, där kartan ska visas. Sedan går man vidare med setView, för att specificera latitud och longitud för kartans mittpunkt samt vilken zoomfaktor som ska användas. Därefter skapar man ett lager med tileLayer, där man lägger in kartan. Som parameter skickar man då med en URL till OpenStreetMap.

myMap = L.map("map").setView(place, zoom);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
}).addTo(myMap);

Med andra metoder kan man sedan skapa markörer och lägga in dem på kartan.

Objekt

Jämför man med Flickrs API, så arbetar man här med objekt för kartor, markörer och andra element, medan man i Flickrs API arbetar med AJAX och anrop med fetch.

Egna övningar

Ingen övning i detta exempel.