GPX-Tracks in Drupal anzeigen

Wenn du GPX-Tracks auf einer Karte in Drupal anzeigen möchtest, bist du hier genau richtig. In diesem Artikel zeige ich dir Schritt für Schritt, wie du mit den aktuellen Drupal-Versionen (10 und 11) eine Kartenintegration für GPX-Daten erstellst. Am Ende hast du ein flexibles, benutzerfreundliches System, um Kartenansichten für individuelle GPX-Tracks in Drupal darzustellen.

Vorbereitung: Inhaltstyp „GPX Test“ erstellen

Zunächst legen wir einen neuen Inhaltstyp namens „GPX Test“ an, der uns als Basis für unsere Kartenansicht dient. Standardmäßig enthält dieser Inhaltstyp bereits das Body-Feld. Zusätzlich werden wir im nächsten Schritt eine Kartenanzeige hinzufügen, die uns die GPX-Daten auf einer Karte ausgibt.

Schritt 1: Das Leaflet-Modul installieren

Für die Kartenanzeige verwenden wir das Modul Leaflet, das auf der beliebten JavaScript-Bibliothek Leaflet.js basiert. Leaflet ermöglicht es, interaktive Karten in Webseiten einzubetten und ist eine gängige Lösung für Kartenvisualisierungen in Drupal.

Lade das Modul mit folgendem Composer-Befehl herunter:

composer require 'drupal/leaflet:^10.2'

Installiere anschließend das Modul und die benötigte Erweiterung Geofield mit:

drush pm:install leaflet

Hinweis: Geofield wird automatisch mitinstalliert und erweitert Drupal um Geodatenfelder, mit denen sich Standortinformationen speichern und verarbeiten lassen.

Schritt 2: Ein Geofield hinzufügen

Als Nächstes erweitern wir den Inhaltstyp „GPX Test“ um ein neues Feld. Wähle hierfür den Feldtyp Geofield aus (siehe Screenshot). Die Standardeinstellungen für die WKT-Ausgabe können unverändert bleiben. 

Wechsle in der Anzeigeeinstellung des Feldes von „Rohausgabe“ zu „Leaflet-Karte“.

Nun kannst du einen neuen Inhalt dieses Typs anlegen und als Testkoordinaten beliebige Daten eingeben. Tipp: Öffne Google Maps, klicke mit einem Rechtsklick auf einen Ort, und kopiere die dort angezeigten Koordinaten.

In der Testseite wird nun eine Karte mit einer Markierung für die eingegebenen Koordinaten angezeigt.

Schritt 3: GPX-Track in die Karte integrieren

Um GPX-Daten als Kartenansicht einzubinden, nutzen wir das Modul Geocoder.

Geocoder-Modul installieren

Das Geocoder-Modul ermöglicht es, aus verschiedenen Datenformaten (z. B. GPX) geografische Koordinaten zu extrahieren. Lade das Modul mit:

composer require 'drupal/geocoder:^4.25'

Installiere Geocoder:

drush pm:install geocoder

Geofield-Modul installieren

Zusätzlich zu Leaflet und Geocoder benötigen wir Geofield. Geofield stellt die benötigten Feldtypen und Werkzeuge bereit, um Standortinformationen zu speichern und zu visualisieren.

composer require 'drupal/geofield:^1.61'
drush pm:install geofield

Schritt 4: Weitere benötigte Module aktivieren

Für die Integration von Geocoder und Geofield sind die Module Geocoder Field und Geocoder Geofield erforderlich. Beide Module erweitern die Funktionalität von Geocoder und Geofield, um Geodaten wie GPX-Dateien zu verarbeiten und als Felder in Drupal darzustellen.

Installiere beide Module:

drush pm:install geocoder_field geocoder_geofield

Schritt 5: Geocoder konfigurieren

Damit Geocoder GPX-Daten verarbeiten kann, müssen wir es entsprechend konfigurieren. Navigiere zu Konfiguration > System > Geocoder und wähle dort als Provider „GPX File“ aus.

Schritt 6: Ein Datei-Upload-Feld für GPX erstellen

Rufe die Einstellungen des Inhaltstyps „GPX Test“ auf und gehe zu „Felder verwalten“. Erstelle ein neues Feld vom Typ Datei-Upload und konfiguriere es, dass nur GPX-Dateien hochgeladen werden können. Dazu trägst du bei "Zulässige Dateiendungen" ein: "gpx".

Schritt 7: Geofield-Konfiguration für GPX-Upload

Bearbeite nun das Geofield im Inhaltstyp „GPX Test“. Dank Geocoder stehen jetzt zusätzliche Optionen zur Verfügung. Wähle die Option Aus bestehendem Feld geocodieren und gib im folgenden Dropdown-Menü das soeben angelegte Feld „GPX-Upload“ an.

Aktiviere im Abschnitt „Geocoder Providers“ die Auswahl „GPX File“. Alle anderen Einstellungen kannst du unverändert lassen.

Schritt 8: GPX-Datei hochladen und Karte anzeigen

Erstelle nun einen Inhalt des Typs „GPX Test“ und lade eine beliebige GPX-Datei in das GPX-Upload-Feld hoch. Speichere den Inhalt und schaue dir die Seite an. Dein GPX-Track sollte jetzt auf der Karte angezeigt werden!

Weitere Anpassungen

Falls du verhindern möchtest, dass die GPX-Datei zum Download verfügbar ist, gehe in den Inhaltstyp „Anzeige verwalten“ und deaktiviere die Anzeige des GPX-Uploads. Ebenso kannst du unter „Formularanzeige“ das Geofield ausblenden, sofern du nur GPX-Tracks hochladen und keine manuellen Koordinaten eingeben möchtest.

Viel Erfolg beim Nachbauen! 

Wenn du Unterstützung benötigst oder individuelle Anpassungen wünschst, freue ich mich über eine Anfrage, um gemeinsam an deinem Projekt zu arbeiten.