Gutes aus Jever
von Matthias Eilers
Teil 3: Regionale Unternehmen in der Karte filtern
Nachdem ich Euch am 31. März in Teil 1 das Projekt #gutesausjever vorgestellt und am 04. April in Teil 2 mit Euch zusammen eine entsprechende Branchenliste aufgebaut habe, geht es nun in Teil 3 um die Darstellung dieser Daten in einer filterbaren Karte.
Schritt 1: con4igs/maps vorbereiten
In Teil 2 haben wir con4gis/data installiert. Der Baustein hat eine Abhängigkeit auf Maps, sodass alles was wir für den heutigen Teil benötigen bereits installiert sein sollte. Das heißt wir können direkt in das con4gis Dashboard gehen und mit dem Stern diesmal den Kartenbaustein favorisieren. Eure Contao Navigation sollte danach so aussehen:
Die Maps Bausteine sind schon mal da. Wir werden uns jetzt die Zeit nehmen und unsere Branchenkarte von Grund auf aufbauen. Wir beginnen mit dem Backend-Geopicker, den wir für das Setzen der Standorte in der Datenerfassung benötigen.
Aber vorab noch ein wichtiger Hinweis: Interaktive Karten kommen nur in Ausnahmefällen vom eigenen Webprojekt. Sie müssen in der Regel von zum Teil sehr mächtigen Servern bereitgestellt werden. Gleiches gilt für eine weltweite Suche oder für das Routing. Es gibt viele Kartendienste und con4gis stellt an den entsprechenden Stellen verschiedenste Lösungen bereit. Die Regeln zur Nutzung dieser Server sind dabei immer zu beachten. Auch um eine gute Lösung zum Thema Datenschutz anbieten zu können, bieten wir mit con4gis.io eigene Kartendienste an, die Ihr schnell, einfach und zum Teil kostenfrei nutzen könnt.
Sofern Ihr con4gis.io nutzen möchtet, könnt Ihr im Dashboard unter Einstellungen Euren API-Key eintragen. An den Stellen, an denen Ihr die Wahl zwischen con4gis.io oder anderen Diensten habt, werde ich im Folgenden einen Hinweis geben. Eure Branchenkarte kann auch ohne con4gis.io wunderbar funktionieren.
Schritt 2: der Backend Geopicker
Der Geopicker im Backend kann wie jede andere Karte konfiguriert werden. Das ist notwendig, da der Einsatz dieses Werkzeugs unterschiedlich sein kann. In den meisten Fällen braucht man aber eine Karte und eine Suche. Beides können wir schnell realisieren.
Beginnen wir mit der Basiskarte.
Schritt 2.1: Die erste Basiskarte
Ihr wechselt in das Backend-Modul Basiskarten und legt dort einen neuen Datensatz an. Bspw. so:
Wie Ihr hier in der Anbieter-Auflistung seht, gibt es zusätzlich zu con4gis.io viele weitere Anbieter für Basiskarten. Wir haben Euch immer den Link zu den Nutzungsbestimmungen in die Liste gepackt. Darüber könnt Ihr selbst prüfen, welchen Anbieter Ihr nutzen wollt.
Hinweis: Es gibt noch viel mehr Anbieter. In con4gis habt Ihr schon immer die Möglichkeit Kartenserver auch benutzerdefiniert zu hinterlegen.
Im Normalfall könnt Ihr die Grundeinstellungen benutzen. Nach dem Speichern habt Ihr Eure erste Basiskarte. Für unseren Geopicker brauchen wir jetzt noch ein Kartenprofil, in dem wir der Karte bspw. die Suchfunktion zuordnen können.
Schritt 2.2 Ein erstes Kartenprofil
Jetzt wechselt bitte in das Backend-Modul "Kartenprofile" und legt auch dort einen neuen Datensatz an, den wir bspw. "Backend Geopicker" nennen. Da wir uns jetzt erst einmal um den Geopicker kümmern wollen, werden wir die umfangreichen Konfigurationsmöglichkeiten größtenteils ignorieren. Für den Backend Geopicker brauchen wir zunächst ein paar Bedienelemente:
Wir entscheiden uns für die Kartensuche, die Steuerelemente zum Zoomen und den Vollbildmodus. Für die Kartensuche könnten wir noch einiges konfigurieren, nutzen aber vorerst den Standard:
Auch hier ist con4gis.io vorausgewählt. Genau wie bei den Basiskarten könnt Ihr andere Anbieter wählen (Suchengine). Apropos Basiskarten, prüft bitte ob die richtige Basiskarte eingestellt ist. Solltet Ihr nur eine Basiskarte haben, müsste das standardmäßig so aussehen:
Mehr müsst Ihr nicht tun für Euer Backend Geopicker Kartenprofil. Jetzt fehlt noch ein kleiner Schritt und Ihr könnt den Geopicker in der Datenerfassung nutzen.
Schritt 2.3 Den Backend-Geopicker setzen
Seit con4gis 7 wird der Backend-Geopicker in den globalen Einstellungen (Dashboard) gesetzt. Da dieser in immer mehr Contao Erweiterungen verwendet wird und so eine zentrale Abfrage des Profils einfach möglich ist. D.h. wir wechseln ins Dashboard und klicken auf Einstellungen und wählen dort unser Geopicker-Profil unter Karteneinstellungen aus:
Der Backend-Geopicker kann jetzt überall in Contao eingesetzt werden. Zum Beispiel in der Kartenstruktur, in den Inhaltselementen, in den Mitgliedereinstellungen, in den Events oder eben in der con4gis/data Datenerfassung.
Schritt 3: Positionen in der Datenerfassung setzen.
Wir wechseln also zurück in die [data] Datenerfassung (siehe Teil 2) und picken die Positionen in der Karte. Hier wieder am Beispiel Krabbenpalast, der heute mal zwischen Helgoland und Wangerooge liegt (Vollbild):
Das Ergebnis ist dann ein Koordinatenpaar:
Jetzt ist der Krabbenpalast geokodiert und wir können uns ab jetzt auf die Darstellung unserer filterbaren Branchenkarte konzentrieren.
Schritt 4: Eine Karte in die Website bringen
Unsere Geopicker Basiskarte können wir auch in unserer Hauptkarte verwenden. Für unsere Website-Karte erstellen wir aber ein neues Kartenprofil, da wir darüber dann auch den Kartenfilter aktivieren wollen. Im ersten Schritt könnt Ihr jetzt aber einfach das Profil "Geopicker Backend" kopieren und bspw. "Branchenkarte" nennen. Wir kommen dann später darauf zurück.
Jetzt wechseln wir erst einmal in das Backend-Modul "Kartenstruktur".
Schritt 4.1: Die Kartenstruktur aufbauen
Wir erstellen ein neues Element vom Typ "Karte (keine Lokation)". Dieses wird das Elternelement. Inhalte der Karte werden später darunter angeordnet. Jetzt erstellen wir erst einmal die Karte. Ggf. müsst Ihr die Kartengröße noch anpassen, das hängt vom Aufbau Eurer Website ab. Im Normalfall reichen die Grund- und Profileinstellungen für den nächsten Schritt:
So, jetzt haben wir eine Karte erzeugt, die mit unserem neuen Kartenprofil verknüpft ist. Jetzt brauchen wir diese Karte nur noch in unsere Website bringen.
Schritt 4.2: Die Karte als Inhaltselemente veröffentlichen
Jetzt wechseln wir in einen Artikel und verknüpfen die Karte über das Inhaltselement "Karte (con4gis/maps)". Hier wählt Ihr einfach nur die Karte aus und zwar so:
Jetzt sollte im Frontend die Karte wie im Geopicker dargestellt werden. Wir haben also eine Karte ohne Inhalt. Als nächstes wollen wir unsere Branchenverzeichnisse anzeigen. Wir wechseln wieder in die "Kartenstruktur".
Schritt 5: Inhalte in die Karte bringen
Das Prinzip sollte schnell klar werden: Alles was unterhalb der Karte eingebunden wird, wird wenn Parameter und Daten stimmen, in der Karte dargestellt. Wir erzeugen also ein neues Element und fügen dieses unterhalb unserer Karte ein. Wir wählen den Typ "
Also nur Typ und das/die Verzeichnis(se) auswählen, danach speichern. Jetzt fehlt noch eine wichtige Sache, damit der Krabbenpalast in der Nordsee auftauchen kann. Denn wir haben noch gar nicht gesagt, wie dieser aussehen soll.
Schritt 5.1: Einen Lokationsstil anlegen
Wir wechseln ins Modul "Lokationsstile" und erzeugen auch dort einen neuen Datensatz. Den nennen wir "Gastronomie" und wählen Darstellung als "Stern". Ihr könnt auch eigene Icons oder Fotos in die Karte bringen:
Den Lokationsstil müssen wir jetzt noch unter [data] Kategorien verknüpfen und danach zurück ins Frontend. Jetzt dürfte der Krabbenpalast in der Nordsee auftauchen. Das Popup ist auch automatisch gefüllt:
Tipp: Ihr könnt in der Karte (Kartenstruktur) die Funktion "Alle Lokationen anzeigen" aktivieren. Dann wird automatisch der bestmögliche Kartenausschnitt gewählt. Bei nur einem Standort ist das witzlos. Aber schon ab dem Zweiten Standort sinnvoll. So müsst Ihr Euch keine Gedanken machen, ob alle Eure Standorte in den Kartenausschnitt passen.
Wir haben nun unser Branchenverzeichnis in die Karte gebracht. Mit der Kartentechnik wäre jetzt noch sehr viel mehr machbar.
Ihr könntet im Kartenprofil weitere Funktionen aktivieren, die für Eure Anwendung wichtig sind. Ihr könnt beliebig viele Standorte hinzubringen. Wenn es viel wird, dann könnt Ihr um die "Performance" zu verbessern im Dashboard unter Einstellungen das con4gis Caching aktivieren.
Die Möglichkeiten die Ihr mit con4gis habt sind vielleicht erschlagend, aber jede davon hat Ihren Zweck.
Ich habe Euch für Teil 3 eine filterbare Karte versprochen und mit dem Kartenfilter möchte ich dann in diesem Teil jetzt abschließen.
Schritt 6: Den Kartenfilter integrieren
Der Kartenfilter ist eine der wenigen Komponenten die außerhalb der Karte liegen muss. Bevor wir den Filter als Frontend-Modul über die Karte setzen, müssen wir noch ein paar kleinere Anpassungen vornehmen. Das Wichtigste ist, wir brauchen Filterfelder. Als erstes legen wir ein neues Feld im Data Modul "Eigene Felder" vom Typ "Mehrere Checkboxen" an. Das Feld nennen wir "Gutes aus Wattstadt":
Wichtig sind die folgenden Feldeinstellungen:
Wir haben jetzt gesagt, dass das neue Feld in der Karte (Frontend) filterbar sein soll und das es eine Multicheckbox ist, über die man die beiden Optionen "Regional einkaufen" und "Betriebe per paypal.me unterstützen" filtern kann. So weit so gut: Speichern, Cache leeren (Contao Manager), Datenbank aktualisieren.
In unseren Kategorien (z.B. Fischfilet Fachgeschäft) ergänzen wir das neue Feld und sortieren es für die Backendpflege ein. Danach steht es in der Datenerfassung zur Verfügung. Im Krabbenpalast können wir jetzt bspw. folgendes ergänzen:
Jetzt bereiten wir unsere Karte für den Kartenfilter vor. Dafür müssen wir im Kartenprofil folgende Einstellungen unter "Experteneinstellungen" dazubringen:
Die Filter werden automatisch über con4gis/data bestückt. Wir müssen jetzt nur noch das Frontend-Modul "Externes Kartenelement" erzeugen und diese über der Karte in den Artikel bringen.
Danach könnt Ihr in der Karte Eure Betriebe filtern:
So das war der dritte Teil. Jetzt wisst Ihr wie Ihr con4gis/data und con4gis/maps verbindet. Der Krabbenpalast ist in der Karte.
Für einen Teil 4 gäbe es noch massig Stoff. Beispielsweise könnten wir mit con4gis/routing die Standorte an einer Route oder im Umkreis darstellen. Mal sehen. Jetzt aber erst einmal viel Spaß mit con4gis und wie immer gilt: Meldet Euch sofern Probleme auftauchen oder Wünsche offen sind. Oftmals ist eine entsprechende Änderungen gar nicht so aufwendig.
Weiterführende Links: