110 lines
3.1 KiB
Markdown
110 lines
3.1 KiB
Markdown
# 🗺️ 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)
|
||
|
||
---
|
||
|
||
[Zurück zur Übersicht](README.md)
|