Fernwärmekarte (2024)

Projektbeschreibung

Diese React-Komponente wurde für die Website der Stadtwerke Meißen entwickelt und ermöglicht eine dynamische Interaktion mit einer interaktiven Karte der Stadt Meißen. Nutzer können herausfinden, ob an ihrem Wohnort ein Fernwärmeanschluss vorliegt, nicht geplant ist, geplant ist oder sich bereits im Ausbau befindet.

Technische Implementierung

Die Lösung wurde mit React und Server-Side Rendering (Gatsby) umgesetzt. Das Gebietemanagement erfolgt über GeoJSON-Daten, die der Kunde flexibel über das DatoCMS verwalten kann. Die Karte selbst basiert auf Open Street Map und nutzt die Nominatim-API für die Adresssuche.

Kartenfunktionalität

Zur Visualisierung der Fernwärmegebiete wurde Leaflet.js in der React-Umgebung eingesetzt. Eine besondere Herausforderung war die Implementierung des Algorithmus, der prüft, ob ein gesetzter Standort auf einem der definierten GeoJSON-Felder liegt.

Technische Herausforderungen

Ein kritischer Aspekt war die Konfiguration des Endpunkts, sodass er nicht außerhalb von Meißen nach Straßen sucht, wenn die betreffende Straße in Meißen nicht zu finden ist. Da die Komponente schnell sehr umfangreich wurde, entwickelte ich eine custom useFunktion, die alle Aktionen der Komponente zentral verwaltet und die Codestruktur sauber hält.