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.