Vor einiger Zeit habe ich einen Blogartikel geschrieben zum Thema OpenStreetMap Karten selbst hosten. Da einige der darin beschriebenen Techniken heute (Stand Mai 2024) nicht mehr problemlos funktionieren oder inzwischen überflüssig sind, habe ich mich dazu entschlossen, diese Aktualisierung zu schreiben.
Warum interaktive Karten selbst hosten?
Warum selbst eine interaktive Karte hosten, wenn man sie leicht über Mapbox oder Google Maps einbetten kann?
Ich persölich bevorzuge es, die Kartendaten auf meinem eigenen Server zu haben, da ich mich dann nicht um externe Anbieter kümmern muss. Das erleichtert mir die Anpassung oder den Umzug meiner Website.
Außerdem muss ich mir keine Sorgen um Datenschutz oder DSGVO-Konformität eines Drittanbieters machen.
Ich bin vor einiger Zeit auf Protomaps gestoßen, ein Datenformat für Kartendaten. Dieses vereinfacht die Veröffentlichung und das Selbst-Hosten von Open-Steetmaps Karten.
Um eine selbstgehostete Karte mithilfe von Protomaps zu veröffentlichen, sind folgene Schritte notwendig:
- Bestimmen des gewünschten Kartenausschnitts
- Herunterladen des entsprechenden Kartenmaterials
- Einbinden und Anzeigen des Kartenmaterials in eine Webseite
- (optional) Anpassen des Kartenstils
Schritt 1: Bestimmen des Kartenumrisses
Bevor wir starten, legen wir als erstes einen neuen Ordner an für das Projekt an. Hier legen wir im laufe dieses Tutorials alle wichtigen Daten ab.
Zunächst werden wir den Umriss unserer Karte festlegen und speichern ihn als Datei speichern. Diesen Umriss werden wir dann im nächsten Schritt benutzen, um das passende Kartenmaterial herunterzuladen.
Je größer der Umriss, desto mehr Kartendaten müssen heruntergeladen werden, und desto mehr Speicherplatz wird benötigt.
Entsprechend empfehle ich, zunächst mit einem kleineren Umriss zu starten (ca. 10 x 10 km).
Diesen Umriss beschreiben wir im GeoJSON-Format und legen ihn als .geojson
-Datei in unserem Projektordner ab.
Die graphische Editor geojson.io ist kostenlos, und ermöglcht es uns, eine GeoJSON-Datei anzulegen und zu bearbeiten:
Unter Save
> GeoJSON
können wir die Datei herunterladen. Diese legen wir dann unserem Projektordner ab und benennen sie in bounds.geojson
um.
Unser Projektordner sieht zu diesem Zeitpunkt dann so aus:
Alternativ ist es natürlich auch möglich, die GeoJSON-Datei manuell oder mit anderen Editoren zu erstellen.
Schritt 2: Herunterladen der Kartendaten
Nachdem wir den Kartenumriss in eine Datei gespeichert haben, können wir nun daran gehen, die Kartendaten herunterzuladen.
Die Openstreetmaps-Kartendaten im Protomaps-Dateiformat werden von Protomaps zuf Verfügung gestellt. Die zur Verfügung gestellten Datensätze enthalten allerdings die Kartendaten für die ganze Welt und sind entsprechend viele Gigabytes groß. Für die allermeissten Kartenanwendungen reicht ein kleinerer Kartenausschnitt aus.
Um den in Schritt 1 festgelegten Kartenauschnitt herunterzuladen, verwenden wir ein Kommandozeilen-Tool namens go-pmtiles
.
Dieses Tool kann man unter https://github.com/protomaps/go-pmtiles/releases herunterladen. Auf der Seite sind verschiedene Dateien aufgelistet. Hier laden wir die passende zip-Datei für unser Betriebssystem herunter und entpacken diese.
Im heruntergeladenen zip-Archiv befindet ich die ausführbare Datei pmtiles
. Diese Datei legen wir in unserem Projektordner ab:
Nachdem wir das go-pmtiles
-Tool erfolgreich heruntergeladen haben, können wir nun daran gehen, die Kartendaten herunterzuladen.
Unter https://maps.protomaps.com/builds/ befindet sich eine Liste mit den aktuellsten Kartendaten, von hier können wir uns eine Version aussuchen und die Daten für unseren Kartenausschnitt herunterladen. Wir kopieren uns zunächst die Link-Adresse des download
-Links (in meinem Fall zum Beispiel https://build.protomaps.com/20231002.pmtiles).
Diese Link-Adresse nutzen wir dann in unserem Terminal-Befehl, um die Kartendaten herunterzuladen:
Nach kurzer Zeit sollten die Daten heruntergeladen werden…
Danach sollte unser Projektordner so aussehen:
Damit haben wir den Download der Kartendaten abgeschlossen und wir können nun im nächsten Schritt daran gehen, die Kartendaten auf einer Webseite anzuzeigen.
Schritt 3: Kartendaten in Webseite einbinden und anzeigen
Zum Einbinden der Karte werden wir die JavaScript-Bibliothek Maplibre GL JS verwenden.
Wir laden dazu die folgenden JavaScript und CSS-Dateien herunter, und speichern sie ebenfalls in unserem Projektordner:
- https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js unter
assets/js/maplibre-gl.js
- https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css unter
assets/css/maplibre-gl.js
- https://unpkg.com/pmtiles@2.11.0/dist/index.js unter
assets/js/pmtiles.js
Weiterhin verschieben wir die Datei mapdata.pmtiles
in den assets
-Ordner.
Die Inhalte Projektordners sollten nun in etwa so aussehen:
Als nächstes erstellen wir in unserem Projektordner noch eine simple_map.html
-Datei mit folgendem Inhalt:
Wenn wir den Projektordner auf einen Webserver hochladen (bzw. einen Webserver in diesem Ordner starten), und dann die simple_map.html
-Datei im Browser öffnen, wird unsere Karte jetzt dargestellt. (Wichtig dabei: der Webserver muss HTTP Range Requests unterstützen.)
Schritt 4: Kartendarstellung anpassen
Die visuelle Kartendarstellung kann mit sogenannten Style-Regeln definiert und erweitert werden. Das ermöglicht es z.B. Gebäude einzufärben oder Straßen farblich zu markieren. Diese Style-Regeln werden auf der Seite von Maplibre genauer erklärt.
Netterweise werden von Protomaps einige fertige Kartenstile zur Verfügung gestellt. Diese kann man unter auf der Testseite ausprobieren, anpassen und kopieren. Den Kartenstil speichern wir in unserem Projektordner als Datei unter assets/map_style.json
.
Für die Textdarstellung werden neben den Kartendaten zusätzlich auch noch Schriftarten im .pbf
-Format benötigt. Diese kann man ebenfalls bei GitHub aus dem basemaps-assets Repository von Protomaps herunterladen, (oder einfach diesen Link klicken). Den enthaltenen fonts
-Order fügen wir ebenfalls unserem Projektordner hinzu, unter /assets
.
Alternativ erlaubt es die Webseite Maplibre Font Maker eigene Schriftdateien (.ttf
, .otf
) in das .pbf
-Format zu konvertieren.
Als nächstes erstellen wir in unserem Projektordner eine neue Datei namens styled_map.html
mit folgendem Inhalt:
Wenn wir diese Datei im Browser öffnen, sieht es ungefähr so aus:
Mit unserer Selbsgehosteten Karte als Basis stehen uns alle Wege offen: Auf der Seite von MapLibre gibt es die verschiedensten Beispiele, dafür was man mit einer Karte so alles anstellen kann.
Ein einfaches Beispiel: Die Darstellung einer GPX-Datei
Hinterlasse einen Kommentar
Auf der eigenen Website geantwortet? Sende eine Webmention!