Heute sind Karten auf Webseiten mehr als nur eine Ausschnitt aus dem Stadtplan, der als Anfahrtskizze für Kunden dient. Auf ihnen lassen sich Standortinformationen visualisieren. Und so können Karten einen schnellen Überblick zu vielfältigen Themen liefern, z.B. als Übersicht von Restaurants, Tankstellen oder Standorte von Carsharing-Autos. Wer so etwas auf seiner eigenen Webseite realisieren möchte, findet in diesem Tutorial eine Anleitung, wie das mit dem Open-Source CMS Drupal geht. Die Beschreibung basiert auf Drupal 7.

Da viele Module aber auch für Drupal 6 verfügbar sind, läßt sich das Ganze auch damit realisieren.

Warum OpenLayers?

Es gibt für Drupal diverse Module, um GoogleMaps mit eigenen Inhalten zu füllen und auf der eigenen Webseite einzubinden. OpenLayers ist jedoch bei weitem am flexibelsten und bietet neben vielfältigen Gestaltungsmöglichkeiten auch Kartenalternativen zu GoogleMaps, wie z.B. Bing, OpenStreetMaps, MapQuest und andere. Der Nachteil dieser vielfältigen Optionen und Flexibilität: Man muss etwas mehr Aufwand betreiben, um eine funktionsfähige Karte zu bekommen. Hat man das Prinzip aber erstmal verstanden, ist es gar nicht mehr schwer. Genau dabei soll dieses Tutorial helfen.

Vorkenntnisse

Man sollte zumindest soweit mit Drupal vertraut sein, dass man bereits selber Module installiert und schon mal einen eigenen Inhaltstypen und View erstellt hat. HTML-, CSS- oder PHP-Kenntnisse sind nicht notwendig, schaden aber nicht. ;-)

Benötigte Software

Neben einer lauffähigen Drupal7-Installation benötigt man die folgenden Softwarepakete. Mit Ausnahme der geoPHP-Library findet man alles auf der Drupal-Homepage drupal.org.

• OpenLayers https://drupal.org/project/openlayers
• OpenLayers KML Layer https://drupal.org/project/openlayers_kml_layer
• OpenLayers Proximity https://drupal.org/project/openlayers_proximity
• OpenLayers Locator
• Geofield https://drupal.org/project/geofield
• Geofield Map
• Geocoder https://drupal.org/project/geocoder
• geoPHP https://drupal.org/project/geophp und die geoPHP-Library von https://github.com/phayes/geoPHP
• Proj4JS https://drupal.org/project/proj4js
• Libraries https://drupal.org/project/libraries
• Chaos Tools https://drupal.org/project/ctools
• Views https://drupal.org/project/views

Sonstige Voraussetzungen

Die aktuelle Version von Open Layers (7.x-2.0-beta7) erfordert PHP 5.3, mit PHP 5.2 läuft sie nicht mehr!

Arbeitsschritte

1. Die oben aufgeführten Module installieren und aktivieren. Die Library geoPHP von Github herunterladen und per FTP in das Libraries-Verzeichnis von Drupal kopieren (i.d.R. ist das ../sites/all/libraries).
2. Einen neuen Inhaltstyp mit einem Feld für die Geodaten erstellen
3. Die gewünschten Data-Overlay-Layer in View erstellen
4. Die Karte konfigurieren
5. Data-Display zur Karte hinzufügen (via Views)

1. Module installieren, aktivieren und konfigurieren

Wir gehen mal davon aus, dass bekannt ist, wie das mit der Modulinstallation geht. Falls nicht, gibt es hier eine Anleitung: https://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 “OpenLayers external source” den Pfad zur OpenLayers Library eintragen, derzeit ist das http://openlayers.org/api/2.12/OpenLayers.js . Man kann die Library zwar auch intern installieren, das hier ist aber der bequemere Weg.
  
• OpenLayers Proximity: Unter “/admin/structure/openlayers/proximity” die Maßeinheit auf “Kilometer” einstellen
• 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/).

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
  
• 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 “Geofield Map” setzen.
  
  
   
• Anschließend auf das kleine Zahnrad rechts klicken und auf der folgenden Seite die Karte einstellen. Die Kartenbreite setzen wir auf 100% und die Höhe auf 300px. Die übrigen Angaben sind optional. Wichtig ist noch der Zoomfaktor, damit der Kartenausschnitt die passende Größe erhält - schließlich will man den Marker nicht auf einer Weltkarte sehen.
  
• Hat man die gewünschten Einstellungen vorgenommen, auf “Aktualisieren” klicken und 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) = 50.065073 und Longitude (Längengrad) =8.659744. (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 Google-Karte mit einem Marker an den eingetragenen Koordinaten
  

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. ;-)

Hinweis: Wenn man anstelle der Geokoordinaten eine Anschrift (also Straße, Hausnummer und Ort) eingeben will und die Geokoordinaten automatisch berechnet werden sollen, so ist dies auch möglich. Das soll an dieser Stelle aber nicht beschrieben werden.

3. Data-Overlay-Layer in View erstellen

Jetzt müssen wir zunächst einen View erstellen, der uns den Layer bereitstellt, der später auf unserer Karte eingeblendet werden soll. 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 später auf der Karte im Popup des Markers anzuzeigen.
• Jetzt noch den Filter einstellen, zumindest "Inhalt: <Inhaltstyp mit Geofield>" und "Inhalt: veröffentlicht (Ja)". Für die Umgebungssuche braucht es dann noch das Feld "Entfernung: Great-circle".
  Diesen Filter hervorheben, so dass Seitenbesucher ihn benutzen können und folgende Einstellungen vornehmen:
  
• Als nächstes fügen wir eine neue Anzeige (Klick auf den Button “+ Hinzufügen” im Kopf des Views) vom Typ "OpenLayers Data Overlay" hinzu. Hierbei unbedingt einen aussagefähigen Namen geben, damit man ihn später in den Openlayers leicht wiederfindet. Das Format dieser Anzeige auf "OpenLayers Data Overlay" einstellen
  
• Unter Format >> Format >> Einstellungen das Feld "Map Data Sources" auf "WKT" stellen und unter "WKT Field" das Feld mit den Geodaten (hier: “Geofield Standort”) auswählen. Optional können noch Titel und Beschreibung eingestellt werden, für die korrekte Funktionsweise ist das aber nicht erforderlich.
  
• Die Felder 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.

• Zunächst geht man auf "Struktur >> OpenLayers >> Ebenen". Dort findet man alle derzeit verfügbaren Layer, auch den per View in Schritt 3 erzeugten. Mit einem Klicke auf den “Bearbeiten”-Link ganz rechts öffnet man die Ebene, um Einstellungen vorzunehmen.  In der Regel kann man die hier eingestellten Default-Werte übernehmen.
• Als nächstes geht man auf "Struktur >> OpenLayers >> Maps". Hier kann man entweder eine völlig neue Karte anlegen, eine von einer anderen Drupal-Seite importieren oder eine vorhandene duplizieren. Wie legen eine neue Karte an, dazu "+ hinzufügen" anklicken und auf der folgenden Seite die Karte konfigurieren.
• Bereich Infos: Hier werden einige Grunddaten eingegeben, mindestens den Titel der Karte (Map Title), Breite und Höhe (jeweils in Pixel, für die Breite kann auch der Werte "auto" gesetzt werden, die Karte füllt dann den gesamten verfügbaren Platz aus). Die übrigen Felder braucht man i.d.R. nicht.
  
• Unter "Center & Bounds” wird die Startansicht der Karte festgelegt, also Mittelpunkt und Zoomlevel (von 2 = komplette Weltkarte bis 18 = maximale Vergrößerung, ein Wert von 6 zeigt in diesem Beispiel fast ganz Deutschland an).
  
• Unter “Layers & Styles” stellt man zunächst die Projektionsart ein. Nicht jede Einstellung zeigt das gewünschte Ergebnis. Bewährt hat sich z.B. die Karten-Projektion EPSG:3857 und die Display-Projektion EPSG:4326. Als nächstes wählt man den Base Layer. Hier ist das "Google Maps Normal". Mehrere Base Layer können hier aktiviert werden, später kann man diese auf der Karte umschalten, praktisch, wenn man sich zunächst ein Bild vom Aussehen der verschiedenen Base Layer machen möchte. Im laufenden Betrieb sollte man dann aber nur noch den Layer aktiviert lassen, mit dem die Karte arbeiten soll.
  
• Zusätzlich wählt man jetzt noch mindestens einen Overlay-Layer. Wir wollen natürlich unseren in Schritt 3 per View erzeugten "OL Test Standorte - OL test Standorte" verwenden. Das Häkchen bei "In Switcher" sorgt später dafür, dass die Besucher auf der Karte selber diesen Layer an- und ausschalten können. Unter Darstellung kann man den gewünschten Marker auswählen. Standardmäßig gibt es sechs verschiedene Marker. Man kann aber auch eigene erstellen und hinzufügen. Wie das geht, dazu kommen wir gleich.
  
• Unter Verhaltenseinstellungen 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 “Center&Bounds” voreingestellt haben.
  
• Der Punkt "Anzeigen" enthält keine Einstellmöglicheiten sondern lediglich den Hinweis, dass man noch einen View braucht um die Karte anzeigen zu können.
• Zum Abschluss die Karte speichern.

Eigene Marker auf der Karte verwenden

Dazu geht man auf "Struktur >> OpenLayers >> Stile". Dort kann man selber erstellte Grafiken über “+ Hinzufügen” als Marker definieren. Die besten Ergebnisse erzielt man, wenn man die Grafiken mit einem Bildbearbeitungsprogramm auf die richtige Größe bringt und anschließend per Upload in einem Ordner im Drupal-Filesystem lädt, z.B. ../sites/default/files/logos/. Hat man das getan, kann man die Grafik unter “Style Properties >> external Graphic” mit Dateinamen und dem relativen Drupalpfad eintragen. Unter “Image  style” wählt man “none (original image). Wichtig ist noch die korrekte Angabe des pointRadius. Dieser sollte exakt die Hälfte der Breite des Markers betragen. Bei einem 30 Punkte breiten Marker also 15px. Der Marker steht jetzt in der Auswahl zur Verfügung und kann auf beliebigen Kartenlayern eingesetzt werden.

5. Data-Display zur Karte hinzufügen (via Views)

Jetzt sind wir fast fertig. Es fehlt nur noch eine Seite oder ein Block der die Karte künftig darstellen wird.

• Dazu gehen wir zurück zu dem in Schritt 3 erstellten View. Diesem fügen wir jetzt eine Seite (oder einen Block) hinzu.
• Auf “+ Hinzufügen” klicken und “Seite” auswählen. Das Format für diese Anzeige auf "OpenLayers Map" umstellen. Achtung: Nur diese Ansicht umstellen, dazu die Einstellung "Den Ansichtstyp page (übersteuern)" wählen und keinesfalls "Alle Anzeigen (außer überschriebenen)" wählen!
  
• Unter “Format >> Format >> Einstellungen” die Karte auswählen, die wir in Schritt 4 erstellt haben.
  
• Jetzt noch einen Pfad für die Seite eintragen, den View speichern, fertig.

Alle Nodes vom Inhaltstyp Standort, die im Geofield eine Breiten- und Längenangabe haben, werden jetzt auf der Karte mit einem roten Marker dargestellt. Hier zusätzlich mit dem hervorgehobenen Filter für die Umkreissuche: