Drupal 8 "Leaflet" - Interaktive Karten erstellen

veröffentlicht von gülmez am Fre, 10.08.2018 - 14:09

Leaflet Logo In diesem Tutorial soll gezeigt werden wie man mit Hilfe des "Leaflet"-Moduls und weiteren Modulen mehrere Adressen auf einer Karte visualisieren kann.

 

Karte mit Leaflet erstellt.
Mit Leaflet generierte Karte

Zunächst laden wir per Composer das Leaflet Modul herunter.

composer require 'drupal/leaflet'

Dadurch werden folgende Module (mit den Dependencies) und Libraries heruntergeladen:

  • Leaflet (Modul)
  • Geofield (Modul) *
  • GeoPHP (Library)
  • Leaflet Views (Modul)

*Wichtiger Hinweis: Zum Erstellungszeitpunkt dieses Artikels wurde beim Download durch Composer die Version 8.x-1.0-beta4 vom Geofield-Modul heruntergeladen. Diese beinhaltet nicht die Funktion die wir für dieses Tutorial benötigen. Ich musste also nachträglich die Dev-Version des Moduls installieren (8.x-1.x-dev, updated 18 May 2018).

Als nächstes laden wir per Composer das Geocoder Modul herunter. Das Modul dient dazu aus Adressen in Textform Geo-Daten zu generieren.

composer require 'drupal/geocoder'

Dadurch werden folgede Module heruntergeladen:

  • Geocoder (Modul)
  • Geocoder Field (Modul)
  • Geocoder Geofield (Modul)

Anschließend müssen die soeben heruntergeladenen Module aktiviert werden.

Um eine Karte zu erstellen benötigen wir zunächst einen Inhaltstypen der die Standort-Daten speichert (Adresse, Geo-Koordinaten, etc.) und einen View der die Standorte auf einer Leaflet-Map anzeigt.

1. Erstellen eines Inhaltstypen "Standort":

Wir benötigen für unser Tutorial nur zwei Felder. Das erste Feld ist ein normales Textfeld in das die Benutzer im Klartext die Adresse eingeben. Das zweite Feld ist vom Typ "Geofield".

Inhaltstyp "Standort"
Inhaltstyp "Standort"

Das Geofield dient dazu aus dem Adressen-Feld nutzbare Geo-Daten zu generieren. Die Daten aus diesem Feld dienen nämlich als Grundlage für die Darstellung in der noch später zu erstellenden View.
Wir müssen also im Geofield noch die Einstellung vornehmen welches Feld als Quelle dienen soll. Dies nehmen wir an der Stelle "Geocode from an existing field" vor. Dort wählen wir das erste Feld "Adresse" als Quelle.

Geofield Einstellungen
Einstellungen für das Geofield

Eine weitere wichtige Einstellung für das Feld sind die auszuwählenden "Geocoder plugin(s)". Hier wird der Dienst ausgewählt der die Formatierung in Geo-Daten übernimmt. Es können auch mehrere ausgewählt werden. Der erste Geocoder der ein Ergebnis liefert wird übernommen. Zu beachten ist das manche Dienste einen API-Key benötigen. In diesem Tutorial haben wir den Geocoder von OpenStreetMap genutzt.

Geocoder Einstellungen
Geocoder Plugins

Nun sollten noch ein Paar Beispieldaten angelegt werden damit auf der noch zu erstellenden Karte genügend Standorte angezeigt werden.

2. Erstellen der View

Wir erstellen nun einen View der die Nodes vom Typ "Standort" auf einer Karte anzeigen soll. Dazu wählen wir bei ersten Einstellungen (View Settings) folgende Einstellungen:

View der Standorte
View der Standorte

Im nächsten Schritt erstellen wir ein neues Display vom Typ "page" und vergeben noch einen Pfad bei den Page Settings.

Bei den Feldern benötigen wir unbedingt unser Feld vom Typ "Geofield" welches die Geo-Daten unserer Standorte enthält (field_geo_daten, s.o.) und fügen dieses unserer View zu. Weitere Konfiguration an dem Feld brauchen wir nicht vorzunehmen.

Als letzte und wichtigste Einstellung ändern wir das Format des Displays und wählen dort statt der standardmäßigen "Unformatted list" das Format "Leaflet Map".

Einstellungen für die View
Einstellungen für die View

Damit wäre der View eigentlich fertig. Ein Blick in die Settings des Formats Leaflet Map gibt uns Hinweise wie man die Karte noch weiter nach seinen Wünschen anpassen kann.

So kann man z. B. im Feld "Description Field" festlegen welches Feld als Grundlage für einen Popup bei einem Klick auf die  Icons dienen soll.

Weitere sinnvolle Einstellungen sind z.B. die initiale Zoomstufe der Karte, Höhe der Karte, ein eigenes Icon oder das gewünschte Kartenmaterial (voreingestellt ist hier OSM Mapnik).

Mit dem Zusatzmodul "Leaflet More Maps" kann man das Kartenmaterial erweitern und z.B. Google Maps, Bing Maps u.v.a. als Grundlage nutzen.
 

 

 

 

 

 

 

Neuen Kommentar hinzufügen