Postcrossing

Dank Postcrossing schreibe und erhalte ich seit einiger Zeit viele verschiedene Postkarten aus allen Teilen der Welt. Letztlich habe ich eine Postkarte aus Leverkusen erhalten, mit dem Hinweis, dass ein Briefkasten fehlt. Diesen habe ich dann mit Hilfe der Notiz gemappt. Eine zusätzliche Kontrolle ist trotzdem gern gesehen.

 

Postcrossing?

Postcrossing ist ein von Paulo Magalhães im Jahr 2005 initiiertes Projekt, das ermöglicht, von Postcrossern aus aller Welt Postkarten zu erhalten. Für jede selbst versendete Karte bekommt man von einem anderen Postcrosser eine zurück.

Weiterlesen

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