POI’s in umap integrieren

Ich benutze für die Darstellung meiner Inlineskatekarte umap.

Ich habe hier auf der Internetseite bereits beschrieben, wie man Fotos in umap elegant integrieren kann.

In diesem Beitrage erläutere ich, wie man öffentliche POI’s (Points of Interest) in umap integrieren kann.

POI’s sind z.B. Supermärkte, Parkplätze, Eisenbahnstationen, Gaststätten, Hotels u.v.m.

Man kann sich openpoi.org diverse POI’s nach verschiedenen Kategorien anzeigen lassen. Diese stammen aus dem Netzwerk von Open Street Map (OSM).

Die Anleitung basiert auf folgenden Informationen:

https://wiki.openstreetmap.org/wiki/DE:UMap/overpass

http://www.mappa-mercia.org/2014/09/creating-an-always-up-to-date-map.html

Beispiel 1 – Supermärkte & Kioske

Für Demonstrationszwecke habe ich eine neue umap-Seite veröffentlicht:

https://umap.openstreetmap.fr/de/map/pois_301289

Hier gibt es u.a. die Ebene „POI – Supermärkte“.

Diese Ebene zeigt alle Supermärkte an, die in der Datenbank von OSM enthalten sind. Allerdings erst ab einer Zoomstufe von 14. D.h., man muss etwas in die Karte hineinzoomen, bevor die POI’s erscheinen.

Man kann am Link erkennen, welche Zoomstufe gerade aktiv ist:

Bei diesem Beispiel sieht man, dass die Zoomstufe 14 aktiv ist und somit die Supermärkte auch angezeigt werden.

„Ausgelagerte Daten“ einrichten

Alle weiteren Einstellungen sind dem Bild zu entnehmen.

• Format: osm (muss so eingestellt werden!)
• Von Zoomstufe: Optional -> hier im Beispiel auf 14, ansonsten leer
• Dynamisch: Ein (muss so eingestellt werden!)
• Proxyanforderung: Ein (muss so eingestellt werden!)

Entscheidend ist die URL. Die variablen Teile dieses Links habe ich rot und fett markiert.

Nur Supermärkte abfragen

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];node["shop"="supermarket"]({south},{west},{north},{east});out;

Supermärkte & Kioske abfragen

Möchte man neben Supermärkten auch noch Kioske in die Abfrage mit einbeziehen, würde der Link wie folgt aussehen:

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];node["shop"~"supermarket|kiosk"]({south},{west},{north},{east});out;

Mit dem ~ (Schlangenzeichen) wird ausgedrückt, dass man nicht nur nach einem Attribut sucht. Man kann beliebig viele Attribute abfragen, die sich innerhalb einer Kategorie (wie hier: SHOP) befinden. Man trennt die einzelnen Attribute mit einem | (Pipe-Zeichen).

Woher die Attribute nehmen?

Woher erfährt man wie die Attribute heißen, damit man tatsächlich Supermärkte angezeigt bekommt?

Ich habe diese Information von openpoimap.org übernommen. Hier ein Beispiel:

http://openpoimap.org/?map=food&zoom=14&lat=47.64484&lon=9.17238&layers=B00FFFFFFFFFFFFFTF

Klickt man dann auf das Symbol mit dem Einkaufswagen, erhält man die gewünschten Informationen. Hier sind auch noch andere Informationen enthalten (insofern diese angegeben wurden), wie z.B. die Öffnungszeiten des Supermarktes.

Möchte man, dass alle Supermärkte in der umap-Karte angezeigt werden, muss der Link folgendes enthalten, wie oben auch angezeigt: {south},{west},{north},{east}

Festlegen eines Symbols

Unter „Formeigenschaften“ legt man ein passendes Symbol fest. Ich habe mich für einen Einkaufswagen entschieden.

Einrichtung der Popup-Informationen

Ich habe hier zu Demonstrationszwecken mal alle möglichen Informationen angegeben:

• # {name} – Der Name des POI’s bzw. des Supermarktes. Das #-Zeichen formatiert den Eintrag fett
• {opening_hours} – Öffnungszeiten
• {shop} – Die Art des Ladens, hier kommt als Ergebnis natürlich Supermarkt
• {wheelchair} – Falls die Information zur Verfügung steht erscheint hier, ob der Laden geeignet für Rollstuhlfahrer ist mit Ergebnis yes oder no.
• Link: https://www.openstreetmap.org/{id} –  Das ist der Link zur Originalseite des POI’s auf OSM.
• {description} – Falls eine Beschreibung verfügbar ist, wird diese mit diesem Tag angezeigt.
• {website} – Falls eine Homepage angegeben wurde, wird sie angezeigt, wenn man dieses Kriterium einfügt.
• Breitengrad: {lat}
• Längengrad: {lon}
• https://maps.google.com/?q={lat},{lon} – Link zu Google Maps

Und hier nochmal komplett zum Mitschreiben:

# {name}
Öffnungszeiten: {opening_hours}
Art: {shop}
Barrierefrei?: {wheelchair}
Link: https://www.openstreetmap.org/{id}
{description}
Hompage: {website}
Breitengrad: {lat}
Längengrad: {lon}
Google Maps:
https://maps.google.com/?q={lat},{lon}


Beispiel 2 – Eisenbahnstationen

Im zweiten Beispiel verwende ich zu Demonstrationszwecken andere Einstellungen. Und zwar soll das Gebiet in dem die POI’s der Eisenbahnstationen angezeigt werden, innerhalb eines Rahmens eingeschränkt werden.

Zudem gibt es keinen Zoomlevel ab dem die POI’s angezeigt werden.

Wie man das Gebiet einschränkt

Um das Gebiet einzuschränken braucht man insgesamt vier Koordinaten:

• Den Breiten- und den Längengrad des ersten Eckpunktes
• Den Breiten- und Längengrad des zweiten Eckpunktes

Entweder wählt man die Daten der blauen oder der grünen Ecken. Das ist egal. Anhand der gegenüberliegenden Eckpunkte wird ein Rechteck aufgespannt, welches das Gebiet der POI’s eingrenzt, sodass alle außerhalb des Rechtecks liegende POI’s nicht in umap angezeigt werden.

Die Daten holt man sich z.B. aus Google Maps. Man klickt in Google Maps mit der rechten Maustaste auf den ersten Eckpunkt, den man setzen möchte und wählt dann „Was ist hier?“ und erhält als Ergebnis den Breiten- und den Längengrad des Punktes.

Breitengrad: 50.226644 (Nördliche Begrenzung)

Längengrad: 8.414319 (Westliche Begrenzung)

Dann klickt man den zweiten Eckpunkt an und sucht sich die Daten raus.

Breitengrad: 50.044787 (Südliche Begrenzung)

Längengrad: 8.913849 (Östliche Begrenzung)

Nun muss man bei dem Einsetzen der Daten in den Link auf die richtige Reihenfolge achten, wie es hier exemplarisch dargestellt ist:

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];node["railway"="station"](Süd,West,Nord,Ost);out;

Die URL, die nun unter „ausgelagerte Daten“ einzustellen ist, sieht dann wie folgt aus:

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];node["railway"="station"](50.044787,8.414319,50.226644,8.913849);out;

Beispiel 3 – Parkplätze (way)

Parkplätze werden in OSM in aller Regel als Flächen dargestellt und nicht als Geopunkte. Wenn es sich um Flächen handelt, wird diese als „way“ und nicht als „node“ bezeichnet.

Die URL sieht dann z.B. wie folgt aus:

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];way["amenity"="parking"]({south},{west},{north},{east});(._;>;);out;

WICHTIG!!! Bei way muss vor dem „out“ noch folgende Zeichenfolge eingeschoben werden: (._;>;);

 

Popupinhaltstil als TABELLE

Da es nicht immer so leicht ist, herauszubekommen welche Parameter einem POI zugeordnet sind, kann man als Popupinhaltstil einfach „Tabelle“ auswählen, und dann werden alle Parameter ausgegeben, die einen Inhalt haben.

Beispiel 4 – Nochmal Supermärkte (way & node kombiniert)

Seltsamerweise werden Supermärkte mal als „way“ mal als „node“ klassifiziert. Denn Supermärkte sind Gebäude auf einer Fläche, daher sind diese meistens auch als „way“ eingruppiert. Doch was ist, wenn man in einer Ebene beide Klassen dargestellt haben möchte, um sicher zu gehen, dass man auch alle Supermärkte (die über OSM als POI eingetragen sind) in einer einzelnen Ebene angezeigt bekommt?

Dann verwendet man eine Befehlszeile nach folgendem Beispiel:

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];(node["shop"="supermarket"]({south},{west},{north},{east});way["shop"="supermarket"]({south},{west},{north},{east}););out;(._;>;);out;

In diesem Beispiel wurde erst „node“ und dann „way“ gewählt, nach folgendem Schema: (node;way;);out für node; out für way;

Wir haben am Beispiel der Parkplätze gelernt, dass bei „way“ das „out“ noch durch eine vorangehende Zeichenfolge (._;>;); ergänzt wird. Bei „node“ hingegen endet die Befehlszeile nur mit einem „out“. Daher muss man hier für „way“ und „node“ separate Angaben machen.

Beispiel 5 – Zeige nur Restaurants mit Öffnungszeiten (node)

Möchte man nur Restaurants angezeigt bekommen, deren Öffnungszeiten in den POI’s erfasst sind, kann man folgende Befehlszeile verwenden:

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];node["opening_hours"]["amenity"="restaurant"]({south},{west},{north},{east});out;

Beispiel 6 – Zeige nur Restaurants mit Öffnungszeiten (way)

Möchte man nur Restaurants angezeigt bekommen, deren Öffnungszeiten in den POI’s erfasst sind, kann man folgende Befehlszeile verwenden:

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];way["opening_hours"]["amenity"="restaurant"]({south},{west},{north},{east});(._;>;);out;

Beispiel 7 – Supermärkte + behindertengerechte Toilette (node)

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];node["toilets:wheelchair"="yes"]["shop"="supermarket"]({south},{west},{north},{east});out;

Beispiel 8 – Supermärkte + behindertengerechte Toilette (way)

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];way["toilets:wheelchair"="yes"]["shop"="supermarket"]({south},{west},{north},{east});(._;>;);out;

Beispiel 9 – Supermärkte + behindertengerechte Toilette + Öffnungszeiten (node + way)

Zeige nur Supermärkte mit einer behindertengerechten Toilette sowie solche, die auch Öffnungszeiten angegeben haben; und das für node UND way! Diese Abfrage funktioniert sehr hakelig. Es kommen immer wieder Fehlermeldungen, obwohl die Syntax in Ordnung ist.

http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];(node["opening_hours"]["toilets:wheelchair"="yes"]["shop"="supermarket"]({south},{west},{north},{east});way["opening_hours"]["toilets:wheelchair"="yes"]["shop"="supermarket"]({south},{west},{north},{east}););out;(._;>;);out;

Beispiel 10 – Kirchen in Essen (Overpass-Api)

Hier ist auch sehr schön erläutert, wie man mit Overpass-Api POI’s in der umap-Karte einbinden kann.

https://www.konradlischka.info/2019/01/blog/so-baut-man-eine-immer-aktuelle-karte-ausgewaehlter-daten-vor-ort-aus-der-openstreetmap/

In dieser Anleitung gibt es ggü. meinen Erläuterungen folgende Besonderheiten:

• Es ist erklärt, wie man ein Gebiet ohne Geokoordinaten eingrenzen kann (Angabe von Städten, Gemeinden, Regierungsbezirken, etc.)
• Die Daten für die URL bei „Ausgelagerte Daten“ werden direkt aus Overpass-Api generiert (Export und dann „Rohdaten direkt von Overpass-API“

Es klingt erstmal so, als wäre das einfacher, doch das hat auch seine Fallstricke. Wenn man ein größeres Gebiet über Overpass z.B. nach Parkplätzen abfragt, geht das System schnell in die Knie und kann sogar zum Absturz führen. Die Methode ist also nur geeignet, wenn sich die abgefragte Datenmenge im Rahmen hält.

Meine oben erläuterte Methode, bei der man sich den Link manuell zusammenbaut, hat dieses Problem nicht.

Beispiel 11 – Statische POI’s

Bisher wurden hier dynamische POI’s erläutert, die sich stets von selbst aktualisieren, wenn sich etwas ändert; wenn z.B. neue POI’s hinzugefügt oder POI’s gelöscht oder geändert werden.

Das ganze macht die Seite etwas träge, je mehr Abfragen man in umap macht. Insofern kann es sinnvoll sine, die POI’s „statisch“ zu integrieren, ohne, dass eine Abfrage über einen Server erfolgt.

Wie das funktioniert, ist auf folgender Seite sehr anschaulich beschrieben:

https://wiki.openstreetmap.org/wiki/DE:UMap/overpass

Fazit

Es gibt unendlich viele Kombinationsmöglichkeiten, um genau die POI’s anzeigen zu lassen, die von persönlichem Interesse sind. Die vielen Beispiele sollen dies veranschaulichen und als Grundlage für eigene Kombinationen dienen. Es kann bei komplexeren Codes dazu kommen, dass uMap einen Serverfehler anzeigt; auch dann, wenn die Syntax des Codes völlig in Ordnung ist. Das System scheint schnell zu überlasten, und dann kommt es zu Fehlermeldungen.