Dynamische Marker-Verwaltung in MapComponent.js

2025-05-28 14:50:59 +02:00
parent fe3ecaa900
commit 313fc24a97
4 changed files with 163 additions and 10 deletions
--- a/docs/DynamischeMarkerErklaerung.md
+++ b/docs/DynamischeMarkerErklaerung.md
@@ -0,0 +1,98 @@
+# 🗺️ 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)