Diese Seite verwendet ein WordPress-Plugin zur Kombination der Javascript-Bibliotheken „Fotorama“ und „GPX-Viewer„. Die Seite mit der Übersichtskarte verwendet ein WordPress-Plugin das direkt Leaflet einsetzt.

WordPress-Plugin mit Fotorama und GPX-Viewer

Vorgeschichte: WP-GPX-Maps

Zur Anzeige von GPX-Tracks in einer Karte wurde zu Beginn des hervorragende, kostenfreie Plugin „WP-GPX-Maps“ benutzt (https://de.wordpress.org/plugins/wp-gpx-maps/). Die zahlreichen Einstellungen des Plugins benötige ich aber nicht. Zudem bietet das Plugin eine Funktionalität nicht: Die Karte mit dem GPX-Track soll direkt unter der Bildergalerie angezeigt werden und sich mit der Bildergalerie mit bewegen.

Demo-Bild WP-GPX-Maps
Wordpress plugin  WP-GPX-Maps
Screenshot WP-GPX-Map Plugin

Plugin Entwicklung mit Fotorama und GPX-Viewer

Das selbst geschriebene Plugin vereint die beiden Open-Source-Projekte „Fotorama“ und „GPX Viewer“ zu einem WordPress-Plugin. Beide liegen als Javascript-Bibliotheken vor, die frei heruntergeladen werden können.

Quellen

Der GPX Viewer von J. Berkemeier kann hier bezogen werden: https://www.j-berkemeier.de/GPXViewer/. Fotorama kann hier bezogen werden: https://fotorama.io/. Fotorama liegt bereits als WordPress-Plugin vor, mit dem alle Parameter gesetzt werden können, siehe: https://themesinfo.com/wordpress-plugins/free-wordpress-fotorama-plugin-dx.

Hintergrund

Der Wunsch war eine Bildergalerie zu erzeugen unter der sich eine Karte befindet. Die Bilder der Galerie sollen mit ihrer Geo-Position angezeigt werden. Für das aktive Bild soll die Karte mit bewegt werden und mit jedem Bild „weiter wandern“.

Zudem sollte die lizenzierte Bildergalerie „Gmedia Photo Gallery“ zu ersetzen werden. Diese ist in der Bedienung ziemlich umständlich und bezüglich Support und Updates stets etwas hinterher. Bei einigen Updates wurde in der Vergangenheit die ganze Website zerstört. Support-Anfragen werden meistens gar nicht beantwortet. Auch ist beim Kauf Vorsicht geboten, da die möglichen Galerie-Module gesondert zu bezahlen sind. Darüber hinaus setzt das Modul zur Geo-Lokalisierung nur Google-Maps ein. Das ist bezüglich Kosten und Datenschutz grenzwertig.

Lösung

Das neue „Fotorama-GPXViewer-Plugin“ zeigt nun die responsive Bildergalerie Fotorama als jQuery-Slider mit Thumbnails an. Direkt unterhalb wird eine Leaflet-Karte angefügt, auf der die Orte der Bilder aus der Galerie angezeigt werden. Die Leaflet-Karte wandert parallel zum angezeigten Bild mit. Zusätzlich kann auch noch ein zugehöriger GPX-Track angezeigt werden. Die Leaflet-Karte wird mit der Javascript Bibliothek GPX-Viewer eingebunden und erzeugt.

Die Bilder und GPX-Tracks werden direkt aus einem Verzeichnis verwendet und nicht aus der WordPress-Medien-Bibliothek. Diese ist -meiner Meinung und Erfahrung nach- für die hier verwendete Bildmenge nicht geeignet.

Live-Demo des Plugins auf dieser Webseite

Siehe zum Beispiel hier.

oder hier, das Plugin direkt eingebunden:

Galerie-Bild 1 von 56: Port de Soller seen from the GR221. GR221: Stage from Deia to Port de SollerGalerie-Bild 2 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Deia nach Port de SollerGalerie-Bild 3 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Deia nach Port de SollerGalerie-Bild 4 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Deia nach Port de SollerGalerie-Bild 5 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Deia nach Port de SollerGalerie-Bild 6 von 56: Finca with Puig Major in the background. GR221: Stage from Deia to Port de SollerGalerie-Bild 7 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Deia nach Port de SollerGalerie-Bild 8 von 56: Llucalcari seen from the GR221. GR221: Stage from Deia to Port de SollerGalerie-Bild 9 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Deia nach Port de SollerGalerie-Bild 10 von 56: GR221: Ruta de Pedra en Sec, Mallorca. along the sea shoreGalerie-Bild 11 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Deia nach Port de SollerGalerie-Bild 12 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 13 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 14 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 15 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 16 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 17 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 18 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 19 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 20 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 21 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 22 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 23 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 24 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 25 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Valldemossa nach DeiaGalerie-Bild 26 von 56: Lighthouse in Port de Soller. during a heavy spring stormGalerie-Bild 27 von 56: Oranges and Spring flowers in Mallorca. GR221: Stage from Soller to CuberGalerie-Bild 28 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 29 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 30 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 31 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 32 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 33 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 34 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 35 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 36 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 37 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe von Soller nach Cuber (Stausee)Galerie-Bild 38 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Kloster Lluc nach PollencaGalerie-Bild 39 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Kloster Lluc nach PollencaGalerie-Bild 40 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Kloster Lluc nach PollencaGalerie-Bild 41 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Kloster Lluc nach PollencaGalerie-Bild 42 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Kloster Lluc nach PollencaGalerie-Bild 43 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Kloster Lluc nach PollencaGalerie-Bild 44 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Kloster Lluc nach PollencaGalerie-Bild 45 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 46 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 47 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 48 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 49 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 50 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 51 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 52 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 53 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 54 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 55 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster LlucGalerie-Bild 56 von 56: GR221: Ruta de Pedra en Sec auf Mallorca. Etappe vom Stausee Cuber zum Kloster Lluc

Bekannte Bugs und Bezug

Wenn in der Karte die Wegpunkte einmal de- / re-aktiviert werden, folgt die Anzeige nicht mehr dem aktuellen Bild. Die Seite muss dann neu geladen werden.

Die Dateien des GPX-Viewers dürfen nicht minimiert werden (minify). Wenn doch, wird keine Karte mehr angezeigt. Daher kann das Plugin „Autoptimize“ (https://wordpress.org/plugins/autoptimize/) NICHT benutzt werden.
Im Plugin „Asset Clean up“ (https://wordpress.org/plugins/wp-asset-clean-up/) muss das Fotorama-GPX-Viewer-Plugin explizit ausgenommen werden.

Bei Interesse stelle ich das Plugin gerne zur Verfügung. Support kann ich allerdings keinen leisten. Dazu kenne ich mich mit WordPress zu wenig aus.

WordPress-Plugin für eine Übersichtskarte aller Tourenberichte

Zweck

Anzeige aller Touren- und Reiseberichte in einer Übersichtskarte mit Markern. Die Markern sollen nach Kategorien unterschieden werden und mit Titel, Bild und Text-Auszug angezeigt werden. Der Marker soll direkt zum Beitrag verlinken.

Vorgeschichte: Novo-Maps

Zu Beginn habe ich das kostenlose Novo-Maps-Plugin eingesetzt. Ohne Frage ein hervorragendes Plugin mit zahlreichen Einstellungen und Möglichkeiten. Allerdings auch mit einem Nachteil: Es können keine Open-Street-Map-Karten eingesetzt werden. Da das Projekt sehr ähnlich zum oben beschriebenen Plugin für die Kombination aus Bildergalerie und Leaflet-Karte ist, habe ich auch hier selbst Hand angelegt.

Übergang von Novo-Maps zu Leaflet

Jeder Touren- und Reisebericht muss in den „Custom-Fields“ die Geo-Koordinaten der Tour oder der Reise enthalten. (Anleitung siehe hier). In meinem Fall waren die Geo-Daten in der Datenbank bereits vorhanden. Novo-Maps hat diese Daten in einem speziellen Feld in der SQL-Datenbank abgelegt. Ich habe dazu zunächst ein Plugin geschrieben das die Daten einmalig aus den bestehenden Felder in die neuen Custom-Fields „lat“ und „lon“ kopiert.

Lösung mit Leaflet und Leaflet MarkerCluster

Das Plugin durchsucht alle Touren- und Reiseberichte nach den Feldern „lat“ und „lon“. Das Plugin erzeugt mit diesen Werten Marker auf einer Leaflet-Karte. Der Marker enthält Titel, Bild und Auszug des Beitrags. Mit den vergebenen Schlagwörtern wird das Marker-Icon festgelegt. Das Plugin zentriert die erzeugte Karte automatisch. Die Karte wird mit einem Shortcode auf einer Seite eingebunden. Zum Ergebnis geht’s mit diesem Link.

Screenshot Übersichtskarte Touren- und Reiseberichte website mvb1.de
Übersichtskarte der Website www.mvb1.de

Quellen und Bezug

Leaflet: https://leafletjs.com/

MarkerCluster: https://github.com/Leaflet/Leaflet.markercluster

Die angegebenen Javascript-Bibliotheken können als OpenSource-Projekte frei eingesetzt werden. Vielen Dank dafür!

Bei Interesse stelle ich das Plugin gerne zur Verfügung. Support kann ich allerdings keinen leisten. Dazu kenne ich mich mit WordPress zu wenig aus

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.