Siste oppdatering

Slik lager du kart på nettsider

Her er oppskrift både for å dele kart og bygge inn kart på en nettside gjennom innbygging av litt mer avanserte interaktive kart.

Er du bare ute etter å dele et kart, kan du enkelt hente ei lenke på Norgeskart.no:

  • Klikk på menyikonet oppe til venstre hvis menyen ikke allerede er åpen.
  • Zoom inn til ønsket utsnitt og velg «Dele kartet»
  • «Del på nettet» lar deg sende kartet som en link (for eksempel i en epost eller på Facebook).

Sett opp side i Leaflet

Ønsker du å bygge inn litt mer avansert kart på nettsiden din, er Leaflet et gratisprogram som gjør det enkelt med innbygging av interaktive kart på nettsider.

Skjermbilde av topografisk kart fra Norgeskart.no
GUIDE: Her finner du tips til hvordan innbygging av kart kan gjøres.

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 som Word) 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 Kartverkets Norgeskart. 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('https://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo4&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('https://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('https://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('https://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>

Enkelt kart

<script>
var map = L.map('map').setView([60.14, 10.25], 11);
L.tileLayer('https://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 for tips om HTML-koding.

På Leaflets nettsider finnes mange eksempler på hvordan kartet kan videreutvikles.

Del
XPPT