Tutorial für OpenLayers3 in Drupal

Tutorial für OpenLayers3 in Drupal

Seit unserem ersten Openlayers-Tutorial vom Herbst 2013 hat sich viel getan bei dem Openlayers-Modul für Drupal. Die Version 3 ist seit Dezember 2015 als stable Version verfügbar und bietet viele Verbesserungen gegenüber der alten 2er-Version auf der auch unser altes Tutorial basiert. Zeit also für eine überarbeitete Version.


Warum OpenLayers?


OpenLayers ist nicht das einzige Modul, das die Möglichkeit bietet Karten von GoogleMaps, Bing OpenStreetMaps und anderen Anbietern in eine Drupal-Webseite einzubinden. Es bietet aber die meisten Optionen und ist am flexibelsten. Die Funktionsvielfalt hat allerdings auch ihren Preis: Man muss etwas mehr Aufwand betreiben, um eine funktionsfähige Karte zu bekommen. Hat man das Prinzip aber erst mal verstanden, ist es gar nicht mehr schwer. Dieses Tutorial soll beim Einstieg helfen.


Vorkenntnisse


Man sollte zumindest soweit mit Drupal vertraut sein, dass man selber Module installieren, eigene Inhaltstypen und Views erstellen kann. HTML-, CSS- oder PHP-Kenntnisse sind nicht notwendig aber durchaus hilfreich. ;-)


Benötigte Software


Neben einer lauffähigen aktuellen Drupal7-Installation benötigt man die folgenden Softwarepakete. Mit Ausnahme der openlayers- und geoPHP-Library findet man alles auf drupal.org. Die Nummer der verwendeten Versionen steht jeweils in Klammern. Teilweise kommen dev-Versionen zum Einsatz, falls die stable-Version einen Bug enthält, der in der dev-Version schon gefixt ist.


Sonstige Voraussetzungen


Die aktuelle Version von Open Layers erfordert mindestens PHP 5.3. Diese ist allerdings schon stark veraltet und sollte aus Sicherheitsgründen nicht eingesetzt werden. Mit PHP 5.6.29 funktioniert alles einwandfrei, daher empfiehlt es sich diese Version zu verwenden.


Arbeitsschritte


Am einfachsten ist die Installation von Modulen mit Drush. Da eine Drush-Installation nicht die Regel ist, beschreiben wir die Arbeiten ohne die Verwendung von Drush.


  1. Die oben aufgeführten Module installieren und aktivieren. Achtung: OpenLayers bringt zahlreiche Submodule mit, diese müssen alle einzeln aktiviert werden, sonst fehlen später z.B. die Examples! Die Libraries geoPHP und OpenLayers von Github herunterladen und per FTP in das Libraries-Verzeichnis von Drupal kopieren.


  2. Einen neuen Inhaltstyp mit einem Feld für die Geodaten erstellen


  3. Die gewünschten Views erstellen


  4. Die Karte konfigurieren und Data-Display zur Karte hinzufügen (via Views)

Schritt 1. Module und Libraries installieren, aktivieren und konfigurieren


Wir gehen davon aus, dass bekannt ist, wie das mit der Modulinstallation geht. Falls nicht, gibt es hier eine Anleitung: https://www.drupal.org/documentation/build. Nach dem Installieren müssen bei einigen Modulen noch Einstellungen vorgenommen bzw. überprüft werden:


  • OpenLayers: Unter “admin/structure/openlayers” in “Library loading configuration” die lokal installierte Library auswählen und abspeichern.

    OpenLayers Library auswählen

     

  • Libraries API: Unter ..sites/all/ erstellt man einen Unterordner “libraries”. Die Library geoPHP von Github herunterladen, lokal entpacken und das komplette Verzeichnis geoPHP per FTP in das soeben erstellte Libraries-Verzeichnis von Drupal kopieren (also nach ../sites/all/libraries/).


  • Die Library OpenLayers von Github herunterladen und ebenfalls in das Libraries-Verzeichnis laden (Unterordner openlayers3)


  • Als nächstes konfigurieren wir das Modul „IP Geolocation Views & Maps“.

    Als erstes besorgen wir uns einen API-Schlüssel von Google. Wie das geht wird auf https://developers.google.com/maps/documentation/javascript/get-api-key beschrieben.

    Anschließend gehen wir auf „Konfiguration >> IP Geolocation Views & Maps“ und wählen zunächst die gewünschte Google API aus. Im Feld „Google Maps API Key“ tragen wir den Schlüssel ein, den wir uns zuvor von Google besorgt haben.

    Bei Bedarf kann man unter „Alternate Markers“ ein Set mit eigenen Markergrafiken auswählen. Will man das nicht, braucht man hier nichts zu ändern. Die Einstellungen unter „Font icons“ gelte nur bei Verwendung des Moduls „Leaflet“ und sind für uns hier irrelevant.
    openlayers Configuration ip_geoloc


    Unter „Data collection options“ finden sich verschiedene Einstellungen, um beispielsweise festzulegen, bei welchen Rollen eine Standorterkennung erfolgen soll und auf welchen Seiten, bzw. auf welchen Seiten nicht. Hier unsere Beispielkonfiguration:
    openlayers Beispielkonfiguration ip_geoloc

     

Schritt 2. Inhaltstyp mit Feld für Geodaten erstellen


Als erstes erstellen wir einen neuen Inhaltstypen, den wir “Standort” nennen. Dieser wird ein Geofield erhalten, das die Geokoordinaten für die Karte aufnimmt.


  • Verwaltung >> Struktur >> Inhaltstypen >> Inhaltstyp hinzufügen


  • Im Feld “Name” den Wert “Standort” eintragen. Die Veröffentlichungseinstellungen und Anzeigeeinstellung belassen wir für diese Demo auf den Defaulteinstellungen.


  • Auf “Speichern und Felder hinzufügen” klicken


  • Auf der folgenden Seite in “Neues Feld hinzufügen” den Text “Geofield Standort” eintragen, den Feldtyp "Geofield" und als Formularelement "Latitude / Longitude" auswählen
    openlayers geofield erstellen

     

  • Auf Speichern klicken und auf der folgenden Einstellungseite ggf. die Beschriftung ändern, einen Haken bei Pflichtfeld setzen und die Zahl der Werte auf 1 setzen

Jetzt haben wir einen neuen Inhaltstypen, der Geokoordinaten in Form von Breiten- und Längengrad aufnehmen kann. Natürlich ist es auch möglich, Breiten- und Längengradangaben anhand einer Adresse automatisch ermitteln zu lassen. Hier machen wir es uns aber ganz einfach.

Als nächstes konfigurieren wir die Anzeige dieses Geofields, denn wir wollen nach dem Eingeben der Geokoordinaten gleich einen Marker auf einer Karte sehen und nicht nur den nichtssagenden Breiten- und Längengrad.


  • Auf “Verwaltung >> Struktur >> Inhaltstypen >> Anzeige verwalten” klicken und bei dem oben angelegten Feld “Geofield Standort” die Beschriftung auf “Ausgeblendet” stellen und das Format auf “Openlayers” setzen.
    openlayers geofield Display einstellen


  • Anschließend auf das kleine Zahnrad rechts klicken und auf der folgenden Seite die Karte einstellen. Wir wählen hier einen OpenLayers Formatter layer und stellen die Data options auf „Use full geometry“.
    openlayers geofield display einstellen

     


  • Hat man die gewünschten Einstellungen vorgenommen, auf “Aktualisieren” klicken und anschließend auf “Speichern”.

  • Zum Abschluss legen wir noch einen Inhalt an und schauen uns das Ergebnis an. Dazu “Verwalten >> Inhalt >> Inhalt hinzufügen >> Standort” anklicken. Den neuen Inhalt nennen wir Teststandort und geben ihm die Koordinaten Latitude (Breitengrad) = 52.524786 und Longitude (Längengrad) = 13.4043314. (Achtung: als Komma muss hier ein Dezimalpunkt gesetzt werden, kein Dezimalkomma!) und speichern unseren Inhalt ab. In der Nodeansicht zeigt Drupal jetzt anstelle von Breiten- und Längengrad eine Openlayers-karte mit einem Marker an den eingetragenen Koordinaten
    openlayers anzeite teststandort berlin

     

An dieser Stelle sollte man noch weitere Inhalte anlegen. Dann gibt es auf den Views und Karten, die wir als nächstes erstellen, etwas mehr zu sehen. ;-)


Schritt 3. View erstellen


Jetzt müssen wir zunächst einen View erstellen, der uns die Daten mit den anzuzeigenden Geokoordinaten bereitstellt, die später auf unserer Karte eingeblendet werden sollen. Dieser Layer wird dann die Marker enthalten, die über die Basiskarte gelegt werden.


  • Über “Struktur >> Ansichten >> Neue Ansicht hinzufügen” einen neuen View vom Typ "Inhalt" anlegen. Diesem einen Namen geben und den Haken bei "Neue Seite anlegen" wegmachen, sowie alle Nodes vom Typ “Standort” auswählen. Seiten und Blöcke fügen wir später hinzu.


  • “Fortfahren & Speichern” anklicken und auf der folgenden Seite die Felder hinzufügen, die später angezeigt werden sollen. Hier ist dies das Geofield mit den Geodaten. Klick auf “hinzufügen” bei Felder und dann das Feld “Geofield Standort” auswählen. Den Formatierer auf "Well Known Text (WKT)" und die Data options auf "Use full geometry" einstellen. Das Feld mit dem Node-Titel hat Drupal bereits automatisch eingefügt. Weitere Felder, z.B. ein Logo, können optional hinzugefügt werden, um sie zum Beispiel später auf der Karte im Popup des Markers anzuzeigen.


  • Jetzt noch die Filter einstellen, zumindest "Inhalt: Typ (Standort)" (also unseren oben erstellten Inhaltstypen mit den Geokoordinaten) und "Inhalt: veröffentlicht (Ja)" sollte man auswählen, damit nur veröffentlichte Inhalte des gewünschten Typs in den Ergebnissen enthalten sind.

    Für die Umgebungssuche brauchen wir außerdem noch das Feld "Geofield Standort (field_geofield_standort) - proximity".

    Diesen Filter hervorheben, so dass Seitenbesucher ihn benutzen können und folgende Einstellungen vornehmen:
    openlayers exposed filter geofield_proximity

    openlayers view exposed filter einstellen


    Damit wird der Filter standardmäßig mit einem Suchradius von 2 Kilometern aufgerufen. Das „me“ bedeutet, dass der aktuelle Standort des Suchenden für die Suche verwendet wird. Für die Ermittlung des aktuellen Standortes ist das Modul „IP Geolocation Views & Maps “ zuständig. Natürlich funktioniert das nur, wenn der Browser die Standortermittlung auch erlaubt. Wichtig ist, dass bei „Source of Origin Point“ „Geocoded Location of visitor‘s current position“ eingestellt ist. Für die eigentliche Geokodierung haben wir hier „Google Geoceder“ gewählt.


  • Als nächstes fügen wir eine neue Anzeige (Klick auf den Button “+ Hinzufügen” im Kopf des Views) vom Typ "Seite" hinzu. Hierbei möglichst einen aussagefähigen maschinenlesbaren Namen geben, damit man ihn später in Openlayers leicht wiederfindet (oder zumindest den automatisch vergebenen maschinenlesbaren Namen notieren). Das Format dieser Anzeige auf "OpenLayers map" einstellen.

    Unter "Format >> Format >> Einstellungen" das Feld "Map Data Sources" auf "WKT" stellen und unter "WKT Field" das Feld mit den Geodaten (hier: “Inhalt: Geofield Standort”) auswählen. Optional können noch Titel und Beschreibung eingestellt werden, für die korrekte Funktionsweise ist das aber nicht erforderlich. Den Wert für „Base map to use and vector layer to fill with the views features *“ setzen wir später, sobald die Karte erstellt ist.
    openlayers view ol_map einstellungen

     

  • Unter Seitennavigation stellen wir die Anzeige auf „Alle Elemente anzeigen“. Die übrigen Einstellungen aus der Master-Ansicht übernehmen wir. Nun noch den View speichern und weiter geht es mit dem Konfigurieren der Karte.

4. Karte konfigurieren


Eine Karte ist eine Sammlung von Basis-Karten-Layer(n), wie Google Map oder Openstreet Map und einem oder mehreren selbst definierten OpenLayer(n) (hier aus dem in Schritt 3 erstellten View), sowie Verhaltens-Einstellungen und Styles, die zusammen eine OpenLayers-Karte definieren. Gehen wir das mal Schritt für Schritt durch.


  1. Neue Quelle hinzufügen: "Struktur >> OpenLayers >> Quellen >> hinzufügen". Hier geben wir der neuen Quelle zunächst einen administrativen Titel „Quelle Standorte“ (Dieser wird zur leichteren Identifizierung in der Verwaltungsoberfläche angezeigt) und klicken auf „Weiter“.

    Als nächstes wählen wir unter „Quelltyp“ die Option „Views“ aus, denn wir wollen ja die Daten aus dem zuvor erstellten View verwenden und klicken wieder auf „Weiter“.
    openlayers quelle einstellen


    Nun wählen wir den Views-Display. Hier sieht man, dass es hilfreich ist, dem Display einen sprechenden maschinenlesbaren Namen zu geben und es nicht bei der automatischen Vergabe durch Views zu belassen.
    openlayers quelle source-type einstellen


    Jetzt noch auf „Abschließen“ klicken und die neue Quelle ist angelegt und erscheint in der Übersicht aller Quellen.

  2. Neue Ebene anlegen: "Struktur >> OpenLayers >> Ebenen >> hinzufügen". Tragen als erstes wieder den administrativen Titel ein „Ebene Standorte“ und klicken auf „Weiter“.

    Auf dern nächsten Seite wählen wir den Typ „Vector“ und die zuvor definierte Quelle aus und bestätigen unsere Auswahl mit „Weiter“.
    openlayers ebenentyp konfigurieren


    Jetzt müssen wir den Layer Style auswählen. OpenLayers bringt diverse vorgefertigte Styles mit aus denen wir hier „Openlayers: Blue “ auswählen. Natürlich kann man auch eigene Styles definieren und an dieser Stelle verwenden.
    openlayers ebene layer-style einstellen


    Mit Klick auf „Weiter“ kommen wir zum Abschluss zu den Layer type options. Hier kann man einstellen auf welchen Zoom-Leveln der Karte diese Ebene erscheinen soll. Das Feld lassen wir leer und schließen die Erstellung der Ebene durch Klick auf „Abschließen“ ab. Die neu erstellte Ebene erscheint jetzt in der Ebenen-Liste

  3. Neue Karte erstellen: "Struktur >> OpenLayers >> Maps >> Hinzufügen". Wie gehabt tragen wir einen administrativen Titel ein (hier: „Karte Standorte“) und klicken auf „Weiter“. Auf der folgenden Seite „Karteneinstellungen“ können wir verschiedene Grundeinstellungen für die Karte festlegen:

    Breite und Höhe (jeweils in Pixel, für die Breite kann auch der Wert "auto" gesetzt werden, die Karte füllt dann den gesamten verfügbaren Platz aus).

    Kartenmittelpunkt und Zoomlevel (von 2 = komplette Weltkarte bis 18 = maximale Vergrößerung). Den Kartenmittelpunkt kann man durch Klicken in die Vorschaukarte einstellen und durch Rein- oder Rauszommen in die Karte wird der Zoomlevel ermittelt und eingetragen. Der minimale und maximal Zoomlevel läßt sich ebenfalls festlegen. Das ist z.B. sinnvoll, wenn man nicht auf die Weltansicht rauszoomen möchte. Mit „Limit to extent“ kann das Verschieben der Karte auf den gewählten Ausschnitt begrenzt werden.
    openlayers neue karte grundkonfiguration


    Ein Klick auf „Weiter“ bringt uns zur Auswahl der anzuzeigenden Ebene. Hier wählen wir unsere zuvor angelegte Ebene „Ebene Standorte“ sowie als Kartenhintergrund „Openlayers examples: OpenStreetMap DE“ durch Anklicken der Select-Box in der Spalte „Aktiviert“. Durch Klicken auf „Weiter“ kommt man zur Seite „Steuerelemente“


    Hier findet man diverse Möglichkeiten, um das Verhalten der Karte festzulegen, z.B. welche Zoom- und Navigationselemente verfügbar sein sollen, ob es eine Möglichket gibt Layer an- und abzuschalten, ob ein Maßstab eingeblendet wird, ob Tooltips oder Pop-Ups erscheinen sollen und vieles mehr. Sinnvoll ist z.B. die Option "Zoom to Layer", die dafür sorgt, dass bei einer Karte, die eine bestimmte Auswahl an Markern enthält, die Kartengröße so eingestellt wird, dass die Marker angezeigt werden, aber nicht das gesamte Kartengebiet, das wir in den Karteneinstellungen voreingestellt haben. Wir wählen hier die Steuerelemente

    „Zoom“ (blendet + und – Schaltflächen zum Rein-/Rauszoomen ein)

    „Attribution“ (blendet Copyright-Vermerk auf der Karte ein)

    „Scaleline“ (zeigt einen Maßstab auf der Karte)

    und klicken auf „Weiter“.


    Auf der Folgeseite „Interactions“ finden wir weitere Kartenfunktionen. Hier wählen wir beispielsweise

    „DoubleClickZoom“ (Reinzoomen in die Karte durch Doppelklick linke Maustaste)

    „DragPan“ (erlaubt ein Verschieben der Karte)

    Ein Klick auf „Weiter“ bringt uns zur letzten Seite „Komponenten“. Komponenten sind weitere Inhalte, die auf der Karte eingebaut werden können, z.B. Popups, die Erscheinen, wenn man auf einen Kartenmarker klickt oder diesen mit der Maus überfährt. Hier wählen wir nichts aus und klicken noch einmal auf „Weiter“.


    Wir sehen jetzt die Karte in der Vorschauansicht. Das gibt uns einen ersten Eindruck, wie die Karte später aussieht. Allerdings fehlen hier die Daten aus dem View und die Breite der Karte hat nicht unbedingt etwas mit dem späteren Aussehen auf der Webseite zu tun.

  4. Um die neu erstellte Karte in unsere Webseite einzubinden, fehlt noch ein letzter Schritt.

    Dazu gehen wir zurück zu dem in Schritt 3 erstellten View und öffnen unser Display mit dem Format „Openlayers Map“. Dort klicken wir auf „Format >> Format >> Einstellungen“ und wählen unter „Base map to use and vector layer to fill with the views features *“ unsere Kartenebene aus, die wir in Schritt 3 erstellt haben.
    openlayers view karte einstellen


    Abschließend klicken wir auf „Anwenden diese Anzeige“, speichern noch den View und wechseln zur URL dieser Views-Seite. Dort erscheint jetzt die neue Karte mit dem Openlayers Kartenhintergrund und sobald wir eine Adresse in der Suchmaske eingegeben und auf „Suchen“ geklickt haben, die Marker im ausgewählten Suchgebiet. Der weiße Kreis veranschaulicht den Suchradius. Wie man sieht ist nicht der rechteckige Bereich der Karte das durchsuchte Gebiet! Und man sieht auch, dass eine rechteckige Karte eher ungünstig ist. Wenn möglich sollte man sie so einstellen, dass sie quadratisch angezeigt wird.

     

Die fertige Seite mit Karte und Adresssuche:


openlayers karte mit suchergebnissen



Nun kann man daran gehen, die Karte weiter auszubauen. Z.B. können weitere Layer hinzugefügt werden – jeweils mit unterschiedlichen Markern, oder man erweitert die Kartenfunktionen durch zusätzliche Steuerelemente, Interaktionen und Komponenten. Hier gibt es Popups, die zusätzliche Inhalte anzeigen, wenn man auf einen Marker klickt, einen Autozoom, der nach erfolgter Suche automatisch die Karte auf die richtige Größe zoomt – je nach Suchradius - und vieles mehr.