Dynamische Marker-Verwaltung in MapComponent.js

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]
+```