Openstreetmap ist ein OpenSource Landkarten System, https://www.openstreetmap.org/
Um diese Landkarten mit Adressemarker in WordPress einzusetzen, kann ich dir ein paar einfache Tipps beschreiben.
- der erste Kartenauschnitt
- Karte mit Marker
- Zoomen und andere Features für die Map
- Map mit Marker aus WordPress Daten
- mit Adressen Customfields innerhalb eines Beitrages
- mit Adressen Customfields aus mehreren Beiträgen mit Plugin w4post List
- mit Adressen Customfields aus mehreren Beiträge mit kleinen Shortcode
- Customfields aus mehreren Beiträge mit eigenem SQL Query
- Zusatzfelder von Plugin wp event Manager für Map mit Marker nutzen.
- Erweitern mit Extensions for Leaflet Map
- Gruppieren
- Zome Home
- Suchen
- eigene Marker Icons
- Icons aufgrund CF oder Categorien auswählen.
Umfangreich setzte ich Openstreetmap Karten auf https://www.offinne.at so werden auf der Österreichkarte die Standorte von über 160 Repaircafes gezeigt,
beim Eintrag von einem Repaircafe ist nochmal eine Kartenauschnitt mit Marker diese Repaircafes, und weiters gibt es noch Netzwerk Karten, wo Kategorisierte Repaircafes von Netzwerkgruppierungen angezeigt werden.
Möchte man auf einer Karte einen oder ein paar Marker händisch setzen kann sich einfach mit dem Plugin Leaflet Map schon erste Ergebnisse zusammenstellen.
Grundlagen Openstreetmap mit Leaflet für WordPress Landkarte
der erste Kartenausschnitt
Nach Aktivierung des Plugin Leaflet Map baust du in einer Seite oder Beitrag den Shortcode ein:
[leaflet-map zoom="16" address="Pöstlingberg, Linz, Österreich"]
oder du gibt die Koordinaten ein
[leaflet-map lat=48.324192826849625 lng=14.257990121841432 zoom=16]
und erhälst den selben Ausschnitt
mit dem Parameter zoom=16 (1-19) kannst du die Größe des Kartenausschnitt festlegen.
Karte mit Marker
[leaflet-map fitbounds max-zoom=18]
[leaflet-marker lat=48.324192826849625 lng=14.257990121841432 ]
oder
[leaflet-map lat=48.324192826849625 lng=14.257990121841432 zoom=16]
[leaflet-marker]
Hinweis: um mit leaflet-map den Kartenauschnitt festzulegen, ist es wichtig entwender adress oder lat lng und ideal zoom zu verwenden oder fitbounds und max-zoom
auch wenn in den Einstellungen von leaflat map diese werte als Vorgabe eingetragen werden kann, ist die Empfehlung beim Shortcode direkt zu verwenden. damit sie für diese Karte auch fix definiert sind.
mit dem Shortcode leaflet-marker setzt du per Koordination lat und lng oder mit address
[leaflet-map fitbounds max-zoom=18]
[leaflet-marker address="Pöstlingberg, Linz, Österreich"]Pöstlingberg[/leaflet-marker]
der Texteintrag erscheint wenn du mit der Maus über den Marker fährst,
durch HTML Code für Link erhälst du beim Marker einen Link zu gewünschter URL.
oder mehrere Marker setzten,
[leaflet-map zoom="11" fitbounds max-zoom=18]
[leaflet-marker address="Pöstlingberg, Linz, Österreich"]Pöstlingberg[/leaflet-marker]
[leaflet-marker address="Bahnhofplatz, 4030, Linz, Österreich"]<a href="https://www.linz.at">Bahnhof Linz</a>[/leaflet-marker]
Zome und andere Features
[leaflet-map fitbounds ]
mit dem Parameter fitbounds wird die Karte an die Grenzen aller Markierungen auf der Karte angepasst
Frage: sieht man beim Setzten nur eines Marker nur grau Fläche, ist die Zoomauschnitt zu klein, erweitere leaflet-map zb mit max_zoom=“15″
Frage: ist die Fläche Grau oder Blau (undefiniert) kann auch sein, daß die Koordinaten bzw Adresse nicht gefunden wird, und je nach Leaflet Einstellung, kann dann der Marker am 0 Meridian oder sonstwo sein. um das rauszufinden nutze den nächsten Parameter zoomcontrol um den Marker irgendwo am Erdball zu entdecken.
Tipp: Falls die address Parameter nicht den Richtigen Punkt anzeigt, kontrolliere im Suchfeld auf https://www.Openstreetmap.org die Schreibweise, von Ort, Strasse, Hausnummer, Region usw, zb: Sankt Wolfgang statt St. Wolfgang, Aschach an der Steyr statt Aschach / Steyr, Ergänzen durch Postleitzahl, Region, Land usw, Stadtplatz 15 statt Stadtplatz 15/a/3 usw..
der Parameter zoomcontrol ermöglich den Anwender mit + und – in der Karte selbst zu Zoomen,
[leaflet-map fitbounds max_zoom="15" zoomcontrol ]
mit dem Shortcode fullscreen hat der Anwender die Möglichkeite die Karte über seinen kompletten Bildschirm anzuzeigen und wieder zu schließen
Wenn du Leaflet Map Plugin installiert hast, findest du im Adminbereich – Leaflet Map -> Einstellungen und Shortcode Hilfe, da kannst du noch viele Parameter kennenlernen.
Extension für Leaflet Map
zusatzlich zu den Shortcodes von Leaflet Map Plugin bietet das Plugin Extension für Leaflet Map weitere Shortcodes, mit dem Landkarten speziell um viele Markter auf einer Karte anzuzeigen oder Suchfunktion usw einzubinden.
[fullscreen]
[zoomhomemap]
[cluster]
[leaflet-search]
und weitere
WordPress Daten für Markersammlung auf Landkarten nutzen.
ideal werden Daten mit den Standard WordPress Funktionen in den WordPress Tabellen gespeichert, mittels Custom Post und Custom Fields und Taxonomien können so umfangreiche Datensammlungen abgebildet werden. Adressen werden zB: bei Terminkalender gespeichert, oder von diversen Plugin. Dabei werden idealer weise für die Daten Custom Fields oder Terms von Taxonomien genutzt. durch Coden kann ein guter Programmierer auf diese Felder der Datenbank zugreifen. Für Anwender ohne Programmierkenntnisse gibt es Plugin die dabei auch helfen. Eines davon ist das Plugin W3post List, mit dem es möglich ist die Daten der Standard Tabellen wie Post, Taxonomies, User einfach mit Shortcode als Listen auf beliebigen Seiten und in Beiträgen anzuzeigen.
Wo speichert man ideal die Daten (Adresse) für die Landkarten Marker
Felder wie Adresse, Postleitzahl, Ort, Region, Land werden bei WordPress ideal in Custom Fields gespeichert, diese Felder stehen bei jeden Beitrag oder Seite immer zur Verfügung und man braucht nur einen Namen angeben und einen Inhalt eintragen. damit ist solch Feld automatisch diesen Beitrag oder dieser Seite zugeordnet.
Durch Plugins wie ACF und ähnliche können Anwenderfreundliche Eingabefelder und auch die Ausgabe in den Posts definiert werden.
FW Map Marker ein Test Plugin für Adressendatenbank und Landkarten
zum Testen (nicht für Produktionsbetrieb) und als Beispiel für Entwickler und Anwender ist die erste Version dieses Plugin FW Map Marker verfügbar.
Im Admin Menü ist der Menüpunkt Adresse zu finden, beim Anlegen einer Adresse wird eine Metabox mit Felder für Adresse bereitgestellt.
die Datenfelder Land, Ort, Postleitzahl und Strasse sind die Basis für die Landkarte beim Beitrag Adresse,
Download des Plugin fwmapmarker.zip
Gemeinsam mit dem Plugin Leaflet Map und Extension für Leaflet Map können Landkarten mit Marker genutzt werden.
um die Landkarte mit allen Adressemarker gemeinsam zu nutzen, ist das Plugin W4 Post List notwendig.
Wir arbeiten auch einem Plugin, mit dem Benutzergeführt dann auch Wunscheinstellungen und Landkarten erstellt werden können. Wünsche und Ideen bitte an franz@wieser.at
Landkarte mit Marker mit Daten aus den WordPress Tabellen füllen mit Plugin W4Post List
Wenn durch Beiträge, Seiten, Custom Post Daten erfasst sind und bei diesen Post und Custom Fields die Adresse je Beitrag eingetragen ist, dann ist es mit dem Plugin W4Post List sehr einfach auf diese Post und die dazugehörigen Custom Fields zuzugreifen und diese als Liste an gewünschter Stelle zb in einer Seite auszugeben.
Diese Funktion nutze ich auch, um die Shortcodes für Leaflet Map und Leaflet Maker zu erzeugen.
Zuerst muss man wissen wie der Post-Type heißt (Beiträge – post, Seiten – page, Terminkalender zb event oder ähnlich)
dann muss man die Feldbezeichnungen der Custom Fields suchen: zb ort, strasse, plz, land oder ähnlich.
beim Plugin W4post list wählt man den Post Type aus
bei Verwendung des Plugin fw Map Marker den Posttype Adressen auswählen.
bei Filter Post:Meta Query kann man auswählen nach welchen Filter Datensätze (Posts) verwendet werden, zb ort != “ -> nur wenn das Feld Ort nicht leer ist
weitere Filter könnte man Beiträge bestimmter Kategorie auswählen.
unter Template kann man diese Beispielcode verwenden und im Shortcode post_meta den Parameter key mit der Bezeichnung des eigenen Custom Field befüllen.
[leaflet-map fitbounds zoom=14 address="Linz,4030,Österreich" scrollwheel !detect-retina show_scale height="400"]
[fullscreen]
[posts]
[leaflet-marker address="[post_meta key="strasse" multiple="0"],[post_meta key="ort" multiple="0"] ,[post_meta key="plz" multiple="0"],Österreich"][post_title][/leaflet-marker]
[/posts]
[leaflet-search propertyname=popupContent hideMarkerOnCollapse zoom=10 textPlaceholder="Bezeichnung eingeben"]
[cluster]
[hover]
[zoomhomemap]
sollte die Landkarte nicht angezeigt werden, und man sieht obige leaflet shortcodes in der Ausgabe, braucht man diese Code entweder als Plugin oder unter der function.php des Themas. Durch das Plugin FW Map Marker ist diese Content Filter bereits aktiv.
add_filter( 'the_content', 'fwcontent_filter', 20 );
function fwcontent_filter( $content ) {
$content=do_shortcode($content);
return $content;
}
Das Ergebnis könnte dann so sein:
Landkarte mit Marker füllen mit SQL Query für eigenes Plugin und nutzen der Leaflet Map Shortcodes.
Lizenzhinweis
(CC) Creative Commons – Franz Wieser www.wieser.at 2023
Verwendung für Privaten Nutzung und freie (kosten- und werbefreie) Weiterverwendung erlaubt,
Abänderungen nur in Vereinbarung mit Franz Wieser
Hinweis auf meine WordPress Aktivitäten https://www.wieser.at/wordpress oder https://www.otelolinz.at/wordpress würden mich freuen.
