Interaktive Karten mit Leaflet

Für Drupal existieren zwei Optionen um eine interaktive Karte einzubinden: 

  • Geofield mit Geofield Google Maps und Geocoding

  • Geofield mit Leaflet OSM (Open-Street-Maps)

Hauptgrund für die Umstellung von Google Maps auf Open-Street-Maps: 

Google hat eine grundlegende Änderung der Richtlinien für die Nutzung seiner Online-Dienste eingeführt, einschließlich seines beliebten Mapping-Dienstes Google Maps und aller zugehörigen APIs, um standortbezogene Informationen einzubetten oder zu generieren. (Die Nutzung eines API Keys ist ab einer bestimmten Anzahl an Zugriffen kostenpflichtig für den Besitzer des API Keys.) 

Die Entscheidung über Google Maps oder OSM bleibt jedem selbst überlassen.

Leaflet mit OSM

Vorteil: kostenlos, ohne API Key

Nachteil: keine (Google-)Suchfunktion bei der Eingabe

 

Leaflet mit OSM

Für die Einrichtung von Leaflet werden folgende Drupal-Module benötigt:

Nach der Installation auf dem Server über composer können die Module unter Manage > Extend aktiviert werden.

Im Folgenden werden die nötigen einzelnen Schritte vorgestellt, um eine interaktive Karte mit Leaflet einzurichten. Das Ziel ist eine Karte mit allen erfassten (Fund-)Orten von Objekten zu erstellen. Die Karte “Fundorte” ist ein Beispiel aus der Paläontologischen Sammlung (http://objekte-im-netz.fau.de/palaeo/fundorte_flurnamen). Der Kern der Erfassung liegt auf dem Sammlungsobjekt, bei diesem werden geographische Koordinaten und Ortsdaten erfasst, an denen ein Sammlungsobjekt gefunden wurde. Die Karte wird über eine View generiert und zeigt alle Fundorte von Sammlungsobjekten an. Eine Vernetzung von Ort und Objekt.

palaeo

Modellieren im Pathbuilder

Im Beispiel sind Sammlungsobjekte der Schwerpunkt der Erfassung. Die Erfassungsmaske (Sammlungsobjekt, Hauptmaske) besitzt Pfade, bei denen geographische Orte (wie Fundort) festgehalten werden. Diese Pfade sind als Entity Reference modelliert und verweisen auf die zusätzliche Eingabemaske der "Standort/Fundort".

fundort

fundortmaske

Was wird an Pfaden/Gruppen benötigt für die Karte?

 

  • Eine Eingabemaske für geographische Orte (Beispiel: “Standort/Fundort”)

  • Ein Pfad in der Erfassungsmaske der Objekte, der auf Orte zeigt/verweist. (Beispiel: “Fundort”)

  • Ein Pfad in der Erfassungsmaske der geographischen Orte, der die Koordinaten liefert (Beispiel: “Geo-Koordinaten”) und als Datenquelle für Leaflet dient.

  • Ein Pfad in der Erfassungsmaske der geographischen Orte, der zur Anzeige der Objekte genutzt wird und der Filterung der View benötigt wird (Beispiel: “View Fundort von Objekt”). In diesen Pfad werden keine Daten direkt eingegeben, sondern stellt lediglich die Verbindung zum bereits erfassten Objekt dar und dient der Anzeige/Display der Daten.

fundort_pb

Hinweis zum Beispiel-Pathbuilder: Der Pathbuilder besteht aus mehrere Eingabemasken: Sammlungsobjekt (Hauptmaske) und Standort/Fundort (eine der zusätzlichen Masken/ Nebenmasken/ Datenpools). Die View wird ausgehend vom Bundle Standort/Fundort (also dem Ort) angelegt. Falls der eigene Pathbuilder die Orte nicht über eine zusätzliche Maske erfasst, sondern direkt über ein Subbundle in der Objekteingabemaske, kann es zu Problemen kommen beim Erkennen des Geofield-Feldes in der View. (Dann muss eine zusätzliche Maske für die Anzeige nachmodelliert werden.)

Der Pfad “Geo-Koordinaten” ist folgendermaßen konfiguriert:

geo-koord

  • Als Field type (“Type of the field that should be generated”) muss Geofield ausgewählt werden.

  • Die Anzeige (“View”) wird über “Type of formatter for field” festgelegt: Dort wählt man   “Leaflet Map” aus.

  • Für den Edit-Modus kann je nach Eingabevorliebe ein Form Widget ausgewählt werden. Dieser wird unter „Type of form display for field“ festgelegt. Hinweis: Das Widget „Geofield Map“ im Screenshot kann erst ausgewählt werden, wenn das Modul Geofield Map vorher installiert wurde. Hier zwei Beispiele für die Anzeige unter Edit beim Erfassen eines Fundorts: 

    • Latitude/Longitude:

    •  lat_long_edit

    • Geofield Map (Wir nutzen diese Option, da man dadurch den Standort sowohl als Lat/Long als auch direkt in der Karte ansteuern/anklicken kann.): karte_edit

Der Pfad “View Fundort von Objekt” ist die Rückverbindung zu den Sammlungsobjekten in der Sammlungsobjektmaske, die an diesem Ort entstanden/gefunden/etc. wurden und eindeutig über die Inventarnummer identifiziert wird. Rückverbindung bedeutet, dass in der Maske “Standort/Fundort” ein Pfad modelliert wird, der von S39_Location über die Inversen zum Sammlungsobjekt (S1_Collection_Object) modelliert wird und dann ein existierender Pfad wie Inventarnummer angehängt wird.

inventarnummer

fundort

Hier der komplette Anzeige-Pfad:

view

Hier die Konfiguration zum Anzeige-Pfad:

view path config

Einrichten der View

Über  Structure -> Views -> Add  new View muss eine neue View angelegt werden. 

Bei View Settings und Show: „Wisski Entitiy“ auswählen. Unter page settings bei „Create a page“ einen Haken setzen. Anschließend unter page display settings das gewünschte Anzeigeformat Leaflet Map auswählen und auf Save and edit klicken.

add view

Als erstes sollten die Filterkriterien ausgewählt werden.

1. Bundle festlegen:

Add -> Haken bei Bundle/Group -> Add and configure filter criteria -> auswählen: Operator “Is equal to” -> Haken setzen bei betreffendem/r Bundle/Group -> Apply

Wir benötigen das Bundle “Standort/Fundort”.

2. weiteres Filterkriterium: View Fundort von Objekt muss ausgefüllt sein:

Add -> Haken bei “View Fundort von Objekt” -> Add and configure filter criteria -> auswählen: Operator: “Is not equal” -> Value: XYZ -> Apply.

(Value XYZ ist ein “Hack”, um alle Einträge zu bekommen.)

Anschließend sollten die Felder/Fields hinzugefügt werden. Alle Felder müssen aus demselben Bundle/derselben Group stammen!

Wichtig: Das Feld “Entity ID” sollte niemals entfernt werden! 

Es kann aber versteckt werden, indem man das Feld auswählt und einen Haken

setzt bei “Exclude from display”!

Es werden die Fields “WissKI Entity:Title”, “View Fundort von Objekt” und “Geo-Koordinaten” benötigt. Diese analog zu den Filterkriterien über Add suchen und hinzufügen.

Die Standardeinstellungen beim Field “Geo-Koordinaten” können beibehalten werden. Wichtig hierbei ist, dass WKT als Output Format gesetzt ist.

add geofield

Das Field  “View Fundort von Objekt” kann beliebig konfiguriert werden. Falls auf der Karte direkt ein Link auf das Objekt am geographischen Ort existieren soll, können folgende Einstellungen genutzt werden:

view field config

Falls es mehr als ein Objekt an einem Fundort gibt, werden diese dann ab einer Höhe von 75px mit einem Read more ausgestattet. Wie mehrere Objekte aufgelistet werden, kann unter Multiple field settings beeinflusst werden. Per Default werden diese mit Komma getrennt hintereinander aufgelistet.

multi field settings

Leaflet-Settings

Hinter Format Leaflet Map gelangt man mit einem Klick auf die Settings.

Leaflet erkennt nach Auswahl der Pfade unter Fields automatisch den Pfad, der als Geofield konfiguriert wurde und dann als Data source für die Leaflet Karte genutzt wird. 

In Title Field wird der Inhalt angezeigt, der beim Hovern sichtbar werden soll. Stellt man dort WissKI Entity: Title ein, so wird das Titlepattern des ausgewählten Bundles (hier: Standtort/Fundort) angezeigt.

Im Description Field wird der Textinhalt über dem Fähnchen/Icon ausgewählt, der angezeigt wird, wenn auf das Icon geklickt wird und sich dann als “Popup” öffnet. 

Unter Leaflet Map wird der Kartentyp angezeigt. Standardeinstellung ist “OSM Mapnik”.

leaflet settings

Hinweis: Die Topographische Karte (OpenTopoMap) ist über ein weiteres Modul Leaflet more maps  (https://www.drupal.org/project/leaflet_more_maps) hinzugefügt und als patch dem Modulcode hinzugefügt worden. 

Weitere Konfigurationsoptionen bei Leaflet Settings:

  • Map Height: Gesamthöhe der Karte in Pixel
  • Reset Map Control: Reset Button hinzufügen
  • Map Center: Ausgangsstandpunkt/ Koordinaten für die Karte
  • Zoom: Voreingestellter Zoom beim Laden der Karte
  • Map Icon: Hier kann ein eigenes Icon/Fähnchen eingestellt werden, indem eine Url auf eine Bilddatei hinterlegt wird
  • Von Icon Size bis Popup Anchor: Zusätzliche Einstellungen zum Icon
  • Marker Clustering: Icons/ Fähnchen, die sich in einem Gebiet befinden, werden gruppiert. Das Gebiet wird dann farblich hervorgehoben und mit der Anzahl der Icons versehen. 

 

Weitere Einstellungen:

  • Pager: Display all items

  • Unter Advanced muss nur noch Caching auf none eingestellt werden. → Dadurch benötigt zwar die View länger zum Laden (vor allem bei eingeloggten Usern), aber es gibt kein Problem in der Anzeige nach Cache Clear (Icons nicht sichtbar/verschwinden nach Clear Cache)

  • Unter Page settings kann eingestellt werden:

    • wie der Path (URL der View) heißen soll

    • unter Menu wird eingestellt, ob die View in das Hauptmenü als Menüpunkt aufgenommen wird: Dafür muss Normal menu entry und Main navigation als Parent ausgewählt werden.

    • wer hat Access auf die View (Dies ist natürlich situationsabhängig.)

Überblick zur Leaflet-View:

view

Fertige Karte mit Anzeige der (Fund-)Orte und über dem Fähnchen/Icon der Link zum Objekt:

karte ufg