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.
Let’s start with a HTML 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.
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.
* 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.