Am heutigen Modul-Montag befassen wir uns gleich mit drei Modulen. Denn wir möchten etwas tiefer in die Verwaltung von geografischen Daten eintauchen. Diese setzt ein paar Vorkenntnisse voraus, die wir uns etwas genauer anschauen möchten. Der Artikel ist darum auch ziemlich viel länger.
Gute Websites müssen gut aussehen und einfach bedienbar sein – soweit alles klar. Doch auch die gute Lesbarkeit durch Maschinen ist ein oft vergessener Faktor. Denn längst treffen Algorithmen eine Art Vorauswahl, was wir überhaupt noch zu sehen kriegen.
Das flexible Datenmodell von Backdrop CMS ist prädestiniert, um sauber kategorisierte und gut maschinenlesbare Daten auszuspielen. Neben Taxonomie- oder Metadaten spielen auch Standortdaten eine wichtige Rolle. Viele meiner Kunden sind lokale Anbieter, für deren digitales Marketing sind gute Geodaten unerlässlich.
Wie werden Geodaten gespeichert?
Per Breiten- und Längengrad kann man jeden Punkt der Erde beschreiben, englisch spricht man von Latitude und Longitude. Letzere bezeichnet die Ost-West-Position auf der Erde, der sogenannte Nullmeridian liegt in Greenwich in London, der Raster beträgt 360 Grad. Ich wohne beispielsweise auf 47.2717397,8.3035556, etwa acht Grad östlich von London und ziemlich genau auf der Höhe von Seattle. Aber wir wollen nicht abschweifen...
Die benötigten Module
An zahlenbasierten Längen- und Breitengraden hat Google natürlich seine helle Freude. Website-Besucher jedoch bevorzugen Postadressen oder Kartendarstellungen. Zudem möchte man neue Standorte per Adresseingabe erfassen können. Für beide Fälle kommt die Geocoding-Funktion zum Einsatz. Für Backdrop CMS stehen dazu die folgenden Module bereit:
- Das Modul Adress Field speichert Adressdaten wie Strasse, Ort oder Land im international gültigen xNAL-Format.
- Das Modul Geocoder kann aus diesen Adressdaten Längen- und Breitengrad errechnen.
- Geolocation Field stellt eine Feldtyp für deren saubere Speicherung zur Verfügung. Das Submodul Geolocation Google Maps erzeugt davon eine schicke Google-Karte im Frontend.
Im Contrib exisiteren noch weitere Module für die Verwaltung von Geodaten, etwa Geofield, einer Art Light-Version von Geolocation Field. Dieses lassen wir für heute mal aussen vor.
Stolperstein Geocoding
Der nächste Schritt ist etwas komplizierter. Wir müssen nämlich einen Dienstleister finden, der Adressdaten aus Backdrop CMS ausliest, daraus die Geodaten ermittelt und wieder in die Datenbank zurückspielt. Neben Google kommt da etwa Microsofts Bing oder Mapbox in Frage.
Leider beginnen die Probleme oft genau an diesem Punkt:
- Die Kartendienste ändern gerne mal ihre API-Spezifikationen. Ein bisher funktionierender Dienst funktioniert dann plötzlich nicht mehr.
- Man benötigt ein Konto und einen API-Schlüssel des Anbieters. Der Weg dahin ist gelinde gesagt etwas umständlich.
- Die ersten Versuche scheitern oft, ohne dass man das in Backdrop irgendwie mitgeteilt kriegt warum. Es klappt einfach nicht. Rettung bietet da oft die JavaScript-Console des Browsers, und oft wird da eine falsche oder fehlende Authentifizierung erwähnt. Geänderte Einstellungen sind oft erst Minuten später wirksam, was das Bugfixing ebenfalls erschwert.
- Und schliesslich ist die Sache nur bis zu einem gewissen Volumen kostenlos. Irgendwie ja verständlich, aber nicht ohne weiteres ersichtlich. Wobei etwa bei Google die Schwelle doch bei 25’000 Kodierungen pro Monat liegt, das reicht für KMU-Websites meistens locker.
Für unser Testprojekt nehmen wir der Einfachheit halber also Google, zumal wir auch die Karte mit Google darstellen möchten (auch dazu benötigen wir den API-Key).
Projektbeispiel Veranstaltungskalender mit Standort-Anzeige
Ziel der nächsten Schritte soll sein, eine kleine Veranstaltungsdatenbank zu erstellen. Der jeweilige Veranstaltungsort soll als textbasierte Adresse und als Google-Map angezeigt werden.
Schritt 1 | Wir installieren und aktivieren die Module Geolocation, Geolocation Google Map, Geocoder und Address Field.
2. Schritt | Wir definieren die Felder Adresse und Geolocation im Inhaltstyp
Im Beispielprojekt heisst der Inhaltstyp "Veranstaltungen", aber die Felder lassen sich natürlich auch anderen Typen zuordnen. Das Adressfeld lässt sich recht umfassend länderspezifisch anpassen. Bei den Einstellungen für Geolocation Adresse als Quelle und Google Geocoder als Service anwählen.
3. Schritt | Wir aktivieren die Frontend-Ausgabe
Unter "Manage Displays" verwalten wir die Anzeige im Frontend. Beim Geolocation-Feld wählen wir vorerst einmal textbasiert als Ausgabemodus, das vereinfacht eine allfällige spätere Fehlersuche, bevor wir später auf den Kartenmodus umschalten.
4. Schritt | Wir erfassen einen Beitrag "Veranstaltung" und speichern diesen ab
Mit diesem Schritt ist die Veranstaltung erfasst und wird im Frontend mit der Adresse angezeigt. Allerdings sehen wir weder Karte noch Koordinaten. Dies zu erreichen, erfordert noch einge weitere Schritte. Wir müssen Backdrop CMS dazu bringen, die Adresse via Google Map API in Geodaten umzuwandeln und im Geolocation-Feld zu speichern.
5. Schritt | Wir erstellen ein Konto, ein Projekt und einen API-Schlüssel bei Google
Wir rufen in Backdrop CMS die Einstellungen für die Geolocation GoogleMaps auf (/admin/config/services/googlemaps), von da führt uns ein Link zum Google Maps JavaScript API v3 und von da aus auf Get an API Key. Hier müssen wir möglicherweise zuerst ein Konto erstellen für die Google API. Ich gehe aus Platzgründen mal davon aus, dass dies bereits geschehen ist.
Ansonsten kann ich nur empfehlen, die nächsten Schritt genauso zu machen, wie Google sie vorschlägt (dieses Tutorial hier wird irgendwann veraltet sein). Wichtig ist zunächst mal, dass wir auf der Seite Maps JavaScriptAPI sind (es gibt nämlich noch weitere GoogleMaps-Dienste).
Hier gibt es jetzt einige Einstellungen zu machen. Ich habe bewusst in Google die englische Benutzeroberfläche gewählt, weil die Einstellungen selber weitgehend eine englische Benutzeroberfläche haben.
5.1 | Projekt erstellen
Für alle nachfolgenden Schritte benötigen wir eine Art “Container”, oder im Google-Jargon eben ein “Project”, oder wir wählen ein bestehendes Projekt aus.
5.2 | Services aktivieren
Auf oberhalb des Dashboards sehen wir einen Button “Enable API and services”. Wir aktivieren die Dienste “Geocoding API” und "Maps JavaScript API".
5.3 | Erstellen des Zugangsschlüssels (Credentials)
Nun geht es an die Erstellung des Schlüssels. Im Dashboard des Projekts finden wir einen Link “Create and enable APIs”, damit erstellen wir unseren API Key. Wichtig hier: den Key vorerst ohne “Restriction” erstellen, es vereinfacht das Bugfixing am Schluss erheblich.
5.4 | Definition des OAuth consent screen
Diese Einstellung ergibt vor allem für App-Programmierer wirklich Sinn, muss aber für Website-Zugriffe über Backdrop ebenfalls ausgefüllt werden. Typ “External” wählen und dann die nachfolgend gezeigten Felder ausfüllen.
5.5 | Domain-Verifikation aktivieren
Den Zugriff auf den Google-Service per Domain einschränken
5.6 | API-Key in Backdrop CMS übernehmen
Der API-Key muss in Backdrop an zwei Orten eingefügt werden. Erstens bei den Geocoder-Einstellungen (/admin/config/content/geocoder), zweitens bei den Settings der Geolocation Google Maps (/admin/config/services/googlemaps). Wichtig ist, an beiden Stellen den gleichen Schlüssel einzufügen.
5.7 | Beitrag in Backdrop aktualisieren
Jetzt können wir in Backdrop unseren Beitrag aktualisieren und nochmals abspeichern. Wir sollten im Artikel nun die Koordinaten sehen. Sollte dies nicht der Fall sein, siehe Abschnitt “Troubleshooting”
5.8 | Karteneinstellungen anpassen
In den Display-Einstellungen von Backdrop CMS stellen wir nun von der textbasierten Anzeige auf die Kartendarstellung um (denn jetzt wissen wir, dass zumindest das Geocoding korrekt funktioniert). Bei den Maps-Einstellungen wähle ich meistens die Werte 100% Breite, 400px Höhe und Zoomfaktor 14, justieren kann man die Sache später immer noch.
6. Schritt | Restriktionen bei Schlüssel definieren und Bugs identifizieren
Zum Schluss noch die wohl heikelste Übung der ganzen Geschichte. Wir müssen aus Sicherheitsgründen die Nutzung der Credentials mit Restrictions einschränken. Andernfalls kann jeder darauf zugreifen und sie nutzen (und wir erinnern uns, irgendwann wird die Sache kostenpflichtig).
Nur ist die Restriktionsfunktionen in Google zum Zeitpunkt dieses Beitrags nicht zu 100% stabil – jedoch in den allermeisten Fällen die Fehlerquelle, wenn etwas nicht funktioniert.
Aber es kommt noch schlimmer: weder die Backdrop-Module noch das Google-Dashboard verfügen über gute Debugging-Informationen. Hier hilft oft nur etwas pröbeln.
In meinem Fall half etwa das Einschränken über den HTTP-Referrer, dann aber neben Domain auch noch die IP-Adresse eintragen (siehe Screenshot), obwohl dafür für IP eigentlich eine eigene Option zur Verfügung stehen würde... Aber es funktioniert.
Für das Bugfixing hilfreich sind sicher das Google Dashboard (es zeigt auch abgelehnte Anfragen), der Datenbank-Log in Backdrop sowie die JavaScript-Konsole des Browsers.
In diesem Sinn – happy Geocoding!