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

Precis som var fallet med jQuery, går det att använda en CDN för att lägga till Leaflet i en sida. Vi kommer att använda den metoden, då den är enklast och mest flexibelt. Tyvärr har inte huvud-CDN:en på https://cdn.leafletjs.com/ ett korrekt certifikat och det går därmed inte att köra HTTPS mot den. Det vill vi gärna göra, så därför har vi valt en annan CDN som tillhandahåller biblioteket via HTTPS.

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.7.1/dist/leaflet.css" />

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>.

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></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.

See the Pen adJmEj by Patrik Grip-Jansson (@PGJ) on CodePen.

(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öreser 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 (detta går att jämföra med hur jQuery registrerar sig i $).

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.

HTTPS eller ej

Det är diskutabelt huruvida kartdatan verkligen kan vara integritetskränkande och behövs hålla hemlig, men vi kommer ändå att hämta materialet via HTTPS. Främst för att detta kommer att undvika att vi får de "mixed content"-varningar som uppstår när man blandar HTTP- och HTTPS-objekt i en och samma sida. Att inte kryptera kartdatat skulle vara marginellt snabbare, men det är nog ingenting man behöver bry sig i, speciellt inte på klientsidan. På servern kommer det självklart att bli något högre last när alla kartsegment måste krypteras innan de skickas ut.

Kart-tiles

Med tileLayer anger vi dels att kartan vi ska hämta består av karttiles. Där tiles 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 komibineras 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.

Att ange datakälla

Som första inparameter tar tileLayers en länk till den server som kommer att tillhandahålla den behövlig 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:

See the Pen pgeWKx by Patrik Grip-Jansson (@PGJ) on CodePen.

Det finns väl inte 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 visa upp koordinatvärdena så drar 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.

Att lägga till extra data med Leaflet