Karten In Drupal - Ein vollständiger Leitfaden

Konsequente Unterstützung von Adressen, Koordinaten, Karten und der Suche nach Orten ist definitiv die Achillesferse der meisten modernen CMS. Es ist eine komplizierte Angelegenheit und erfordert die Integration einer großen Anzahl von unabhängigen Lösungen. Das Thema Geolokalisierung wurde auch in vielen großen Projekten angesprochen, die von Droptica umgesetzt wurden. Ich zeige Ihnen einige Best Practices auf ihrer Basis.

Ich beginne mit der Vorstellung der Top 10 Geolokalisierungs-Module für Drupal. Machen Sie sich mit ihnen vertraut und wählen Sie die aus, die am besten zu Ihren Bedürfnissen passen. Am Ende werden wir gemeinsam eine Beispiel-Datenbank für Orte erstellen, die bequem zu bearbeiten und ansprechend ist.

Module zur Unterstützung von Adressen

Address

Dieses Modul stellt ein Feld bereit, das zum Speichern der Adresse nötig ist und für jedes Land der Welt funktioniert. Dadurch müssen Sie keine separaten Felder für Straßenname, Wohnungsnummer, Stadt und Postleitzahl erstellen. Die Möglichkeiten des Moduls werden besonders von Personen geschätzt, die Adressunterstützung für verschiedene Länder benötigen. Die Konfiguration ist sehr einfach: Es reicht aus, die Adresselemente auszuwählen, die sichtbar oder erforderlich sein sollen. Das Set enthält gebrauchsfertige Validatoren (einschließlich der für Postleitzahlen) und zusätzliche "Country"- und "Zone"-Felder.

Das Address-Modul zeigt die gespeicherten Adressen in ihrer Grundform an; um das Erscheinungsbild dieser Felder anzupassen, ist es erforderlich, Kenntnisse über den Aufbau eigener Templates und CSS-Codierung zu haben. Alternativ ist es möglich, Adressfelder mit anderen Modulen zu kombinieren, die später im Artikel besprochen werden.

Module aus der Geolokalisierungsfamilie

Geolocation Field

Es ist ein Modul, das ein Feld mit Breitengrad und Längengrad zu Drupal hinzufügt. Es basiert auf einer einfachen Struktur, enthält aber auch über 20 begleitende Module. In seiner einfachsten Version enthält es eine Felddefinition, zwei Arten von Steuerungen zur Bearbeitung (Koordinaten und ein HTML5-Widget, das den Standort vom Browser abruft) und Formatter, die den Standort als Text anzeigen (dezimal, sexagesimal – in Form von Grad, Minuten und Sekunden und mit Tokens).

Wenn Sie Felder mit Koordinaten in den Ansichten verwenden möchten, erhalten Sie einige interessante Funktionen. Sie können z.B. Distanzen in Kilometern von einem bestimmten Punkt verwenden. Dies ermöglicht es Ihnen, eine Liste von Orten innerhalb eines bestimmten Radius vom Benutzer zu erstellen. Sie können die Position des Website-Besuchers mit dem vom Browser bereitgestellten Standortdienst oder basierend auf der IP-Adresse feststellen.

Geolocation zeigt sein volles Potenzial erst nach dem Starten der sekundären Module. Zusätzliche Funktionen umfassen:

• Ein Karten-Widget, das sowohl mit kommerziellen Anbietern (Google Maps, Baidu, Yandex, Here) als auch mit der Open Leaflet Library (mit OpenStreetMap-Kartenschichten als Standard) zusammenarbeitet. Es gibt viele Konfigurationsmöglichkeiten hier, und keine zusätzlichen Module sind in CMS-Lösungen erforderlich.

• Unterstützung für statische Google Maps in Form einer Standard-PNG-Datei.
• Experimentelle Unterstützung für geometrische Formen auf Karten – sowohl einfache als auch komplexe. Fertige Umrisse von Ländern und Bundesstaaten der USA und Kanada werden zusammen mit dem Geolocation-Modul bereitgestellt.
• Integration mit dem Address-Modul, das den Zugriff auf einen Formatter mit einer Karte für Adressfelder bietet. Es ermöglicht, eine Postadresse auf der Karte anzuzeigen, ohne geografische Koordinaten eingeben zu müssen. Die automatische Umwandlung einer physischen Adresse in Koordinaten erfolgt über den ausgewählten Geokodierungsdienst (z.B. bezahlte Google API oder kostenlose Nominatom). Das Geocoder-Modul bietet ähnliche Funktionalität.
• Integration mit dem Geofield-Modul, das einen Formatter mit einer Karte zu Feldern mit Koordinaten hinzufügt.
• Integration mit dem Search API-Modul, das die Möglichkeit bietet, die Suche auf einen bestimmten rechteckigen Bereich zu beschränken.

Es sei erwähnt, dass die Architektur des Geolocation-Moduls offen und gut verfeinert ist, so dass Sie leicht Ihre Funktionalität basierend auf den oben aufgeführten hinzufügen können.

Module aus der Geofield-Familie

Geofield

Eine Alternative zum Geolocation Field-Modul, die ein etwas konkurrierendes "Ökosystem" von geografischen Modulen darstellt. Geofield ist in seiner Grundform sehr einfach und praktisch. In Bezug auf die von Geolocation angebotenen Funktionalitäten bietet Geofield auch:

• Möglichkeit, einen "Find my location"-Button zu einem Standard-Widget mit Breitengrad und Längengrad hinzuzufügen.
• Widget mit Koordinatenfeldern, die in Grad, Minuten, Sekunden unterteilt sind (es unterstützt jedoch den "Find my location"-Button nicht).
• Widget, das das WKT (Well-known text)-Format unterstützt, das Vektorobjekte auf Karten beschreibt. Mithilfe von WKT können Sie ein Gebiet beliebiger Form anstelle eines bestimmten Punkts definieren.
• Widget, mit dem Sie eine Begrenzungsbox definieren können – also einen Bereich, der von einem Rechteck begrenzt ist.

In Bezug auf die Integration von Geofield mit Views – Felder und Filter, die auf der Entfernung zu einem bestimmten Punkt basieren, sind verfügbar, aber ihre Konfigurationsoptionen beinhalten keine automatische Erkennung des Standorts des Benutzers.

Es gibt nicht viele Optionen zur Felddarstellung in der Grundversion von Geofield. Sie können entweder eines der gängigen Formate (WKT, EWKT, WKB, EWKB, GeoJSON, KML, GPX, GeoRSS, GeoHash) oder einfach die Koordinaten als dezimale oder sexagesimale Zahlen vorstellen. Eine Anzeige der Position auf einer Karte ist nicht möglich.

Es scheint, dass das Geolocation-Modul die bessere Wahl ist, aber die echte Stärke von Geofield liegt in den externen Zusatzmodulen:

Geofield Map

Dieses Modul bietet die Integration mit der bezahlten Google Maps API. Es ist sehr einfach zu konfigurieren, enthält ein Formular-Widget zur Auswahl von Standorten (mit koordinatenbasierter Adresssuche), einen Formatter, der einen bestimmten Ort auf Google Maps zeigt, und einen neuen Ansichts-Anzeigemodus, der die Anzeige von Ergebnissen in Form von Pins auf einer Karte ermöglicht. Fortgeschrittene Benutzer haben eine große Auswahl, beginnend von einer Kartenebene bis hin zu ihren eigenen Symbolen.

Der größte Nachteil des Geofield Map-Moduls ist die unvermeidliche Kostenstruktur bei Verwendung der Google API. Dies ist wichtig für Websites mit einer hohen Anzahl an Seitenaufrufen. Die Ersteller des Moduls haben drei Mechanismen implementiert, die erhebliche Einsparungen ermöglichen:

• Unterstützung für den kostenlosen OpenStreetView-Dienst über die Leaflet.js-Bibliothek. Dies gilt nur für das Bearbeitungsformular-Widget.
• Unterstützung für statische Karten, d.h. von Google in Form einer PNG-Datei generierte Karten. Sie sind nicht interaktiv, aber für einige Anwendungen ausreichend.
• Unterstützung für einfache Google Maps, die ohne Einschränkungen kostenlos verfügbar sind. Sie sind interaktiv, aber ihre Konfigurationsoptionen sind sehr begrenzt.

Leaflet

Eine Alternative zu Geofield Map, basierend auf der Open Leaflet.js Library. Standardmäßig enthält es die Unterstützung für die kostenlose OpenStreetMap-Website. Die wichtigsten Funktionen des Leaflet-Moduls sind:

• Solider Geofield-Feldformatter, der es ermöglicht, jeden Aspekt der Karte zu konfigurieren.
• Unterstützung für Views – Kartenanzeigemodus oder Verwendung des Views GeoJSON-Moduls, um Strukturen anzuzeigen, die komplexer als einzelne Punkte sind.
• Integrierte Unterstützung für die Leaflet.markercluster-Bibliothek, die Pins beim Herauszoomen der Karte gruppiert.
• Möglichkeit, Kartenebenen mit einem Hook zu definieren.
• Unterstützung für Formular-Widgets, die vom externen Leaflet Widgetmodule unterstützt werden. Es ist eine sehr fortgeschrittene Funktionalität, einschließlich der Zeichnung geometrischer Formen und dem Platzieren verschiedener Arten von Symbolen. Für grundlegende Anwendungen ist es besser, das Leaflet.js-Widget zu verwenden, das von Geofield Map bereitgestellt wird und zuvor beschrieben wurde.

Zusammenfassend erhalten Sie hier eine völlig kostenlose Lösung, die für die meisten Anforderungen ausreichen sollte.

Geocoder

Bei der Beschreibung der Module aus dem Geofield-Ökosystem habe ich noch nicht die Umwandlung einer Postadresse in Koordinaten erwähnt. Dies ist die Domäne des perfekt gestalteten Geocoder-Moduls. Es erweitert Widgets, Formatter und Views um die Möglichkeit der Geokodierung basierend auf mehreren kostenpflichtigen und kostenlosen Anbietern. Die Auswahl eines Lieferanten erfolgt separat für jedes konfigurierte Element, was eine genaue Planung der möglichen Kosten ermöglicht.

Mit der Hilfe von Geocode können Sie z.B.:

• Koordinaten als Postadresse anzeigen (durch einen separaten dedizierten Formatter).
• Eine Standortsuche nach Adresse in Bearbeitungsformularen einbinden.
• Eine Adresse aus Feldern eines beliebigen Typs lesen (auch die, die vom Address-Modul definiert wurden) und durch die Position auf einer Karte ersetzen (und umgekehrt – Koordinaten durch eine Adresse ersetzen). Später im Artikel werde ich eine Beispielkonfiguration für eine solche Lösung vorstellen.
• Es ist auch empfehlenswert, das Geocoder AJAX Prepopulate-Modul zu verwenden, das es ermöglicht, Koordinaten basierend auf einer Adresse zu finden, ohne das Bearbeitungsformular zu verlassen. Dies liegt daran, dass die Standardimplementierung, die in Geocoder enthalten ist, das Geokodieren nur beim Speichern des Formulars erlaubt. Wenn es notwendig ist, Korrekturen an einer Kartenposition vorzunehmen, müssen Sie erneut die Bearbeitungsoption wählen.

Andere Module

Simple Google Maps

Es ist möglich, dass Sie keine umfassenden Geolokalisierungsoptionen benötigen. Das Simple Google Maps-Modul ist eine erhebliche Vereinfachung dessen, was ich bisher beschrieben habe. Es bietet nur einen Kartenformatter, der für beliebige Textfelder eingestellt werden kann. Wenn Sie eine Adresse in dieses Feld eingeben, sieht der Endnutzer eine Google-Karte, die basierend auf ihrer Adresse generiert wird. Es ist kostenlos und Sie müssen keinen API-Schlüssel erwerben. Aus offensichtlichen Gründen wird keine Integration mit Views oder einem Widget zur Markierung der Position auf einer Karte in einem Formular angeboten.

Beispiel-Orte-Datenbank

Sie haben die grundlegenden Module für Geolokalisierung bereits kennengelernt. Nun ist es an der Zeit, sie anhand eines konkreten Beispiels zu verwenden. Wir werden eine Datenbank für Orte erstellen, in der jeder Eintrag einen Titel, eine Beschreibung, eine Adresse und Koordinaten hat. Wir werden die Liste der Orte in Form von Pins auf einer Karte anzeigen. Diese Art von Lösung begegnen wir häufig beim Erstellen von Unternehmenswebsites, zum Beispiel beim Veröffentlichen von Informationen über Veranstaltungen oder Einrichtungen eines bestimmten Unternehmens.

Wir müssen die folgenden Module für die Bedürfnisse unserer Orte-Datenbank installieren (ich empfehle dies mit Composer zu tun, da dafür externe Bibliotheken erforderlich sind):

• Address,
• Geofield,
• Geofield Map,
• Leaflet – einschließlich Leaflet Views und Leaflet Markercluster,
• Geocoder – einschließlich Geocoder Address, Geocoder Field und Geocoder Geofield,
• Geocoder AJAX Prepopulate.

Bearbeitung

Die Bearbeitung der Orte wird definitiv die größte Herausforderung sein. Wir möchten, dass die Adresse für jedes Land gilt. Jeder Ort muss Koordinaten haben, die aber basierend auf der Adresse ausgefüllt werden können. Die Adresse kann auch basierend auf den Koordinaten ausgefüllt werden. Ein solcher Ansatz wird die Arbeit der Content-Ersteller erheblich vereinfachen. Eine zusätzliche Voraussetzung ist die Verwendung ausschließlich kostenloser Tools.

Zu Beginn erstellen wir einen neuen Inhaltstyp Ort. Wir fügen folgende Felder hinzu:

• Neues Adressfeld namens field_address (Name, Vorname und Firmenname in den Feldeinstellungen ausblenden)
• Neues Geofield-Feld namens field_coordinates

Dann legen wir die Beziehung zwischen diesen beiden Feldern fest. Wir möchten, dass das Adressfeld auf der Karte ausgefüllt wird, wenn der Benutzer die Adresse nicht eingetragen hat. Und umgekehrt – dass der Ort auf der Karte basierend auf der Adresse nach Drücken des Buttons ausgefüllt wird. Dafür:

Betreten wir die field_address-Feldeinstellungen und wählen im Geocode-Bereich die Option "Reverse Geocode" (Umwandlung von Koordinaten in eine Adresse). Wir wählen "Koordinaten" aus der Feldliste und markieren auch "Skip Geocode/Reverse Geocode if the target value is not empty". Wir wählen Nominatim aus der Lieferantenliste.

Betreten wir die field_coordinates-Feldeinstellungen und wählen im Geocode-Bereich die Option "Prepopulate by geocoding an existing field" (Umwandlung einer Adresse in Koordinaten). Wir wählen "Adresse" aus der Feldliste und markieren auch "Skip Geocode/Reverse Geocode if the target value is not empty". Wir wählen ebenfalls Nominatim aus der Lieferantenliste.

Wenn wir versuchen, einen neuen Ort zu erstellen, werden wir schnell erkennen, dass die Nutzung von Breitengrad und Längengrad unbequem ist. Es ist viel einfacher, die Karte zu diesem Zweck zu nutzen. Wir gehen dann zu den Formulareinstellungen für den Inhaltstyp Ort und wählen das Geofield Map-Widget für das field_coordinates-Feld. Eine Warnung über den nicht konfigurierten Google API-Schlüssel wird angezeigt, aber wir können sie ignorieren. Dies liegt daran, dass wir die kostenlose Leaflet.js-Bibliothek verwenden werden.

Der letzte Schritt ist die Konfiguration der bereits erwähnten Nominatim-Website. Wir gehen zur Adresse /admin/config/system/geocoder und geben die Root-URL https://nominatim.openstreetmap.org und die Locale pl ein. Das war's!

Nun versuchen wir, einen neuen Ort hinzuzufügen. Nachdem wir die Adressfelder ausgefüllt haben, klicken wir auf den Populate from the Address field-Button, und mit etwas Glück sollten wir die Position der Adresse auf der Karte erhalten. Wenn wir die Adresse überhaupt nicht hinzufügen, nur einen Platz auf der Karte – wird die Adresse basierend auf den Koordinaten gelesen.

Anzeigen

Nun ist es an der Zeit, den Ort anzuzeigen. Wir gehen zu den Anzeigemodi für unseren Inhaltstyp Ort und setzen einen Formatter für das field_coordinates-Feld. Nun schauen wir uns die Seite mit einer funktionsfähigen Karte an, die gerade erstellt wurde:

Views

Das Anzeigen einer Liste von Orten ist genauso einfach. Wir erstellen eine neue Ansicht, in der wir nur die Knoten mit dem Inhaltstyp Ort anzeigen. Wir setzen das Leaflet Map als das Anzeigeformat.

Damit die Karte funktioniert, müssen wir das field_coordinates-Feld hinzufügen.

Dann wählen wir in den Einstellungen des Leaflet Map-Formats Grouping field No. 1 als "Content Coordinates".

Wir speichern die Ansicht, fügen einige Orte hinzu, gehen zur Adresse /places. Wir erhalten eine interaktive Karte mit markierten Pins. Wir können sie schnell mit weiteren Funktionen erweitern, wie z.B. nur die Orte anzuzeigen, die sich 30 km von unserem Standort entfernt befinden.

Karten in Drupal - Zusammenfassung

Wie Sie sehen, erfordert die Unterstützung von Geolokalisierung in Drupal viel Wissen, ermöglicht jedoch auch die Erstellung hervorragend funktionierender Lösungen für Ihre Kunden. Die Möglichkeiten sind fast grenzenlos, während die Implementierungszeit relativ kurz ist. In unserem Beispiel haben wir das Thema Karten und Geokodierung nur angerissen – es ist tatsächlich weitaus umfangreicher. Ich ermutige Sie, selbst zu experimentieren und auch die bezahlten Komponenten von Google auszuprobieren! Aber wenn Sie Hilfe bei der Implementierung von Geolokalisierung in Drupal benötigen, schauen Sie sich unsere Drupal-Entwicklungsdienstleistungen an.