🗺️ MapComponent.js

Die zentrale React-Komponente zur Darstellung und Steuerung der Leaflet-Karte.
Bindet alle Marker, Layer, POIs, Linien und das Kontextmenü dynamisch ein.

🎯 Zweck

Initialisiert die Leaflet-Karte (useInitializeMap)
Bindet Marker & Polylinien über Redux und eigene Hooks
Steuerung über Redux-Slices wie selectedArea, zoomTrigger, polylineVisible
Kontextmenüs für Karte, POIs, Polylinien
Unterstützung für Editierfunktionen über editMode (localStorage)

🧱 Hauptbestandteile

useEffect-Hooks zum Laden und Aktualisieren von:
- Kartenlayern, POIs, Linien, Rechte, Systeme, Positionen
Marker-Logik für 15+ Layergruppen (TALAS, ECI, GMA, etc.)
Marker-Overlapping mit OverlappingMarkerSpiderfier
Kontextmenüs (Karte & Polylinie)
UI-Komponenten:
- MapLayersControlPanel
- CoordinateInput
- CoordinatePopup
- AddPOIModal, PoiUpdateModal, VersionInfoModal

🧠 Zustand & Redux

Verwendet umfangreiche Redux-Slices zur Steuerung von:

Linienstatus, POI-Typen, POI-Icons
Gerätesysteme & Rechte
Sichtbarkeit einzelner Layergruppen
Aktuelle Selektion (Area, Gerät, POI)

🔧 Lokale Steuerung

EditMode wird aus localStorage gelesen
Karte speichert Zoom & Center dauerhaft im Browser
Kontextmenü-Einträge ändern sich je nach Rechten & Modus

🧪 Besonderheiten

Fehlerbehandlung für contextmenu-Fehler eingebaut → Auto-Neuladen
Alle Marker-Updates mit Overlapping-Check & Z-Index-Steuerung
Linien enthalten dynamische Tooltips mit tooltipContents
Initiale Datenabfrage über Redux-Thunk-Kaskade

🔗 Abhängigkeiten

Leaflet, OverlappingMarkerSpiderfier, React-Toastify
Redux Toolkit (Thunks + Selectors)
Tailwind CSS für visuelles Layout

📄 Pfad: /components/mainComponent/MapComponent.js

Zurück zur Übersicht

1.9 KiB Raw Blame History