🗺️ 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):

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

→ Jeder Marker-Typ war hart codiert.

Jetzt (dynamisch):

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

🔁 Datenfluss Schritt für Schritt

MapComponent.js ruft den Hook useDynamicDeviceLayers(...) auf.
Der Hook iteriert über GisSystemStatic (Webservice-Liste aller Systeme).
Für jedes System wird createAndSetDevices(...) aufgerufen.
Diese Funktion:
- Holt Stations aus Redux (filtered by System-ID)
- Erstellt Marker (Leaflet)
- Rückgabe über Callback setMarkersFunction(markers)
Die Marker werden per setMarkerStates() gespeichert.
In MapComponent.js können sie aus markerStates[SystemName] gelesen werden.
Sichtbarkeit wird über Redux (mapLayersVisibility) gesteuert.
Ü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:

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:

plusMarker.on("click", () => oms.spiderfy(nearbyMarkers));

📘 Mermaid-Diagramm

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)

Zurück zur Übersicht

3.1 KiB Raw Blame History Unescape Escape