Das ist das Ziel:
Eine Karte mit mehreren Layern zum An- und Ausschalten.
Benötigte Module:
- openlayers für die Ausgabe (zB mit Views)
- openlayers_geocoder 6.x-2.x-dev sehr praktisches Eingabe-Widget
- token seltsamerweise nicht erforderlich, aber von openlayers_geocoder benötigt
Der geocoder hat einen kleinen Bug, der beim Administrieren einen Fehler auswirft. Bitte ignorieren - es ist harmlos.
Beispiel
Ich will eine Karte meiner liebsten Pizzerien, wobei Restaurants, wo man draußen sitzen kann, anders gekennzeichnet sein sollen.
Mein total lebendiges Beispiel zeigt: ja, das ist hier höchst didaktisch angelegt: wir erfeuen uns erstmal an einer einfachen Mapansicht, dann basteln wir eine Multi-Layer-Map.
1a. Nodetyp restaurant anlegen mit diesen 4 Feldern:
1b. Das Feld für die Geolocation erzeugen
WKT steht für "well-known-text" - eine Längen/Breitenangabe.
Hier unter Autocompletion dies einstellen:
PS: Ein Klick auf Replacement Pattern zeigt weitere [token].
Schnell das Feld noch nach oben schieben:
2a. Ersten Node anlegen: /node/add/restaurant
hinter der Search address verbirgt sich ein chickes Ajax-Feld:
Dank der eingestellten Autocompletion werden die anderen Adressfelder automatisch ausgefüllt:
Wir sind neugierig und klicken auf Show WKT field:
WKT - Well known text (!) Klar :-)
Auf jeden Fall sind die Daten jetzt korrekt und sinnvoll erfasst - dank openlayers_geocoder.
2b. Weitere drei Nodes anlegen, davon auch welche mit Terasse !
Die Mühe muss man sich machen - sonst gibts nachher nix zu sehen !
3a. Nodeausgabe mit Map
Da muss man gar nichts tun. Das funktioniert sofort.
3b. Ausgabe als CCK-Feld:
Wäre dann genauso einfach: In einer View das Feld field_wkt_address mit Default Map wählen:
Hier tauchen auch alle später angelegten openlayers-presets auf. Unserer wird "restaurants" heißen.
4. Map-Preset ändern
Die openlayers-presets. Ändern geht nicht - nur klonen und ändern: admin/build/openlayers/presets
Ich möchte ein Preset haben, dass 200px hoch ist, kleine Navigation und einen guten Startzoomwert hat:
Klick bei Default Map auf Duplizieren
General Information
- Name: minimap
- Höhe: 200px
Center & Bounds
- Zoom-Level: 6
Behaviours
- PanZoom statt PanZoomBar
- Layer Switcher aus
Jetzt sollte die Karte anders aussehen...
Die Multi-Layer-Map
Konzept in openlayers: Alles sind Layers.
- Die Karten selbst sind die Base Layers.
- Alles, was draufgemalt wird, sind die Overlay Layers. Das können außer Treffern (zB unsere Restaurants) auch Regionen oder Striche(?) sein.
Grobes Vorgehen:
- Für jede Treffergruppe muss eine View (oder Ableitung) erzeugt werden mit "Typ" OpenLayers Data. In unserem Fall zwei: eine für Restaurants mit und eine ohne Terasse.
- In einem (neuen) OpenLayers-Preset diese jetzt erschienenen Overlay Layers aktivieren
- In einer weiteren View (oder Ableitung) mit "Design" (nicht Typ!) OpenLayers Map dieses Preset als Ausgabe wählen
- Voilà !
1. View "restaurants" mit zwei Layern (mit/ohne Terasse)
So sollte es aussehen:
- Typ ist nicht attachment oder block, sondern OpenLayers Data
- Design muss ebenfalls OpenLayers Data sein (was anderes gibts auch nicht)
- Die Einstellung verlangt nach einem Adressfeld - erstmal anlegen
- Unser field_wkt_address mit Format WKT Value und (später interessant) den Node-Titel anlegen
- Data Sources so einstellen:
Eine weitere OpenLayers Data Ableitung für Restaurants ohne Terasse anlegen (Filter: Inhalt Terasse = 0) und
speichern !!!
2. OpenLayers Preset "Default Map" duplizieren und ändern:
General Information:
- Name: Restaurants
Center & Bounds:
- Sinnvollen Ausschnitt wählen
Behaviours:
- Layer Switcher aktivieren !!!
Mayers & Styles:
- beide Overlay layers aktivieren (Checkbox 1 und 2)
3. Diese Map jetzt durch eine View ausgeben
Neue Ansicht/Ableitung vom Type Seite erzeugen (dürfte auch Block/PanelPane sein) und als Design OpenLayers Map wählen:
Map-Preset Restaurant als Ausgabe festlegen: 
Pfad einstellen (zB "restaurants")
Speichern und testen !
4. Unterschiedliche Styles für die Layer definieren
In OpenLayers Styles den Basic default style duplizieren und ändern:
- Name/Titel: Rote Kringel
- pointRadius: 8
speichern
Diesen neuen Style duplizieren und ändern:
- Name/Titel: Grüne Kringel
- fillColor: #33dd33
- strokeColor: #11aa11
speichern
5. Styles zuweisen
Im Restaurant-Preset die Layers & Styles so einstellen:
- Aktiviert (Enabled) bedeutet: Layer ist Teil der Map
- Activated: Layer wird angezeigt
- In Switcher: Layer kan an/ausgeschaltet werden
Speichern und Testen - man sollte diesen Switcher sehen:
Der Switcher stellt als Layer-Titel die Titel der Restaurant-Views dar:
- Titel "mit Terasse" und "ohne Terasse" angeben.
Eigentlich sollte das reichen, aber bei mir hats immer noch nicht funktioniert. - Quirk: die Standard-Ansicht der View muss irgendeinen Namen bekommen - dann ging es wenigstens bei mir...
Jetzt sollte das Ergebnis aussehen wie die Karte oben im Beitrag.
Weiterführende Blogbeiträge
- Klick auf die Kringel sollen zum Node springen
- Heranzoomen auf das Suchergebnis
- Style: Eigene Grafiken statt Kringel
- Pizzerianame im Style
- Grafik des UI ändern
Vielen Dank für die Aufmerksamkeit !
