# 🗺️ 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](../../README.md)