How-to OSM-Themenkarte

Beim letzten Bonner OSM Stammtisch wurde gefragt, wie man eine einfache Karte erstellt. Für die Briefkastenkarte nutze ich selbst Leaflet, mit zahlreichen Plug-ins. Daher verwende ich für dieses kurze How-to ebenfalls Leaflet.

 

Grundgerüst

Starten wir mit einer HTML-Seite, welchen folgenden Inhalt beinhaltet:

 

Leaflet

Im Web-Browser sehen wir somit nur eine weiße, leere Seite. Anschließend wird, wie in dem Leaflet Quick Start Guide beschrieben, das Leaflet JavaScript sowie der Style eingebunden. In Zeile 15 wird eine Karte erstellt. Der Mittelpunkt der Karte liegt in Bonn (Koordinaten 50.7344700 7.0987190, Zoomstufe 15).

Um eine Karte sehen zu können, muss noch ein OSM Layer als Hintergrund eingebunden werden.

Leaflet How-to Nr. 1

 

Overpass API

Zur Darstellung der OSM Daten wird das Leaflet Overpass API Plug-in verwendet. Das Plug-in wird in den HEAD-Bereich des HTML-Dokumentes eingefügt.

Für den produktiven Einsatz des Leaflet Overpass API Plug-ins empfehle ich den Download der JavaScript-Datei.

In Zeile 10 definieren wir die Anfrage, welche an die Overpass API gesendet wird. Für jeden Node wird ein Kreis erstellt. Die Farbe (Rot / Grün) richtet sich nach der Auswertung des Attributes collection_times. Zuletzt muss der Layer zur Karte hinzugefügt werden.

Leaflet How-to Nr. 2

Leaflet How-to Nr. 3

 

Zusammenfassung

* Einbinden von Leaflet
* Erstellen der Karte mit zusätzlicher Hintergrundkarte
* Einbinden des Leaflet Overpass API Plug-ins
* Erstellen der Suchanfrage zur Overpass API

Das gesamte Beispiel könnte ihr von meinem GitHub Account herunterladen. In einem weiteren Teil werde ich erläutern, wie man die Darstellung der Suchergebnisse den eigenen Vorstellungen anpassen kann.

2 Kommentare zu “How-to OSM-Themenkarte

  1. Danke für die gute Erklärung. Ich habe es jetzt ausprobiert und mache gerade Versuche, wie man statt Briefkästen Parkbänke mit und ohne Lehne (oder ohne Angabe zur Lehne…) darstellen kann.

Kommentare sind deaktiviert.