Kartenausschnitte aus Openstreetmap in Wordpress: welche Möglichkeiten gibt es hier?

Gast 61846 · 16. Februar 2018

Hallo und guten Tag Community,

kann ich denn in eine WP-Seite eine Overpass API einbauen und nach einer bestimmten Kartenausschnitt oder Ort suchen, der mir dann angezeigt wird?

Ziel-Ideen: Es sollte so sein, dass ich die Abfrage nach einer Relation und den weiteren Code ändern kann?

Mögliche Wege: Hier ein paar Ansätze, welche ich gefunden habe:

- Openlayer-Ansätze;
- ggf. gibt es aber auch weitere Möglichkeiten als etwa OpenLayers, oder Kartenbibliotheken wie etwa Leaflet (http://leafletjs.com/examples.html )

Frage: Hat Wordpress ggf. vielleicht auch ein Plugin für die Overpass-API, nämlich etwa so eines wie unten beschrieben:
- leaflet-overpass-layer: siehe hier https://github.com/GuillaumeAmat/leaflet-overpass-layer
- Das Ergebnis hierbei sieht dann in Etwa aus: http://kartenkarsten.github.io/leaflet-layer-overpass/demo/

Freue mich auf einen Tipp

r23 · 16. Februar 2018

Zitat von lin: ↑

kann ich denn in eine WP-Seite eine Overpass API einbauen und nach einer bestimmten Kartenausschnitt oder Ort suchen, der mir dann angezeigt wird?

Ziel-Ideen: Es sollte so sein, dass ich die Abfrage nach einer Relation und den weiteren Code ändern kann?
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Ich lese dir mal die Wiki über die API vor:

Beispielsweise könnte Eltern von Kleinkindern nach allen Spielplätzen in Wuppertal oder eine Feuerwehr nach allen Hydranten im Ort suchen. Genauer kann man nach Allem suchen, was man als Mapper bei OSM an Informationen hochladen kann, wie Keys, Tags, Objekttypen und dabei mehrere kombinieren. Dabei wurde Wert darauf gelegt, dass die Abfragen ähnlich aussehen, wie die beim Editieren eingetragenen Keys und Tags. Beispielsweise enthält die Abfrage nach Spielplätzen das dem Mapper bekannte "leisure=playground". Darüber hinaus lassen sich beispielsweise auch Umkreissuchen durchführen.

Zitat von lin: ↑

Mögliche Wege: Hier ein paar Ansätze, welche ich gefunden habe:

- Openlayer-Ansätze;
- ggf. gibt es aber auch weitere Möglichkeiten als etwa OpenLayers, oder Kartenbibliotheken wie etwa Leaflet (http://leafletjs.com/examples.html )

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

puh ... mal eben eine Einführung

OpenLayers ist eine JavaScript-Bibliothek, die es ermöglicht Geodaten im Webbrowser anzuzeigen. Bei OpenLayers handelt es sich um eine Programmierschnittstelle, die eine clientseitige Entwicklung unabhängig vom Server zulässt. Für die Verwendung von OpenLayer habe ich mir Bücher gekauft und selnst Schulungen besucht ...

Roland, der Entwickler der Overpass API stellt eine Anleitung für Open Layer zur Verfügung

http://overpass-api.de/open_layers_mashup.html

Open Layer wird hier nur ein Beispiel verwendet - du kannst selbstverständlich auch leafletjs verwenden.

Zitat von lin: ↑

Frage:
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Zitat von lin: ↑

Hat Wordpress ggf. vielleicht auch ein Plugin für die Overpass-API, nämlich etwa so eines wie unten beschrieben:
- leaflet-overpass-layer: siehe hier https://github.com/GuillaumeAmat/leaflet-overpass-layer
- Das Ergebnis hierbei sieht dann in Etwa aus: http://kartenkarsten.github.io/leaflet-layer-overpass/demo/
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Aus der HTML Vorlage erstellst du einfach eine WordPress Seite

Für der HTML Seite fügst du im Header einfach folgende Zeilen

PHP:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
ein ...

Bei Kartenkarsten dann hier=>

https://github.com/kartenkarsten/leaflet-layer-overpass/blob/master/demo/multi_layer_example.html

Wofür benötigst du ein Plugin?

oder speichere die HTML Seite deiner Karte und bindest diese per Iframe ein.

Eine relativ einfach Lösung für die erstellung der Abfrage - die vermutlich auch Personen ohne Kenntnisse von Geodaten bedienen können - ist vermutlich overpass-turbo

// Karte unterstützt durch Leaflet

der Editor ist etwas komplizierter

// Editor unterstützt durch CodeMirror
Weitere Bibliotheken: osmtogeojson, togpx, tokml, lodash, jQuery, jQuery UI, html2canvas, canvg, leaflet-locationfilter, leaflet.PolylineOffset, maki, SJJB map icons, Osmic, FileSaver.js, MapBBCode, Moment.js, polylabel, osm-auth

http://overpass-turbo.eu/

selbstverständlich kannst du mit html2canvas und leaflet-locationfilter, leaflet.PolylineOffset dir eben ein Plugin erstellen. Etwas JavaScript sollte man dann allerdings können...

Photoweblog · 17. Februar 2018

Zitat von r23: ↑

...
Roland, der Entwickler der Overpass API stellt eine Anleitung für Open Layer zur Verfügung
http://overpass-api.de/open_layers_mashup.html
...
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Diese Beispiele basieren alle auf OpenLayers 2.11, ggfs auf alle Fälle vorher auf OpenLayers 4.x wechseln.

LG, MiKa
---------------------------------------
http://wp-osm-plugin.HanBlog.Net

r23 · 17. Februar 2018

Zitat von lin: ↑

kann ich denn in eine WP-Seite eine Overpass API einbauen und nach einer bestimmten Kartenausschnitt oder Ort suchen, der mir dann angezeigt wird?

Frage: [/B]Hat Wordpress ggf. vielleicht auch ein Plugin für die Overpass-API, nämlich etwa so eines wie unten beschrieben:
- leaflet-overpass-layer: siehe hier https://github.com/GuillaumeAmat/leaflet-overpass-layer
- Das Ergebnis hierbei sieht dann in Etwa aus: http://kartenkarsten.github.io/leaflet-layer-overpass/demo/
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

du könntest auch eben die notwendigen Änderungen in ein leaflet - WordPress Plugin einbauen.

https://github.com/r23/wp-plugin-leaflet-map/tree/master/shortcodes

Da mich das Thema auch interessiert habe ich mal einen Fork auf github gestatet.

in den nächsten Tagen fliegen dort die "unnötigen" Kartenanbieter raus... und die externen Quellen werden aus datenschutzrechtlichen Gründen gelöscht.

Gast 61846 · 18. Februar 2018

hallo Photoweblog u. r23,

vielen Dank für die schnellen Antworten u. die Tipps u. Hinweise.

Danke für die Hinweise u. Tipps; Rolands Overpass-API u. Martin Reisers Overpass-Turbo.eu kenne ich auch.

Danke @r23 für die Hinweise auf Möglichkeiten:

Hmm - Man koennte ja auch via overpass turbo sich die entsprechende Abfrage durchführen, dann schliesslich als Overpass API-Call-Url exportieren und vllt. noch in die Variable data_url eintragen.Dann brächte man halt noch ein Styling - kenn mich aber bei den OpenLayers ned so gut aus.

Was ich eigentlich suche -- für https://wordpress.org/plugins/wp-job-manager/

WP Job Manager Geolocation add-on provides Geolocation features to the free plugin WP Job Manager

der Link: https://geomywp.com/extensions/wp-job-manager-geolocation/

die Features;

Results on Google Map
When displaying search results you can choose to also display Google map with markers representing each job’s location in the list results. The map will be displayed above the list of results.

Proximity ( radius based ) Search Query
Enter a default radius value to search within or let the users choose by creating a dropdown select box with multiple radius values.

Distance Units
Enter default value for Miles or Kilometers or let the user choose using a dropdown select box.

Sort Results by Distance
When searching for jobs by location you can choose to order the list of results by distance. This way users can see which job is the nearest to their location.

Sort-by Dropdown Menu
Geo Job Manager add-on enhance the “order by” functionality as well and now let you create a dropdown select box and let the users change the order of the results. You can easily create a dropdown select box with any of the values: Distance, Title, Featured and date to be sorted by.

Locator Button
Add a button that will automatically get the user’s current location and submit the search form based on that.

Display Distance to Each job
Add the “real” distance from the address entered to each job’s location in the results. The distance value will be added next to the location in the list of results.

Google Address Autocomplete
Add Google’s address autocomplete to the location field of the new/edit post screen in the admin, new/edit job form in the front end and to the location field of the jobs search form. Google address autocomplete will display suggested results while the user is typing an address.

Marker Clusterer
Group map markers together when locations are near each other.

Single job Google Map
Display map showing job’s location when viewing single job page.

Jobs Mashup Map Shortcode
Display map showing all jobs location or set the maximum number of jobs that will be display. Using a shortcode you can display the map anywhere in a page/post content or in a template file ( see bottom of this page for shortcode usage).
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

nun - ich bin eher ein Freund von OpenStreetmap-Lösungen als einer, der auf Google-Map-API setzt.
Deshalb kam ich auf die OSM-Ideen

VG Lin

r23 · 18. Februar 2018

Zitat von lin: ↑

Danke fÃ¼r die Hinweise u. Tipps; Rolands Overpass-API u. Martin Reisers Overpass-Turbo.eu kenne ich auch.

Hmm - Man koennte ja auch via overpass turbo sich die entsprechende Abfrage durchfÃ¼hren, dann schliesslich als Overpass API-Call-Url exportieren und vllt. noch in die Variable data_url eintragen.Dann brÃ¤chte man halt noch ein Styling - kenn mich aber bei den OpenLayers ned so gut aus.

....

nun - ich bin eher ein Freund von OpenStreetmap-LÃ¶sungen als einer, der auf Google-Map-API setzt.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

du kennst Overpass-API und Overpass-Turbo - hast aber augenscheinlich leider noch immer nicht verstanden, welche Geo-Daten angezeigt werden.

Ich lese noch einem vor:

Beispielsweise kÃ¶nnen Eltern von Kleinkindern nach allen SpielplÃ¤tzen in Wuppertal oder eine Feuerwehr nach allen Hydranten im Ort suchen. Genauer kann man nach Allem suchen, was man als Mapper bei OSM an Informationen hochladen kann, wie Keys, Tags, Objekttypen und dabei mehrere kombinieren.

B L I N K - man kann nach Allem suchen, was man als Mapper bei OSM (openstreetmap) an Informationen hochladen kann B L I N K

OSM (openstreetmap) nicht Google Map.

Mit Overpass kannst du keine Hydranten im Ort auf Google Map suchen - weil Google Map diese Daten nicht hat.

Zitat von lin: ↑

Was ich eigentlich suche -- fÃ¼r https://wordpress.org/plugins/wp-job-manager/

WP Job Manager Geolocation add-on provides Geolocation features to the free plugin WP Job Manager

der Link: https://geomywp.com/extensions/wp-job-manager-geolocation/
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Ist doch schÃ¶n gÃ¼nstig! Mein Wordpress Plugin fÃ¼r die Umkreissuche ist erheblich teuerer.

Mit meinem Fork https://github.com/r23/r23-map kannst du zum Beispiel GEOJSON Daten darstellen.

Beispiel:
Der Datensatz enthÃ¤lt die Namen und Anschriften der DÃ¼sseldorfer Museen.

Die Datei Â„DÃ¼sseldorfer MuseenÂ“ enthÃ¤lt folgende Spalteninformationen:
Name: Name des Museums StraÃŸe: Standort des Museums Postleitzahl: Postleitzahl des Standortes Art: Art des Museums

https://opendata.duesseldorf.de/sites/default/files/D%C3%BCsseldorfer%20Museen.geojson

Mein Map Plugin kann stelbstverstÃ¤ndlich auch ein PHP-Script aufrufen und die Antwort im GEOJSON Format darstellen.

Photoweblog · 24. Februar 2018

Zitat von r23: ↑

Ist doch schÃ¶n gÃ¼nstig! Mein Wordpress Plugin fÃ¼r die Umkreissuche ist erheblich teuerer.

Mit meinem Fork https://github.com/r23/r23-map kannst du zum Beispiel GEOJSON Daten darstellen.

Beispiel:
Der Datensatz enthÃ¤lt die Namen und Anschriften der DÃ¼sseldorfer Museen.

Die Datei Â„DÃ¼sseldorfer MuseenÂ“ enthÃ¤lt folgende Spalteninformationen:
Name: Name des Museums StraÃŸe: Standort des Museums Postleitzahl: Postleitzahl des Standortes Art: Art des Museums

https://opendata.duesseldorf.de/sites/default/files/D%C3%BCsseldorfer%20Museen.geojson

Mein Map Plugin kann stelbstverstÃ¤ndlich auch ein PHP-Script aufrufen und die Antwort im GEOJSON Format darstellen.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Sehr cool! Gibt's einen Link wo man sich das "im Betrieb" ansehen kann, also das Plugin mit dem Overpass API und der dargestellten Karte?

Gast 61846 · 25. Februar 2018

moin r23 und Photoweblog

vielen Dank für die weiteren Beiträge:

@r23: hmm - vllt. hab ich oben nicht deutlich machen koennen dass ich mir durchaus eine Lsg in OSM-Technologie vorstellen kann - m.a.w. dass ich nicht unbedingt auf die proprietäre Google-Map-Lösung setzen würde.

Was ich eigentlich suche -- für https://wordpress.org/plugins/wp-job-manager/
WP Job Manager Geolocation add-on provides Geolocation features to the free plugin WP Job Manager

DER LINK ZUR WP PROPIETÄR LOESUNG https://geomywp.com/extensions/wp-job-manager-geolocation/

Also nochmals: ich kenne Overpass-API und Overpass-Turbo - und bis jetzt dachte ich schon dass ich verstanden habe, welche Geo-Daten angezeigt werden.

- die von Mappern eingetragenen Daten. Anders ausgedrückt:
- was nicht gemappt wurde ist m.a.w. nicht zu finden.

Ich finde wie Photoweblog deine Ansätze auch sehr interessant -

Sehr cool! Gibt's einen Link wo man sich das "im Betrieb" ansehen kann, also das Plugin mit dem Overpass API und der dargestellten Karte?
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Vielen Dank bis hierher für die Erläuterungen, Tipps, Hinweise u. Links.

Das ist alles sehr sehr vielversprechend

Photoweblog · 6. März 2018

Hallo Lin,

hier die Variante per OpenLayers:

https://openlayers.org/en/latest/examples/vector-osm.html

Du kannst Dich gerne auch direkt bei mir melden wenn Du Schwierigkeiten beim Einbinden hast:

http://wp-osm-plugin.hanblog.net/

Br, MiKa

WPDE.org

Kartenausschnitte aus Openstreetmap in Wordpress: welche Möglichkeiten gibt es hier?

Gast 61846 Gast

r23 Well-Known Member

Photoweblog Well-Known Member

r23 Well-Known Member

Gast 61846 Gast

r23 Well-Known Member

Photoweblog Well-Known Member

Gast 61846 Gast

Photoweblog Well-Known Member

Nützliche Suchen

Kartenausschnitte aus Openstreetmap in Wordpress: welche Möglichkeiten gibt es hier?

Gast 61846 Gast

r23 Well-Known Member

Photoweblog Well-Known Member

r23 Well-Known Member

Gast 61846 Gast

r23 Well-Known Member

Photoweblog Well-Known Member

Gast 61846 Gast

Photoweblog Well-Known Member