Custom Pins für OpenLayers in Drupal 7

Zuerst ist hier eine kurze Zusammenfassung der bisherigen Beiträge.

In "Karten mit OpenLayers in Drupal 7" ging es darum, eine einfache Karte mit einem Standard-Pin als Feld in einem Node zu hinterlegen und für Webseitenbesucher darstellen zu lassen.

"Dynamische Karten mit OpenLayers und Views in Drupal 7" befasste sich damit, mit einem View und einigen Nodes eine Karte zu erzeugen, die alle Geo-Informationen der Nodes als Pins auf einer einzigen Karte darstellt und für diese Pins je ein  Pop-Up mit entsprechendem Nodeinhalt generiert.

Nun widmen wir uns der verbesserten und angepassten Darstellung unserer Karten.

Dieser Beitrag bezieht sich auf die 7.x-2.0-beta8 Version des OpenLayers Moduls.

Es sollen 2 verschiedene Nodetypen auf einer Karte angezeigt werden, mit unterschiedlichen von uns erstellten Pins (da ich kein großer Grafiker bin, habe ich 2 einfache X-Pins erstellt).

Ergebnisvorschau

Zuerst muss ein zweiter Inhaltstyp angelegt werden, am besten mit dem selben Feld für Geo-Informationen wie im ersten und dieser neue Typ muss in dem View, aus den vorangegangenen Beiträgen, in den Filtereinstellungen hinzugefügt werden.

Ich habe auf meinem System je Inhaltstyp zwei Nodes angelegt und alle mit unterschiedlichen GeoCodes versehen.

Nun brauchen wir verschiedene Pins, bei denen ich meist eine Bildgröße von 32x32 Pixeln verwende. Sind diese Pins vorhanden müssen wir unter "Struktur" > "OpenLayers" > "Styles" einen neuen Stil anlegen, Stile sind in OpenLayers unsere Pins.

Neuen Stil (Pin) hinzufügen

Auf der folgenden Konfigurationsseite ist ein Großteil selbsterklärend, daher gehe ich nur auf die wichtigsten Punkte ein.

Zunächst müssen der Name des Stils und ein Pfad zum eigenen Pin eingegeben werden. Was es mit dem " ${type} " auf sich hat, erkläre ich in ein paar Minuten.

dynamischer Pfad zum eigenen Pin

Danach müssen wir OpenLayers noch sagen, welche Größe unser Pin hat und wo das "Zentrum" des Pins sein soll. Dieser Versatz definiert welcher Pixel des Pins auf dem GeoCode auf unserer Karte liegen soll.

Für meine Pins verwende ich wie schon angesprochen eine Größe von 32x32 Pixeln und da mein gewünschtes Pin-Zentrum in der Mitte der Grafik liegt einen Versatz von je -16 Pixeln.

Angabe der Bildmaße und des Versatzes

Momentan wird so leider noch kein Pin auf unserer Karte angezeigt, da wir noch definieren müssen was unser Token " ${type} " als Text enthalten soll. Dazu öffnen wir die Einstellungsseite unseres Kartenviews und fügen als weiteres Feld im OpenLayers Data Overlay den Nodetypen hinzu, da ich je nach Nodetyp einen anderen Pin auf der Karte sehen möchte. Danach öffnen wir die "Format" > "Settings" und stellen sicher, dass der Token ${type} ein Häkchen hat.

OpenLayersDataOverlay Einstellungen

Damit bekommen wir jetzt für den Bildpfad zu unserem Pin je nach Nodetyp der auf der Karte dargestellt wird verschiedene Dateinamen, welche OpenLayers einzubinden versucht, wie z.B. "marker-nodetyp1.png" und "marker-nodetyp2.png".

Als letztes müssen wir in die Einstellungen unserer OpenLayers Map unter "Struktur" > "OpenLayers" > "Maps". Da ich die Default Map verwende überschreibe ich einfach die Einstellungen dieser.

Auf der Konfigurationsseite "Struktur" > "OpenLayers" > "Maps" > "Layers & Styles" müssen wir sicherstellen, dass unser View-"OpenLayers Data Overlay" freigegeben und aktiviert ist und unter den Style-Einstellungen unser angelegter Stil ausgewählt ist, meinen Stil habe ich Geolocation genannt.

Style-Einstellungen

Nun noch die Einstellungen speichern, Caches leeren und dann sollte unser Ziel erreicht sein.