Att komma igång med Leaflet: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 14: | Rad 14: | ||
<code><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script></code> | <code><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script></code> | ||
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. | 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. | |||
<codepen pen="adJmEj" tab="js" height="550"> | <codepen pen="adJmEj" tab="js" height="550"> | ||
| Rad 21: | Rad 24: | ||
(Som vanligt, kom ihåg att även titta på "Result"-fliken.) | (Som vanligt, kom ihåg att även titta på "Result"-fliken.) | ||
=== HTML === | |||
I HTML-koden har vi dels lagt till CDN-hämtningarna som föreser oss med Leaflet. Dessutom har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta. | I HTML-koden har vi dels lagt till CDN-hämtningarna som föreser oss med Leaflet. Dessutom har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. 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 <code>div</code> som ska innehålla kartan. Viktigast är höjden, bredden kommer att sättas till 100 % om vi inte anger något annat. | I CSS:en har vi inte gjort så mycket mer än att ge en storlek till den <code>div</code> 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. | I JavaScript-delen har vi gjort lite mer. | ||
Versionen från 6 januari 2016 kl. 09.32
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.)
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.