<!-- /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`
