Er du bare ute etter å bygge inn et kart på nettsiden din, er en embed-kode eller en iframe ofte det enkleste. På Norgeskart.no henter du koden helt enkelt:

  • Zoom inn til ønsket utsnitt.
  • Klikk på menyikonet oppe til venstre, og velg "Dele kartet"
  • Fanen "Del på nettet" lar deg sende kartet som en link (for eksempel i en epost eller på Facebook).
  • "Bygg inn kart" gir deg en ferdig iframe-kode som du kan lime inn på nettsiden din dersom du kan velge HTML-format i publiseringsverktøyet ditt.
  • Juster tallene i "width" og "height" for å få kartet til å passe på nettsiden din.

Sett opp side i Leaflet

Ønsker du det litt mer avansert, er Leaflet et gratisprogram som gjør det enkelt å lage interaktive kart på nettsider. 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.

Å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!