Mit OpenLayers steht eine mächtige Bibliothek zur Verfügung, um Karten - z.B. von GoogleMaps oder OpenStreetMap - auf der eigenen Webseite einzubauen und mit zusätzlichen Inhalten zu versehen.

Die Möglichkeiten sind vielfältig. So lassen sich einzelne Marker auf den Karten anzeigen, aber auch KML-Layer (bspw. mit Wanderrouten) oder gruppierte Marker. Die folgende Anleitung zeigt am Beispiel der Integration von OpenLayers in Drupal, wie man eigene Karten erstellt.

Warum OpenLayers mit Drupal?

Es gibt ein sehr schönes Modul für Drupal, dass eine sehr weitgehende Integration bietet. Man wird praktisch durch den Prozess der Erstellung einer Karte geführt. Das ist immer noch nicht wirklich leicht, aber hat man das Prinzip erst mal verstanden, ist es gar nicht mehr schwer.

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.

OpenLayers (Version: 7.x-3.1+74-dev) https://www.drupal.org/project/openlayers

OpenLayers Library von Github https://github.com/openlayers/openlayers

OpenLayers KML (Version: 7.x-1.0-beta1+2-dev) Layer https://www.drupal.org/project/openlayers_kml_layer

OpenLayers Plus (Version: 7.x-3.0-beta1+76-dev) https://www.drupal.org/project/openlayers_plus

Geofield (Version: 7.x-2.3) https://www.drupal.org/project/geofield

Geocoder (Version: 7.x-1.39) https://www.drupal.org/project/geocoder

geoPHP (Version: 7.x-1.7) https://www.drupal.org/project/geophp und die geoPHP-Library von https://github.com/phayes/geoPHP

IP Geolocation Views & Maps (Version: 7.x-1.29+7-dev) https://www.drupal.org/project/ip_geoloc

Proj4JS (Version: 7.x-1.2) https://www.drupal.org/project/proj4js

Libraries (Version: 7.x-2.3) https://www.drupal.org/project/libraries

Chaos Tools (Version: 7.x-1.12) https://www.drupal.org/project/ctools

Views (Version: 7.x-3.14) https:www.drupal.org/project/views

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 mindestens diese Version zu verwenden.

Arbeitsschritte

Am einfachsten ist die Installation von Modulen mit Drush. Da eine Drush-Installation nicht die Regel ist, beschreibe ich die Arbeiten ohne die Verwendung von Drush. Und das sind die notwendigen Arbeitsschritte:

  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
  5. Data-Display zur Karte hinzufügen (via Views)

Schritt 1. Module und Libraries installieren, aktivieren und konfigurieren

Ich gehe 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“ gelten 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 Einstellungsseite 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 Geocoder“ 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 OpenStreetMap 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". Wir 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ässt 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.