Interaktive Karte für das Forschungsprojekt GoingVis

Das Projekt GoingVis möchte Menschen und Städte bei Hitzeereignissen, ausgelöst vom Klimawandel, unterstützten. 

Die Arbeit soll hierbei in kleinen Städten und Gemeinden stattfinden. Um die Bevölkerung einzubinden, haben wir eine Interaktive Karte entwickelt.

ZIELFORMULIERUNG:

Wir wollen den Bürger:innen eine möglichst geringe Hürde bereiten, um die modernen Möglichkeiten zu nutzen. Es sollten so viele Menschen wie möglich bewegt werden, an dem Projekt mitzuarbeiten. 

Designentwicklung

Allgemeines

Eine interaktive Karte soll das zentrale Werkzeug sein, um Bürger:innen eine einfache Teilnahme an dem Projekt GoingVis zu bieten.

Hier können Bürger:innen ihre Lieblingsorte eintragen, Orte,  die Schatten spenden und die im Falle enormer Hitze Schutz und Abkühlung versprechen. Auch zukünftige Maßnahmen zur Schaffung dieser Orte sollen verzeichnet werden. 

Das Design für die Karte und das Eintragen von Orten sollte daher so einfach und übersichtlich wie möglich gemacht werden.

Die Farben für die Markierungen auf der Karte für die verschiedenen Kategorien ergeben sich aus der Farbpalette von GoingVis. Die Schaltflächen zum eintragen bzw. zur Interaktion sind dagegen in einem hervorstechenden orange gesetzt.

 

 

Kategorien

GoingVis-Interaktive-Karte-v2-kategorien-2

Kommentarfunktion

Wenn man in der Karte auf eine Markierung klickt, schiebt sich am linken Rand ein Fenster ein. Dieses enthält jeweils weitere Informationen. Jeder Ort hat einen Titel und eine Beschreibung. Zudem können die Nutzer:innen auch noch ein Bild hochladen. Für eine effiziente Benutzung haben wir die interaktive Karte auch für Mobilgeräte optimiert.

Da es in dem Projekt vor allem darum geht, die Bürger:innen zur Nutzung dieses tools zu animieren, war es essenziell, dass sich die Menschen über eine Kommentarfunktion austauschen können.

In die Karte wurden bereits über 200 Orte eingetragen.

 

Weiterentwicklung

Wie geht es weiter?

Da es sich bei Webseiten und deren Funktionalitäten um lebendige Produkte handelt bekommen wir manchmal die Möglichkeit unsere eigenen Entwicklungen nochmal anzufassen und weiter auszuarbeiten. So auch hier: Die Karte wurde zu einem viel genutzten Werkzeug in dem Projekt und so wurde eine Erweiterung der Funktionalitäten von uns vorgenommen.

Was ist alles passiert?

Kategorien: In der alten Karte konnten Orte eingetragen werden und einer von 4 möglichen Kategorien zu geordnet werden. Wir haben die Kategorisierung so umgebaut das jetzt vom GoingVis-Team selber Kategorien erstellt werden können und die Pins eine selbstausgewählte Farbe erhalten.

Filter und Suche: Da es immer mehr Pins auf der Karte gibt wird es auch immer schwieriger die Übersicht zu behalten. Um diese Problematik zu lösen haben wir eine Filter- und Suchfunktion entwickelt. Wenn man am oberen Rand der Karte die Filter ausklappt werden dort alle vorhandenen Kategorien angezeigt. Standardmäßig sind alle Filter ausgewählt. Wenn man eine Kategorie anklickt werden alle zugehörigen Pins aus der Karte ausgeblendet. Zudem gibt es ein Suchfeld welches einem bei Eingabe eines Ortes sogar Vorschläge macht welcher Ort gemeint sein könnte.

Mitmachaktionen: Ein Wunsch von GoingVis war es das es Aktionen geben soll die einen bestimmten Raum, z.B. den Stadtpark, umfassen und in dem es verschiedene Pins für eine Aktion geben soll. Die Visualisierung der Mitmachaktionen wird zudem von einem Polygon welches von GoingVis-Seite aus erstellt werden kann unterstützt. So können am oberen Rand der Karte die Mitmachaktionen angeklickt werden und dann werden in der Karte die Polygone und zugehörigen Pins ausgegeben. Zudem sollen Mitmachaktionen jeweils eine eigene Seite erhalten. Dort können vorher verifizierte Nutzer:innen Status-Updates in Form von kurzen Texten und / oder mit Bildern eintragen. Die Ausgabe wird dann in einer Timeline visualisiert. Zudem können weitere Bilder eine Galerie hinzugefügt werden um die Arbeit an der Aktion zu dokumentieren.

Cluster: In der ersten Version der Karte wurden bei jeder Zoom-Stufe alle Pins angezeigt. Dies wurde schnell unübersichtlich. Daher haben wir mit einer kleinen Erweiterung Cluster eingefügt. Diese Cluster sorgen dafür das bei einer kleineren Zoom-Stufe beieinander liegende Pins zu einem Punkt zusammengefasst werden. Wenn man auf diesen zusammengefassten Punkt klickt werden alle Pins angezeigt welche sich darunter verbergen. So ist die Karte deutlich aufgeräumter.

Zoom: In der Standardkonfiguration von Open Street Maps ist der Zoom so eingestellt das sobald ein Scroll-Ereignis über der Karte registriert wird gleich in die Karte gezoomt wird. Dies ist zwar nicht schlecht aber wenn man zu Inhalten unter der Karte möchte doch etwas nervig. Daher haben wir dieses Verhalten geändert und nun muss eine Kombination aus gedrückter Strg-Taste und Scrollen erfolgen damit der Zoom funktioniert.

Unter der Oberfläche: Neben der optischen Überarbeitung konnten wir in der zweiten Version auch nochmal an den Kern der Karte gehen. Dies ist natürlich immer toll um seine eigene Programmierung zu verbessern und zu verschlanken. Die wohl größte Verbesserung der Karte ist die Art wie die Orte ausgelesen und in die Karte integriert werden. An dem Inhaltstyp der Orte haben wir nichts geändert aber wir konnten mit der Verwendung von der WordPress internen REST-API die Orte nun aus einem eigens konfigurierten Schnittpunkt auslesen. Die gleiche Systematik haben wir auch direkt für die Mitmachaktionen verwendet. Dies soll in Zukunft auch die Exportierbarkeit der Orte ermöglichen. Da der Schnittpunkt öffentlich ist kann man sich die JSON-Datei gerne selber ansehen: https://www.platzb.de/wp-json/interaktivekarte/v1/orte/by/category

GoingVis-Interaktive-Karte-v2-kategorien
GoingVis-Interaktive-Karte-v2-mitmachaktionen

Wollen wir zusammenarbeiten?

Wir freuen uns sehr, wenn wir gemeinsam die Welt ein wenig besser gestalten können.

Jetzt Kontakt aufnehmen
Jetzt zum Newsletter anmelden