# 🗺️ Dynamische Marker-Verwaltung in MapComponent.js (NodeMap)

Dieses Dokument erklärt, wie Marker dynamisch erstellt, verwaltet und in `MapComponent.js` verwendet werden – inklusive Datenfluss und OverlappingMarkerSpiderfier-Integration.

---

## 🔄 Dynamische Marker-Erzeugung – Übersicht

Früher (statisch):

```js
useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
```

→ Jeder Marker-Typ war hart codiert.

Jetzt (dynamisch):

```js
const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms);
```

---

## 🔁 Datenfluss Schritt für Schritt

1. **MapComponent.js** ruft den Hook `useDynamicDeviceLayers(...)` auf.
2. Der Hook iteriert über `GisSystemStatic` (Webservice-Liste aller Systeme).
3. Für jedes System wird `createAndSetDevices(...)` aufgerufen.
4. Diese Funktion:
   - Holt `Stations` aus Redux (filtered by System-ID)
   - Erstellt Marker (Leaflet)
   - Rückgabe über Callback `setMarkersFunction(markers)`
5. Die Marker werden per `setMarkerStates()` gespeichert.
6. In MapComponent.js können sie aus `markerStates[SystemName]` gelesen werden.
7. Sichtbarkeit wird über Redux (`mapLayersVisibility`) gesteuert.
8. Überlappende Marker werden über `checkOverlappingMarkers()` + `plusRoundIcon` + OMS angezeigt.

---

## 📦 Marker-Aufbau

### `createAndSetDevices.js`

- Filtert Stations (`Points`) aus `selectGisStationsStaticDistrict`
- Erstellt für jede gültige Station einen Marker:
  ```js
  const marker = L.marker([station.X, station.Y], { ... });
  oms.addMarker(marker); // Spiderfier-fähig
  ```
- Fügt Marker zur richtigen `LayerGroup` hinzu
- Gibt alle Marker über Callback zurück

---

## 🕷️ OverlappingMarkerSpiderfier (OMS)

- Initialisiert in `useInitializeMap(...)` in `MapComponent.js`
- Wird an `useDynamicDeviceLayers` übergeben
- Marker werden dort registriert: `oms.addMarker(marker)`
- Bei Klick auf das PlusIcon:
  ```js
  plusMarker.on("click", () => oms.spiderfy(nearbyMarkers));
  ```

---

## 📘 Mermaid-Diagramm

```mermaid
flowchart TD
    A1[MapComponent] --> B1[useDynamicDeviceLayers]
    B1 --> C1[loop über GisSystemStatic]
    C1 --> D1[createAndSetDevices]
    D1 --> E1[Filter stations aus Redux]
    E1 --> F1[erstelle Marker /Leaflet]
    F1 --> G1[Marker in LayerGroup einfügen]
    G1 --> H1[setMarkerStates im Hook]
    H1 --> A2[markerStates zurück nach MapComponent]

    A2 --> I1[Map aktualisiert Marker]
    A2 --> I2[checkOverlappingMarkers mit OMS]
```

---

## ✅ Vorteile der neuen Lösung

| Vorteil       | Beschreibung                                           |
| ------------- | ------------------------------------------------------ |
| 🔄 Flexibel   | Neue Geräte-Typen automatisch erkannt                  |
| 📦 Kompakt    | Kein `useState` oder `useLayerVisibility` mehr nötig   |
| 🧠 Wartbar    | Eine zentrale Logik statt doppelter Komponentenlogik   |
| 🕷️ Integriert | OMS funktioniert automatisch bei überlappenden Markern |

---

Letztes Update: automatisch generiert mit ChatGPT (OpenAI)