Dynamische Marker-Verwaltung in MapComponent.js

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)

docs/architecture.md

@@ -138,3 +138,67 @@ flowchart TD
 
 
 ```
+
+---
+
+Jetzt (dynamisch & Redux-basiert):
+MapComponent.js ruft folgenden Hook auf:
+
+js
+Copy
+Edit
+const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms);
+useDynamicDeviceLayers.js verarbeitet die GisSystemStatic-Liste:
+
+Jedes System (z. B. "TALAS", "ECI", "Cisco") bekommt einen eigenen Marker-Layer.
+
+Die Marker werden erstellt durch:
+
+js
+Copy
+Edit
+createAndSetDevices(...) // Systemweise Marker erzeugen
+createAndSetDevices.js:
+
+Filtert alle Stations aus staticDistrictData, deren System === IdSystem.
+
+Erstellt Marker für jedes Gerät.
+
+Bindet Popup, Kontextmenü, Styling, Bounce usw.
+
+Ruft setMarkersFunction(markers) auf → Übergibt die Marker zurück an den Hook.
+
+Der Hook speichert:
+
+js
+Copy
+Edit
+setMarkerStates((prev) => ({ ...prev, [Name]: newMarkers }));
+MapComponent.js hat dann:
+
+Zugriff auf alle Marker dynamisch über markerStates (ein Objekt mit Schlüssel = Systemname)
+
+Sichtbarkeit und OverlappingMarkerSpiderfier werden damit verarbeitet.
+
+---
+
+🔁 Die Geräte-Marker sind nicht mehr fest codiert, sondern werden dynamisch erzeugt anhand der Webservice-Daten GisSystemStatic.
+
+🔄 Sichtbarkeit (Checkbox im Control Panel) löst ein Event visibilityChanged aus → MapComponent reagiert und rendert Marker neu.
+
+🕷️ Überlappende Marker werden mit checkOverlappingMarkers + PlusRoundIcon verarbeitet.
+
+```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]
+```