Leaflet er et gratisprogram som gjør det enkelt å lage interaktive kart på nettsider. Her vil vi vise hvordan du kan bruke Kartverkets kart i Leaflet. Oppskriften er basert på Leaflets egen "Quick Start Guide". I Leaflets guide og i eksemplene som Leaflet viser, vil du finne mer informasjon om hvordan du bruker Leaflet.

Sett opp side

Åpne Notepad eller et tilsvarende program for å skrive ren tekst (ikke tekstbehandlingsprogram) og lagre et dokument som du gir navnet "index.html". Merk at filnavnet skal slutte på ".html" og ikke ".txt" eller ".html.txt".

I dette dokumentet skal du nå legge inn kodene du trenger for å lage kartet. Kopier og lime inn etter hverandre kodene som er markert med kursiv skrift nedenfor.

Start med å sette opp html ved å lime inn følgende øverst i dokumentet:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Kartverkets kart</title>

Før du legger inn kode for kartet, må du laste inn Leaflet-biblioteket. Inkluder Leaflet CSS-filen ved å lime inn følgende:

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

Inkluder deretter Leaflet JavaScript-filen:

        <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    </head>
    <body>

Legg et <div>-element med en gitt id "map" og sett inn høyde og bredde (for eksempel 400 piksler høyde og 600 piksler bredde):

        <div id="map" style="height: 400px; width: 600px;"></div>

Sett opp kartet

Nå er du klar til å spesifisere selve kartet. Nedenfor kan du velge mellom flere forskjellige karttyper (kartlag) fra Kartverket. Lim inn koden for den karttypen du ønsker å bruke.

Topografisk kart

        <script>
            var map = L.map('map').setView([60.14, 10.25], 11);
            L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo2&zoom={z}&x={x}&y={y}', {
                attribution: '<a href="http://www.kartverket.no/">Kartverket</a>'
            }).addTo(map);
        </script>
    </body>
</html>

Grunnkart

        <script>
            var map = L.map('map').setView([60.14, 10.25], 11);
            L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=norges_grunnkart&zoom={z}&x={x}&y={y}', {
                attribution: '<a href="http://www.kartverket.no/">Kartverket</a>'
            }).addTo(map);
        </script>
    </body>
</html>

Terrengmodell

        <script>
            var map = L.map('map').setView([60.14, 10.25], 11);
            L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=terreng_norgeskart&zoom={z}&x={x}&y={y}', {
                attribution: '<a href="http://www.kartverket.no/">Kartverket</a>'
            }).addTo(map);
        </script>
    </body>
</html>

Grått kart

        <script>
            var map = L.map('map').setView([60.14, 10.25], 11);
            L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=norges_grunnkart_graatone&zoom={z}&x={x}&y={y}', {
                attribution: '<a href="http://www.kartverket.no/">Kartverket</a>'
            }).addTo(map);
        </script>
    </body>
</html>

Eiendomskart

        <script>
            var map = L.map('map').setView([60.14, 10.25], 11);
            L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=matrikkel_bakgrunn&zoom={z}&x={x}&y={y}', {
                attribution: '<a href="http://www.kartverket.no/">Kartverket</a>'
            }).addTo(map);
        </script>
    </body>
</html>

Enkelt kart

        <script>
            var map = L.map('map').setView([60.14, 10.25], 11);
            L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=egk&zoom={z}&x={x}&y={y}', {
                attribution: '<a href="http://www.kartverket.no/">Kartverket</a>'
            }).addTo(map);
        </script>
    </body>
</html>

Se kartet

Lagre og lukk dokumentet. Finn dokumentet der du har lagret, høyreklikk på det og velg "Åpne med" og velg nettleseren din. Og der er kartet!

Videreutvikle kartet

Du skal nå ha et fungerende interaktivt kart og du kan legge det inn på en nettside. Koden du har satt sammen må legges inn på riktige steder i html-strukturen på nettsiden. Dette krever kunnskap til html-koding. Se for eksempel w3schools.

Leaflet sine nettsider finnes mange eksempler på hvordan kartet kan videreutvikles.

Lykke til!