MAP Marker

Leaflet-Openstreetmap

OpenStreetmap

Open Streetmap ist ein OpenSource Landkarte,  https://www.openstreetmap.org/

Um diese Landkarte mit Adressemarkern 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  ein, so werden auf der Österreichkarte die Standorte von über 160 Repaircafes gezeigt,

beim Eintrag eines Repaircafes ist nochmal eine Kartenauschnitt mit Marker dieses 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 manuell setzen, kann man sich einfach mit dem Plugin Leaflet Map schon erste Ergebnisse zusammenstellen.

Grundlagen Openstreetmap mit Leaflet für WordPress Landkarte

der erste Kartenausschnitt

Nach der Aktivierung des Plugins Leaflet Map baust du in einer Seite oder in einem 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]

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 zur gewünschten 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]

Zoom 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 eine graue Fläche, ist der Zoomauschnitt zu klein, erweitere daher leaflet-map zB. mit max_zoom=”15″

Frage: ist die Fläche Grau oder Blau (undefiniert) kann auch sein, daß die Koordinaten bzw. die Adresse nicht gefunden wird, und je nach Leaflet Einstellung, kann dann der Marker am 0 Meridian oder sonstwo sein. um das herauszufinden nutze den nächsten Parameter zoomcontrol um den Marker irgendwo am Erdball zu entdecken.

Tipp: Falls der 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 denen Landkarten speziell um mehrere Marker 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 W4post List, mit dem es möglich ist die Daten der Standard Tabellen wie Post, Taxonomies und 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 jedem Beitrag oder jeder Seite immer zur Verfügung und man braucht nur einen Namen angeben und einen Inhalt eintragen, damit ist solch Feld automatisch diesem 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 Adressemarkern gemeinsam zu nutzen, ist das Plugin W4 Post List notwendig.

Wir arbeiten auch an 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 Markern von Daten aus den WordPress Tabellen mit Plugin W4Post List füllen

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 diesen Code entweder als Plugin oder unter der function.php des Themas. Durch das Plugin FW Map Marker ist dieser 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.