72 lines
1.9 KiB
Markdown
72 lines
1.9 KiB
Markdown
<!-- /docs/components/mainComponent/MapComponent.md -->
|
|
|
|
# 🗺️ 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`
|