Att komma igång med Leaflet
Leaflet är öppen källkod och utvecklas med hjälp av ett community. Det fungerar bra tillsammans med alla vanligt förekommande webbläsare, såväl på skrivbordet som på mobila enheter. Det finns många olika plugins till biblioteket som kan användas för att lägga till ytterligare funktionalitet. På det hela taget är det enkelt att jobba med Leaflet.
Att lägga till Leaflet
För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas head. Följande kommer att ta ner nuvarande version av Leaflet. Kolla alltid deras webbsajt för att se om det kommit en nyare version.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.
Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före </body>. Var man än placerar den, så måste JavaScript-delen laddas in efter CSS-delen. Så det är bäst att lägga den i slutet av HTML-koden.
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
Med dessa två rader på plats kan vi skapa ett exempel.
Leaflet-exempel
Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.
(Som vanligt, kom ihåg att även titta på "Result"-fliken.)
Låt oss gå igenom exempelet och se vad de olika delarna gör för något.
HTML
I HTML-koden började vi med att lägga till CDN-hämtningarna som förser oss med Leaflet. Förutom detta så har vi skapat en tom div som fått ID:n karta. Här kommer vi att visa upp vår karta.
CSS
I CSS:en har vi inte gjort så mycket mer än att ge en storlek till den div som ska innehålla kartan. Viktigast är höjden, bredden kommer att sättas till 100 % om vi inte anger något annat. Anger vi ingen höjd kommer vår karta inte att synas. Detta är på grund av att div:en är helt tom och därmed får sin höjd satt till 0.
JavaScript
I JavaScript-delen har vi gjort lite mer. Vi tar och går igenom detta i mer detalj.
Initiering av Leaflet
På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som L när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i L-objektet.
map skapar en ny kartregion Som inparameter tar den ID:t för den div där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden setView. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.
Inställningar för datakälla
Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.
Kart-tiles
Med tileLayer anger vi dels att kartan vi ska hämta består av karttiles. Där tiles mer eller mindre betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa kombineras och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.
Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.
Om vi redan laddat in en kartbit så kommer den att lagras i webbläsarens cache, vilket gör att den kommer att återanvändas nästa gång den kartbiten är aktuell. Det går med andra ord mycket snabbare att visa de kartbitar som redan är hämtade.
Att ange datakälla
Som första inparameter tar tileLayers en länk till den server som kommer att tillhandahålla vår kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.
Kom ihåg att ett av kraven som ställdes för att få utnyttja Open Street Map i en applikation var att man angav vilken källa data hämtades ifrån. Det är alltså viktigt att ha med denna information, speciellt i applikationer som vi ska "visa" upp för världen.
Koppla data till vy
När vi skapat ett objekt som kan tillhandahålla oss med kartdata måste vi även länka detta till vår kartvy. Detta gör vi med det chainade metodanropet addTo. Som inparameter tar denna metod det objekt som vi fick tillbaka när vi körde map-metoden. Det vill säga det objekt som innehåller information om vår kartvy.
Vår första karta
Om du klickar på "Resultat" bör du nu se vår första karta! Förutom att kartan visas upp, så har man automatiskt fått med en del finesser. Man kan panorera genom att dra runt kartan. Man kan zooma, antingen med "+/-"-knapparna eller via musens skrollhjul. I det nedre hörnet finns information om vad som används för att skapa/visa kartan - dvs Open Street Map och Leaflet. Länken till Open Street Map är nödvändig för att uppfylla användningsvillkoren för Open Street Maps. Så kom alltid ihåg att ha något liknande med!
Kombination av våra geografiska exempel
Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "Att ta reda på var någon befinner sig"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:
Det finns väl inte så mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att använda fasta koordinatvärden så visar vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.
Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.
Nästa aktivitet
I nästa aktivitet ska vi titta på hur man kan lägga ut diverse typer av extrainformation i kartor, vilket kan behövas om vi ska skapa appar som är baserade kring kartor och geografisk data.