Leaflet auf cbrueggenolte.de

Geo‑Daten dynamisch mit Leaflet.js laden

96ca5227@cbrueggenolte.de (cbrueggenolte.de) — Tue, 08 Jul 2025 00:00:00 +0200

Hier ein Überblick über die wichtigsten Änderungen:

Statt die Layer-Reihenfolge mit bringToFront() zu steuern, haben ich nun Leaflet-Panes benutzt. So kann ich die Z-Index-Reihenfolge der Layer exakt bestimmen:

Länder liegen im Pane countriesPane (zIndex 400)
POIs im Pane poiPane (zIndex 500)
Hauptstädte/Capitals im Pane capitalsPane (zIndex 600)

Das sorgt für eine saubere und vorhersehbare Darstellung – unabhängig von Interaktionen oder Nachladen von Daten. Vorallem aber wird bei einem Hover-Over über Länder die Darstellung der POIs nicht mehr beeinflusst.

Neue map.js Datei

Hier die neue map.js Datei, die die Ländergrenzen, POIs und Hauptstädte verwaltet:

  1const map = L.map('map').setView([52.0705, 4.707], 6);
  2L.tileLayer('', {}).addTo(map);
  3var capitalsIcon = L.divIcon({ className: 'capitals-icon' });
  4
  5// Create custom panes for z-order control
  6map.createPane('countriesPane');
  7map.getPane('countriesPane').style.zIndex = 400;
  8
  9map.createPane('poiPane');
 10map.getPane('poiPane').style.zIndex = 500;
 11
 12map.createPane('capitalsPane');
 13map.getPane('capitalsPane').style.zIndex = 600;
 14
 15// Highlight-Funktionen
 16function highlightFeature(e) {
 17  const layer = e.target;
 18  layer.setStyle({
 19    weight: 2,
 20    color: '#ff0000',
 21    fillOpacity: 0.7,
 22  });
 23  layer.bringToFront();
 24}
 25
 26function resetHighlight(e) {
 27  geojson.resetStyle(e.target);
 28  overlayGroup.bringToFront();
 29}
 30
 31// Layer groups for better control
 32const baseGroup = L.layerGroup().addTo(map);
 33const overlayGroup = L.layerGroup().addTo(map);
 34const capitalsLayer = L.layerGroup().addTo(map);
 35
 36// Country boundaries with outlines and optional fill
 37let geojson;
 38
 39// Call layers in correct order
 40function initLayers() {
 41  addCountryLayer(addPOILayer);
 42}
 43
 44function addCountryLayer(callback) {
 45  fetch('/data/vm_medium_countries.geo.json')
 46    .then((res) => res.json())
 47    .then((data) => {
 48      if (baseGroup) baseGroup.clearLayers();
 49      geojson = L.geoJSON(data, {
 50        pane: 'countriesPane',
 51        style: (feature) => ({
 52          color: feature.properties.color || '#333',
 53          weight: 1,
 54          opacity: 1,
 55          fillColor: feature.properties.fillColor || '#eee',
 56          fillOpacity: 1,
 57        }),
 58        onEachFeature: (feature, layer) => {
 59          layer.bindPopup(feature.properties.name);
 60          layer.on({
 61            mouseover: highlightFeature,
 62            mouseout: resetHighlight,
 63          });
 64        },
 65      }).addTo(baseGroup);
 66      if (callback) callback();
 67    })
 68    .catch(console.error);
 69}
 70
 71function addPOILayer() {
 72  fetch('/data/poi.geo.json')
 73    .then((response) => response.json())
 74    .then((data) => {
 75      if (overlayGroup) overlayGroup.clearLayers();
 76      L.geoJSON(data, {
 77        pane: 'poiPane',
 78        style: function (feature) {
 79          if (!feature.properties) return {};
 80          return {
 81            color: feature.properties.stroke || '#3388ff',
 82            weight: feature.properties['stroke-width'] || 3,
 83            opacity: feature.properties['stroke-opacity'] || 1,
 84            fillColor: feature.properties.fill || '#3388ff',
 85            fillOpacity: feature.properties['fill-opacity'] || 0.2,
 86          };
 87        },
 88        onEachFeature: (feature, layer) => {
 89          if (feature.properties && feature.properties.name) {
 90            layer.bindPopup(feature.properties.name);
 91          }
 92        },
 93      }).addTo(overlayGroup);
 94    });
 95}
 96
 97// Capitals logic
 98function clearCapitals() {
 99  capitalsLayer.clearLayers();
100}
101
102document.getElementById('capitals-btn').onclick = async function () {
103  clearCapitals();
104  const res = await fetch('/api/capitals');
105  const capitals = await res.json();
106  capitals.forEach((capital) => {
107    const marker = L.marker([capital.lat, capital.lng], { icon: capitalsIcon, pane: 'capitalsPane' }).bindPopup(capital.name);
108    capitalsLayer.addLayer(marker);
109  });
110  capitalsLayer.bringToFront();
111};
112
113document.getElementById('remove-capitals-btn').onclick = function () {
114  clearCapitals();
115};
116
117initLayers();

Die Layer für Länder, POIs und Hauptstädte werden jetzt in eigenen LayerGroups verwaltet. Das macht das Nachladen, Entfernen und Aktualisieren von Daten viel einfacher und übersichtlicher.

Neue HTML-Struktur

Hier die neue index.html Datei, die die Karte und die Buttons enthält:

 1
 2<html lang="de">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <title>Minimal Leaflet Kartetitle>
 6    <link rel="stylesheet" href="styles.css" />
 7    <link rel="stylesheet" href="/public/leaflet/leaflet.css" crossorigin="" />
 8  head>
 9  <body>
10    <header>
11      <h1>Leaflet Demo Maph1>
12      <p class="subtitle">A simple demonstration of a Leaflet mapp>
13      <button id="capitals-btn">Load Capitals via APIbutton>
14      <button id="remove-capitals-btn">Remove Capitalsbutton>
15    header>
16
17    <div id="map">div>
18    <script src="/public/leaflet/leaflet.js" crossorigin="">script>
19    <script src="map.js">script>
20  body>
21html>

Neue Styles

Dazu passend die neuen Styles in der styles.css Datei, für die Karte und die Buttons:

 1/* Header ersetzen */
 2header {
 3  background-color: #f8f9fa;
 4  padding: 1em;
 5  text-align: center;
 6  border-bottom: 1px solid #ccc;
 7}
 8
 9/* und in der Map die Werte für 'margin' neu setzen */
10#map {
11  margin: 1rem 1rem;
12}
13
14button {
15  padding: 0.5em 1em;
16  margin: 0.5em;
17  border: none;
18  border-radius: 4px;
19  background-color: #007bff;
20  color: white;
21  cursor: pointer;
22}
23
24.capitals-icon {
25  background-color: #007bff;
26  border-radius: 50%;
27  width: 24px;
28  height: 24px;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}

Neue index.ts Datei

Jetzt noch die index.ts Datei, die die API für die Hauptstädte bereitstellt:

 1import { serve } from '@hono/node-server';
 2import { Hono } from 'hono';
 3import { serveStatic } from '@hono/node-server/serve-static';
 4
 5const app = new Hono();
 6
 7// Serve static files from 'public'
 8app.use('/public/*', serveStatic({ root: './' }));
 9
10// Serve static files from 'data'
11app.use('/data/*', serveStatic({ root: './' }));
12
13// API endpoint for dynamic location data
14app.get('/api/capitals', (c) => {
15  const capitals = [
16    { id: 1, name: 'Berlin', lat: 52.52, lng: 13.405 },
17    { id: 2, name: 'Paris', lat: 48.8566, lng: 2.3522 },
18    { id: 3, name: 'London', lat: 51.5074, lng: -0.1278 },
19    { id: 4, name: 'Madrid', lat: 40.4168, lng: -3.7038 },
20    { id: 5, name: 'Rome', lat: 41.9028, lng: 12.4964 },
21    { id: 6, name: 'Vienna', lat: 48.2082, lng: 16.3738 },
22    { id: 7, name: 'Amsterdam', lat: 52.3676, lng: 4.9041 },
23    { id: 8, name: 'Brussels', lat: 50.8503, lng: 4.3517 },
24    { id: 9, name: 'Copenhagen', lat: 55.6761, lng: 12.5683 },
25    { id: 10, name: 'Stockholm', lat: 59.3293, lng: 18.0686 },
26    { id: 11, name: 'Oslo', lat: 59.9139, lng: 10.7522 },
27    { id: 12, name: 'Helsinki', lat: 60.1695, lng: 24.9354 },
28    { id: 13, name: 'Lisbon', lat: 38.7223, lng: -9.1393 },
29    { id: 14, name: 'Dublin', lat: 53.3498, lng: -6.2603 },
30    { id: 15, name: 'Warsaw', lat: 52.2297, lng: 21.0122 },
31    { id: 16, name: 'Prague', lat: 50.0755, lng: 14.4378 },
32    { id: 17, name: 'Budapest', lat: 47.4979, lng: 19.0402 },
33    { id: 18, name: 'Bratislava', lat: 48.1482, lng: 17.1067 },
34    { id: 19, name: 'Ljubljana', lat: 46.0569, lng: 14.5051 },
35    { id: 20, name: 'Zagreb', lat: 45.815, lng: 15.9819 },
36  ];
37  return c.json(capitals);
38});
39
40// Redirect root to public/index.html
41app.get('/', (c) => c.html(''));
42
43// Start the server
44serve(
45  {
46    fetch: app.fetch,
47    port: 3000,
48  },
49  (info) => {
50    console.log(`Server is running on http://localhost:${info.port}`);
51  }
52);

Die API liefert eine Liste von Hauptstädten mit ihren Koordinaten. Diese werden später in der Karte als Marker angezeigt. Und mit den neu hinzugefügten Buttons kann der Nutzer die Hauptstädte dynamisch laden und entfernen.

Neue Daten

Und ins Verzeichnis data kommt neben der GeoJSON-Datei vm_medium_countries.geo.json, die du von geojson-maps.kyd.au heruntergeladen hast, die neue Version der `poi.geo.json Datei welche neue POI enthält.

Wie in der map.js Datei zu sehen ist, werden die Information zur Darstellung der POIs jetzt direkt aus den GeoJSON-Properties (stroke, stroke-width, fill, etc.) übernommen. So kann jeder POI individuell gestaltet werden – z.B. für besondere Städte oder Flächen.

Fazit

Durch die Nutzung von LayerGroups, Panes und klaren Funktionsaufrufen ist der Code jetzt deutlich modularer und leichter zu erweitern.

Wenn alles geklappt hat, solltest du nun eine funktionierende Leaflet-Karte haben, die Ländergrenzen anzeigt und dynamisch POIs und Hauptstädte laden kann und ungefähr so aussieht:

Minimalistische Offline-Leaflet-Karte mit Node.js & Hono

96ca5227@cbrueggenolte.de (cbrueggenolte.de) — Mon, 07 Jul 2025 00:00:00 +0200

Für ein Projekt benötigte ich eine einfache, offlinefähige Leaflet-Karte, die nur Ländergrenzen und dynamisch injizierte Punkte anzeigt. Hier ist eine Schritt-für-Schritt-Anleitung, wie du so etwas mit Node.js und Hono umsetzen kannst.

Hono ist ein leichtgewichtiger Web-Framework für Node.js, das sich hervorragend für einfache APIs eignet. Wenn wir fertig sind, haben wir eine minimalistische Leaflet-Karte, die offline funktioniert und die Ländergrenzen sowie dynamisch geladene Punkte anzeigt.

Schritt 1: Projekt initialisieren

Erstelle ein neues Hono-Projekt:

1npm create hono@latest

Folge den Anweisungen im Terminal und wähle die folgenden Optionen:

1create-hono version 0.19.2
2✔ Target directory leaflet-hono
3✔ Which template do you want to use? nodejs
4✔ Do you want to install project dependencies? Yes
5✔ Which package manager do you want to use? npm
6✔ Cloning the template
7✔ Installing project dependencies
8🎉 Copied project files
9Get started with: cd leaflet-hono

Wir installieren hier auch Leaflet um aus dem node_modules Verzeichnis auf die Leaflet-Bibliothek zugreifen zu können.

1cd leaflet-hono
2npm install leaflet

Schritt 2: Projektstruktur anlegen

leaflet-hono/
├── data/
├── public/
│   ├── leaflet/
│   │   ├── images/ ( << siehe unten für Details >> )
│   │   ├── leaflet.css
│   │   ├── leaflet.js
│   │   └── leaflet.js.map
├── src/
│   ├── index.ts

data/ enthält heruntergeladene GeoJSON-Dateien (z. B. Natural Earth 50m).
public/ enthält Frontend-Dateien.
server.js enthält den Hono-Server und API-Endpunkte.
public/leaflet/images Ordner mit Leaflet-Bildern aus dem node_modules/leaflet/dist/images Verzeichnis)

Kopiere die Leaflet Dateien aus node_modules/leaflet/dist/ in den public/leaflet/ Ordner:

1mkdir -p public/leaflet/images
2cp node_modules/leaflet/dist/images/* public/leaflet/images/
3cp node_modules/leaflet/dist/leaflet.css public/leaflet/
4cp node_modules/leaflet/dist/leaflet.js public/leaflet/
5cp node_modules/leaflet/dist/leaflet.js.map public/leaflet/

Schritt 3: App starten

Bevor wir weiter machen, stellen wir sicher, dass wir unsere App einmal starten können. Starte dazu den Hono-Server:

1npm run dev

Wenn alles richtig eingerichtet ist, solltest du die Standard-Hono-Seite unter http://localhost:3000 sehen.

Schritt 4: `src/index.ts`

Nun erweitern wir die src/index.ts Datei, um die Daten aus dem public und data Ordner bereitzustellen.

 1import { serve } from "@hono/node-server";
 2import { Hono } from "hono";
 3import { serveStatic } from "@hono/node-server/serve-static";
 4
 5const app = new Hono();
 6
 7// Serve static files from 'public'
 8app.use("/public/*", serveStatic({ root: "./" }));
 9
10// Serve static files from 'data'
11app.use("/data/*", serveStatic({ root: "./" }));
12
13app.get("/", (c) => {
14  return c.text("Hello Hono!");
15});
16
17serve(
18  {
19    fetch: app.fetch,
20    port: 3000,
21  },
22  (info) => {
23    console.log(`Server is running on http://localhost:${info.port}`);
24  },
25);

Zum Testen erstellen wir eine einfache Test-Datei, die wir später in der Karte verwenden werden. Erstelle dazu eine Datei data/poi.geo.json mit folgendem Inhalt:

 1{
 2  "type": "FeatureCollection",
 3  "features": [
 4    {
 5      "type": "Feature",
 6      "properties": { "name": "Den Haag" },
 7      "geometry": {
 8        "type": "Point",
 9        "coordinates": [4.3007, 52.0705]
10      }
11    },
12    {
13      "type": "Feature",
14      "properties": { "name": "Utrecht" },
15      "geometry": {
16        "type": "Point",
17        "coordinates": [5.09, 52.0907]
18      }
19    }
20  ]
21}

Wenn nun aufgerufen wird, sollte die GeoJSON-Datei angezeigt werden.

Schritt 5: `public/index.html` und `public/styles.css`

In die index.html Datei fügen wir die grundlegende Struktur für die Leaflet-Karte ein. Erstelle die Datei public/index.html mit folgendem Inhalt:

 1
 2<html lang="de">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <title>Minimal Leaflet Kartetitle>
 6    <link rel="stylesheet" href="styles.css" />
 7    <link rel="stylesheet" href="/public/leaflet/leaflet.css" crossorigin="" />
 8  head>
 9  <body>
10    <header>
11      <h1>Leaflet Demo Maph1>
12      <p class="subtitle">A simple demonstration of a Leaflet mapp>
13    header>
14
15    <div id="map">div>
16    <script src="/public/leaflet/leaflet.js" crossorigin="">script>
17    <script src="map.js">script>
18  body>
19html>

Um das nicht ganz so langweilig zu gestalten, fügen wir noch etwas CSS hinzu. Erstelle die Datei public/styles.css mit folgendem Inhalt:

 1html,
 2body {
 3  margin: 0;
 4  padding: 0;
 5  width: 100%;
 6  height: 100%;
 7}
 8body {
 9  font-family: Arial, sans-serif;
10  height: 100vh;
11  box-sizing: border-box;
12  display: flex;
13  flex-direction: column;
14}
15
16h1,
17.subtitle {
18  margin: 0 0 0.5em 0;
19  text-align: center;
20}
21.subtitle {
22  font-size: 1.2em;
23  color: #666;
24  margin-bottom: 1em;
25}
26#map {
27  flex: 1;
28  margin: 0 2vw 2vw 2vw; /* margin around the map */
29  background-color: #f0f0f0;
30  border: 1px solid #ccc;
31  border-radius: 8px;
32}

Schritt 6: `public/map.js`

Was nun noch fehlt, ist die Logik, um die Karte zu initialisieren und die GeoJSON-Daten zu laden. Erstelle die Datei public/map.js mit folgendem Inhalt:

 1const map = L.map("map").setView([52.0705, 4.707], 11);
 2
 3L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
 4  maxZoom: 19,
 5}).addTo(map);
 6
 7fetch("/data/poi.geo.json")
 8  .then((response) => response.json())
 9  .then((data) => {
10    L.geoJSON(data).addTo(map);
11  });

Hiermit initialisieren wir die Karte auf den Koordinaten zwischen Den Haag und Utrecht und laden die GeoJSON-Daten von unserem Hono-Server. Die Punkte werden dann als Layer zur Karte hinzugefügt.

Wenn alles geklappt hat, sollte es ungefähr so aussehen:

Schritt 7: OSM ersetzen und Ländergrenzen hinzufügen

Da wir aber eine offlinefähige Karte erstellen wollen, müssen wir die Ländergrenzen und andere Geodaten lokal bereitstellen. Wir verwenden dafür GeoJSON-Dateien von Natural Earth die sich gut für kleinere Karten eignen.

Um die Ländergrenzen herunterzuladen, navigiere zu geojson-maps.kyd.au, wähle “Medium Resolution” und aktiviere die Checkbox “All”. Die mittlere Auflösung ist für unsere Zwecke ausreichend und hat mit nur 4,5 MB eine handhabbare Größe. Die Option “All” stellt sicher, dass alle Ländergrenzen enthalten sind.

Klicke anschließend auf “Build Custom GeoJSON” in der rechten unteren Ecke, um die Datei herunterzuladen. Diese Datei enthält alle Ländergrenzen im GeoJSON-Format, das mit Leaflet kompatibel ist. Speichere die Datei im data-Ordner unter dem Namen vm_medium_countries.geo.json.

Anschließend erweitern wir die public/map.js Datei, um die Ländergrenzen zu laden und anzuzeigen:

 1const map = L.map("map").setView([52.0705, 4.707], 5);
 2L.tileLayer("", {}).addTo(map);
 3
 4fetch("/data/vm_medium_countries.geo.json")
 5  .then((response) => response.json())
 6  .then((data) => {
 7    L.geoJSON(data, {
 8      style: (feature) => ({
 9        color: feature.properties.color || "#333",
10        weight: 1,
11        opacity: 1,
12        fillColor: feature.properties.fillColor || "#eee",
13        fillOpacity: 1,
14      }),
15    }).addTo(map);
16  });

Der Code initialisiert eine Leaflet-Karte ohne Hintergrund-Layer (also ohne Basiskarte) und zeigt die Ländergrenzen aus einer lokalen GeoJSON-Datei an.

Die Karte wird auf Europa zentriert und auf Zoomstufe 5 gesetzt.
Es wird ein leerer Tile-Layer hinzugefügt, damit Leaflet korrekt funktioniert, aber keine Online-Kartenkacheln geladen werden.
Die Ländergrenzen werden per fetch aus der Datei /data/vm_medium_countries.geo.json geladen.
Mit L.geoJSON werden die Länder als Layer zur Karte hinzugefügt. Die Darstellung (Linienfarbe, Füllfarbe) kann für jedes Land individuell über die Eigenschaften im GeoJSON gesteuert werden (feature.properties.color und feature.properties.fillColor). Gibt es keine Angabe, werden Standardwerte verwendet.

Um das ganze noch etwas abzurunden können wir die Hintergrundfarbe der Karte in der public/styles.css Datei anpassen:

1#map {
2  flex: 1;
3  margin: 0 2vw 2vw 2vw; /* margin around the map */
4  background-color: #87ceeb; /* light blue, resembling the sea */
5  border: 1px solid #ccc;
6  border-radius: 8px;
7}

Damit erhält die Karte eine hellblaue Hintergrundfarbe, die visuell das Meer andeuten soll. Die Länder werden in einem neutralen Grau dargestellt.

Schritt 8: Ländergrenzen und POI kombinieren

Nun wollen wir noch die POI-Punkte aus der data/poi.geo.json Datei auf der Karte anzeigen. Dazu erweitern wir die public/map.js Datei:

1fetch("/data/poi.geo.json")
2  .then((response) => response.json())
3  .then((data) => {
4    L.geoJSON(data, {
5      onEachFeature: (feature, layer) => {
6        layer.bindPopup(feature.properties.name);
7      },
8    }).addTo(map);
9  });

Nach dem Neuladen der Seite sollten nun die POI-Punkte (Den Haag und Utrecht) auf der Karte angezeigt werden. Wenn du auf einen Punkt klickst, öffnet sich ein Popup mit dem Namen des Ortes.

Bonus: Fancy Leaflet Funktionen

Um die Karte ein wenig interaktiver zu gestalten, können wir noch einige zusätzliche Features hinzufügen. Leaflet bietet viele Möglichkeiten, um die Benutzererfahrung zu verbessern. Ersetze die public/map.js Datei mit folgendem Inhalt:

 1const map = L.map("map").setView([52.0705, 4.707], 6);
 2// Leaflet benötigt mindestens einen Tile-Layer, auch wenn er leer ist.
 3// Deshalb wird hier ein leerer Tile-Layer eingebunden, um die Engine korrekt zu initialisieren.
 4L.tileLayer("", {}).addTo(map);
 5
 6// Highlight-Funktionen
 7function highlightFeature(e) {
 8  const layer = e.target;
 9  layer.setStyle({
10    weight: 2,
11    color: "#ff0000",
12    fillOpacity: 0.7,
13  });
14  layer.bringToFront();
15}
16
17function resetHighlight(e) {
18  geojson.resetStyle(e.target);
19}
20
21// Country boundaries with outlines and optional fill
22let geojson; // Global variable to hold the geojson layer
23fetch("/data/vm_medium_countries.geo.json")
24  .then((res) => res.json())
25  .then((data) => {
26    geojson = L.geoJSON(data, {
27      style: (feature) => ({
28        color: feature.properties.color || "#333",
29        weight: 1,
30        opacity: 1,
31        fillColor: feature.properties.fillColor || "#eee",
32        fillOpacity: 1,
33      }),
34      onEachFeature: (feature, layer) => {
35        layer.bindPopup(feature.properties.name);
36        layer.on({
37          mouseover: highlightFeature,
38          mouseout: resetHighlight,
39        });
40      },
41    }).addTo(map);
42  })
43  .catch(console.error);
44
45// POI data with popups
46fetch("/data/poi.geo.json")
47  .then((response) => response.json())
48  .then((data) => {
49    L.geoJSON(data, {
50      onEachFeature: (feature, layer) => {
51        layer.bindPopup(feature.properties.name);
52      },
53    }).addTo(map);
54  });

Dieser Code fügt folgende Features hinzu:

Hover-Effekte: Länder werden hervorgehoben, wenn der Mauszeiger darüber schwebt.
Popups: Beim Klicken auf Länder oder POI-Punkte öffnet sich ein Popup mit dem Namen.
Popup für Länder: Beim Klicken auf ein Land öffnet sich ein Popup mit dem Namen des Landes.
Popup für POI-Punkte: Beim Klicken auf einen POI-Punkt öffnet sich ein Popup mit dem Namen des Ortes.

🧭 Fazit

Mit weniger als 100 Zeilen Code lässt sich eine minimalistische, offlinefähige Leaflet-Karte mit Hono realisieren. Ideal für Prototyping oder einfache Anwendungen – ohne externe Abhängigkeiten und voll anpassbar.

Die Karte kann leicht erweitert werden, um weitere Features hinzuzufügen, wie z. B. Marker, Polygone oder andere GeoJSON-Daten. Leaflet bietet eine Vielzahl von Möglichkeiten, um Karten interaktiv und ansprechend zu gestalten.

Das Projekt in Version 1 kannst du hier herunterladen: https://codeberg.org/cblte/leaflet-hono-offline/releases/tag/v1