Im Rahmen meines Praktikums bei @iService entwickelte ich eine interaktive Karte zur Visualisierung der Projektpartnerschaften in der Interreg Baltic Sea Region. Ziel war es, die Verbindungen zwischen Lead-Partnern und deren Projektpartnern anschaulich darzustellen. Die Karte bietet eine Vielzahl interaktiver Funktionen, um die Projekte dynamisch zu erkunden und relevante Informationen schnell zugänglich zu machen.
Umsetzung & Herausforderungen
Für die Kartenerstellung setzte ich auf die Bibliothek Leaflet sowie die Canvas Flowmap Layer Extension, um die Beziehungen zwischen den Projektpartnern visuell durch Flusslinien (Flowmaps) darzustellen. Eine besondere Herausforderung bestand darin, mehrere Projekte, die denselben Standort teilen, übersichtlich anzuordnen. Hierfür entwickelte ich eine Funktion, die die Koordinaten kreisförmig um den Standort verteilt – abhängig von der Anzahl der Projekte.
- Zudem wurde die Karte um wichtige Funktionen ergänzt, darunter:
- Filtermöglichkeiten nach Projekten und Partnern
- Dark Mode für bessere Lesbarkeit
- Interaktive Popups, die detaillierte Informationen zum ausgewählten Projektpartner anzeigen
Technologie-Stack
- Frontend: JavaScript mit Leaflet und der Erweiterung Canvas Flowmap Layer zur Darstellung von Projektverbindungen
- Backend: WordPress mit Custom Post Types zur Speicherung der Projektdaten
- API: Projektdaten werden per API abgerufen, im WordPress-Backend zwischengespeichert und dann ins Frontend gefetcht
Features
- Visualisierung der Partnernetzwerke: Darstellung der Verbindungen zwischen Lead-Partnern und Projektpartnern über Flowmaps
- Projekt-Filter: Möglichkeit, Projekte nach Programmen, Regionen oder Projektarten zu filternDark Mode: Umschaltbare helle und dunkle Kartenansicht
- Interaktive Popups: Anzeige relevanter Partnerinformationen per Klick
- Mehrere Projekte am selben Standort: Automatische kreisförmige Anordnung der Marker bei Standortüberschneidungen
Learnings
- Leaflet-Kartenprogrammierung: Vertiefte Kenntnisse in der Kartenerstellung mit Leaflet und Erweiterungen wie Canvas Flowmap Layer
- API-Integration: Verarbeitung von Projektdaten aus einer API und deren effiziente Zwischenspeicherung mit WordPress Custom Post Types
- Datenvisualisierung: Lösungen zur Darstellung von geclusterten Standorten bei identischen Koordinaten
- JavaScript Performance-Optimierung: Optimierung von Rendering-Prozessen für eine flüssige Benutzererfahrung bei vielen Datenpunkten
