Standorte und Inhalte mit interaktiven WordPress-Karten verbinden
Standorte sollen in WordPress gemeinsam mit Beschreibungen, Bildern und weiterführenden Beiträgen gepflegt werden. Zwei individuelle Gutenberg-Blöcke stellen diese Inhalte auf interaktiven Karten dar und führen ihre Kartenpunkte automatisch in einer Gesamtübersicht zusammen.
Magazinbeiträge über bestimmte Orte lassen sich zusätzlich auf einer interaktiven Karte darstellen. Jeder Kartenpunkt verbindet die geografische Position mit einer kurzen Vorschau und einem Link zum vollständigen Beitrag. Dafür pflegt die Redaktion Koordinaten, Überschrift, Beschreibung, Bild und Beitragsverknüpfung gemeinsam.
Für diese Aufgabe haben wir das WordPress-Plugin «UD Block: Muotamap» entwickelt. Es stellt einen Block für einzelne Karten mit mehreren redaktionell gepflegten Punkten und einen zweiten Block für die automatisch zusammengestellte Gesamtübersicht bereit. Leaflet bildet die technische Kartengrundlage; die Kartendarstellung kombiniert einen eigenen Mapbox-Stil mit Daten von OpenStreetMap.
Kartenpunkte direkt im Gutenberg-Editor pflegen
Redakteurinnen und Redakteure fügen die Kartenpunkte direkt innerhalb der Karte hinzu. Für jeden Marker öffnet sich eine Eingabemaske. Die Position wird auf der Karte gesetzt und kann durch Verschieben des Markers angepasst werden.
Für jeden Kartenpunkt erfasst die Redaktion Überschrift, Beschreibung und Bild. Optional verknüpft sie ihn mit einem vorhandenen Magazinbeitrag. Der Block speichert alle Angaben zusammen mit Längen- und Breitengrad in strukturierten Attributen.
Kartenpunkte mit Magazinbeiträgen verbinden
Die Redaktion kann einen Marker mit einem veröffentlichten WordPress-Beitrag verknüpfen. Beim Öffnen zeigt die Infokarte Titel, Text und Bild des Ortes sowie einen Link zum vollständigen Beitrag.
Damit wird die Karte zu einer räumlichen Navigation durch redaktionelle Inhalte. Die Kartenpunkte bleiben kompakt, während jeder verknüpfte Beitrag Raum für umfangreichere Texte, Bilder und ergänzende Informationen bietet.
Alle gepflegten Marker automatisch zusammenführen
Der Block «Collection Map» zeigt Kartenpunkte aus mehreren Beiträgen, Seiten und Projekten auf einer gemeinsamen Karte. Ein eigener REST-Endpunkt durchsucht die veröffentlichten Inhalte nach Einzelkarten. Die gefundenen Marker werden zusammen mit ihren Inhaltsdaten und dem Link zum jeweiligen Inhalt an die Sammlungskarte übergeben.
Die Gesamtkarte entsteht dadurch aus den Kartenpunkten, die in einzelnen Inhalten gepflegt werden. Neue Punkte erscheinen automatisch in der Übersicht. In den Block-Einstellungen entscheidet die Redaktion, welche Marker die jeweilige Sammlung zeigt.
Marker-Clustering fasst nahe beieinanderliegende Punkte zu Gruppen zusammen. Beim Hineinzoomen werden die einzelnen Orte sichtbar. Die Karte passt ihren Ausschnitt automatisch an die dargestellten Marker an.
Vom Kartenpunkt zum aktuellen Standort navigieren
Die Infokarte bietet zwei Funktionen zur Orientierung. Eine Schaltfläche zentriert die Karte auf den ausgewählten Marker. Die zweite berechnet eine Route vom aktuellen Standort zum ausgewählten Kartenpunkt. Dafür nutzt das Plugin Leaflet Routing Machine und einen Routingdienst.
Nach der Standortfreigabe ermittelt die Browser-Geolocation die aktuelle Position. Während der Navigation aktualisieren neue Positionsdaten den Ausgangspunkt der Route. Die Karte ergänzt die redaktionellen Informationen damit um eine Route zum ausgewählten Ort.
Individuelle Gestaltung auf einer bewährten Kartenbasis
Leaflet übernimmt Kartensteuerung, Marker und Kartenausschnitt. Ein projektspezifischer Kartenstil, eigene Marker-Symbole und eine gestaltete Infokarte geben der Anwendung ihren eigenständigen visuellen Charakter. Auf kleineren Bildschirmen passt sich die Kartenansicht an die verfügbare Fläche an.
Das Plugin lädt die benötigten Frontend-Skripte auf den Seiten, die einen der beiden Kartenblöcke enthalten. Beide Komponenten sind als Gutenberg-Blöcke registriert und stehen dadurch im vertrauten WordPress-Editor zur Verfügung. So verbindet das Plugin individuelle Kartenfunktionen mit einer strukturierten redaktionellen Pflege.
Ergebnis
Standorte und Inhalte gemeinsam darstellen
Zwei Gutenberg-Blöcke verbinden redaktionell gepflegte Kartenpunkte mit Beiträgen, Seiten und Projekten. Einzelkarten stellen die Orte im jeweiligen Inhalt dar, während eine Sammlungskarte sie automatisch in einer gemeinsamen Übersicht zusammenführt.
Kartenpunkte pflegen
Die Redaktion erfasst Position, Überschrift, Beschreibung und Bild direkt im Gutenberg-Editor. Jeder Punkt lässt sich mit einem weiterführenden Inhalt verknüpfen.
Übersichten erstellen
Die Sammlungskarte übernimmt Punkte aus Beiträgen, Seiten und Projekten. Sichtbarkeit, Kartenausschnitt und Marker-Clustering strukturieren die gemeinsame Übersicht.
Routen zum Standort anzeigen
Infokarten zeigen Bilder, Beschreibungen und weiterführende Links zum jeweiligen Ort. Standortbestimmung und Routenplanung führen zum ausgewählten Kartenpunkt.