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å det är lättast och mest flexibelt. Tyvärr har inte huvud-CDN:en på http://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.
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. 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.)
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.
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.
I JavaScript-delen har vi gjort lite mer.