Slik lager du kart på nettsider
Her er oppskrift både for å dele kart og bygge inn kart på en nettside gjennom innbygging av mer avanserte interaktive kart.
Det er enkelt å bygge inn kart på nettsider. Men ønsker du bare å dele et kart på epost eller Facebook, 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 kart på nettsida di, er Leaflet et gratisprogram som gjør det enkelt med innbygging av 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. Øverst/ til høyre finner du komplett, nedlastbar kode av eksemplet som vi går gjennom i artikkelen under.
Åpne Notisblokk/ 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 lim 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 land="no">
<head>
<meta charset="utf-8"/>
<title>Kartverkskart</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.9.4/dist/leaflet.css"integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="crossorigin=""/>
- Inkluder deretter Leaflet JavaScript-filen:
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="crossorigin=""></script>
- For at kartet skal kunne vises på websiden må det også defineres en boks til kartet til en gitt høyde og bredde (for eksempel 800 piksler høyde og 600 piksler bredde). Det gjør du på følgende måte:
<style>
#map {height: 800px; width: 600px}
</style>
</head>
<body>
- Legg et <div>-element med en gitt id "map":
<div id="map"></div>
Sett opp kartet
Nå er du klar til å spesifisere selve kartet. Nedenfor kan du velge mellom karttyper (kartlag) fra Kartverkets Norgeskart. Lim inn koden for den karttypen du ønsker å bruke.
Kode for «topografisk kart»
<script type="text/javascript">
var map = L.map('map').setView([60.14,10.25],9); L.tileLayer('https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png', {
attribution: '© <a href="http://www.kartverket.no/">Kartverket</a>'
}).addTo(map);
</script>
</body>
</html>
Kode for «grått kart»
<script type="text/javascript">
var map = L.map('map').setView([60.14,10.25],9);
L.tileLayer('https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png', {
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!
Merk at du kan laste ned koden i sin helhet via last ned-knappen øverst på sida.
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.
The mail has been sent!