Lav interaktive GIS-kort med Leaflet

Leaflet er det mest anvendte open-source JavaScript library for online mobil-venlige ineraktive GIS kort. Fordelene ved Leaflet er at det har et kæmpe community som hele tiden udvikler nye funktionaliteter og at det er udviklet specifikt til online kort og derfor er super effektivt (et kort kan fylde helt ned til cirka 50 KB).

Trinvis guide til at lave dit første Leaflet kort

Der findes wrappers til Leaflet i de fleste sprog (Python har blandt andet en række libraries som bygger overpå Leaflet), men i dette eksempel viser vi hvordan man kommer igang med Leaflet uden brug af andet en JS og HTML.

Følgende er et grundlæggende eksempel på, hvordan du kan oprette et interaktivt kort ved hjælp af Leaflet. Du kan tilføje flere lag, tilpasse kortets udseende og tilføje avancerede funktioner baseret på dine specifikke behov. Leaflet’s dokumentation og fællesskab er gode ressourcer til at lære mere på Leaflets officielle hjemmeside.

1. Forbered HTML-siden: Start med at oprette en HTML-side, hvor du vil indlejre kortet. Dette kan gøres ved at oprette en simpel HTML-fil eller integrere Leaflet i en eksisterende webside.

2. Inkluder Leaflet-biblioteket: Du skal indlæse Leaflet-biblioteket i din HTML-side ved at tilføje følgende linjer i <head>-sektionen:html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

3. Opret et kortcontainer-element: I din HTML-kode skal du definere et <div>-element, hvor kortet skal vises. Dette kan se sådan ud:

<div id="map" style="width: 100%; height: 500px;"></div>

4. Opret JavaScript-koden: Nu skal du tilføje JavaScript-koden for at oprette og konfigurere dit Leaflet-kort. Dette kan se sådan ud:

<script>
  // Opret et kort og angiv startkoordinater og zoomniveau
  var map = L.map('map').setView([51.505, -0.09], 13);
  // Tilføj et flisebillede til kortet (f.eks. OpenStreetMap)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
  // Tilføj markør til kortet
  var marker = L.marker([51.5, -0.09]).addTo(map);
  // Tilføj popuptekst til markøren
  marker.bindPopup("<b>Hej!</b><br>Dette er en interaktiv markør.").openPopup();
</script>

5. Test dit kort: Åbn din HTML-fil i en webbrowser for at se det interaktive kort i aktion.

6. Tilpasning: Du kan tilpasse dit kort yderligere ved at tilføje flere markører, polylines, polygoner, tilpassede flisebilleder og interaktioner som klik- eller hover-hændelser. Leaflet-dokumentationen er en værdifuld kilde til yderligere information om avancerede funktioner og muligheder.

7. Publicér dit kort: Når du er tilfreds med dit interaktive kort, kan du uploade din HTML-fil til en webserver eller værtsplatform for at dele det med andre.

Scroll to Top