Att komma igång med Leaflet
Leaflet är öppen källkod och utvecklas med hjälp av ett community. Den fungerar bra tillsammans med all vanliga 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.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
Detta är grundinställningar för den CSS som Leaflet behöver. Dessa kommer antagligen inte att störa den CSS som du själv lagt till sidan.
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://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/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.
(Som vanligt, kom ihåg att även titta på "Result"-fliken.)
Låt oss gå igenom exempelet oc se vad de olika delarna gör för något.
HTML
I HTML-koden har vi dels lagt till CDN-hämtningarna som föreser oss med Leaflet. Dessutom 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.
JavaScript
I JavaScript-delen har vi gjort lite mer.
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:n på den div där kartan ska visas. Därefter talar vi om vilka koordinater som gäller för denna karta 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 är zoomfaktorn vi ska använda oss av, desto större tal desto mer inzoomade är vi.
Sätta 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 och anger att det är små bitar som bygger upp en större helhet. Det vill säga att kartan ska laddas in som flera småbilder som visas bredvid varandra och på så vis i kombination bygger upp den kompletta kartvyn. När vi skrollar runt i kartan laddas enbart de tiles som tillkommer in och läggs bredvid redan befintliga tiles. Detta gör att vi minimerar hur mycket data som måste hämtas hela tiden. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps.
Att ange datakälla
Som första inparameter tar tileLayers en länk till den server som kommer att tillhandahålla den behövliga kartdatan. Därefter följer ett objekt som innehåller inställningar som ska gälla för källan. I vårt exempel anger vi varifrån datat 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 datat 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. Dvs den vy som vi tidigare kopplade till vår karta-div med map-metoden. Detta gör vi med det chainade metodanropet addTo. Som inparameter tar denna det objekt som vi fick tillbaka ifrån map och 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! Man har automatiskt fått med en del finesser, förutom bara kartvyn. Man kan panorera genom att dra runt kartan. Man kan zooma angingen med "+/-"-knapparna eller via musens skrollhjul. I nedre hörnet finns information om vad som används för att skapa/visa kartan.
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 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.