How-to OSM-Map

How to create a simple map like the Briefkastenkarte? This questions comes up during the last OSM meeting in Bonn. For the Briefkastenkarte I use Leaflet with numerous plug-ins. Therefore I use Leaflet for this How-to too.

 

Frame

Let’s start with a HTML page:

 

Leaflet

Now, you see a blank web page. To get the map, you need to do the following steps, like described in Leaflet Quick Start Guide. Adding Leaflet JavaScript and Style to your page.

With line 15 we will initialize the map and set its view to Bonn (geographical coordinates 50.7344700 7.0987190, zoom level 15).

Next we will add a background layer to our map. In this case I use OSM Mapnik.

Leaflet How-to Nr. 1

 

Overpass API

To portray the OSM data, the Leaflet Overpass API plug-in is used. Refer the plug-in in the HEAD section of the HTML document.

Do not use the plug-ins directly from GitHub. For production please download the plug-ins.

In line 10 we define the request, which is sent to the Overpass API. For each node, a circle is created. The color (red / green) is based on the interpretation of the attribute collection_times. Finally, the layer must be added to the map.

Leaflet How-to Nr. 2

Leaflet How-to Nr. 3

 

Summary

* Refer Leaflet
* Create map with background layer
* Refer Leaflet Overpass API Plug-ins
* Create Overpass API query

You can download the demo from my GitHub account. In a second part, I will explain how to customize the portrayal of search results.

Weiterlesen

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.

Weiterlesen