diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index b08512363..40c0021b8 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -5,25 +5,19 @@ import "leaflet/dist/leaflet.css"; import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; import "leaflet-contextmenu"; import "leaflet.smooth_marker_bouncing"; -import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; //sieht deaktiviert aber ist das nicht so und wird benötigt import "react-toastify/dist/ReactToastify.css"; import { InformationCircleIcon } from "@heroicons/react/20/solid"; import PoiUpdateModal from "../pois/PoiUpdateModal.js"; import { ToastContainer, toast } from "react-toastify"; import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js"; -import { createAndSetDevices } from "../../utils/devices/createAndSetDevices.js"; import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js"; import { APP_VERSION } from "../../config/appVersion.js"; -import * as layers from "../../config/layers.js"; import addItemsToMapContextMenu from "../contextmenu/useMapContextMenu.js"; - import useAreaMarkersLayer from "../../hooks/layers/useAreaMarkersLayer.js"; import { setupPolylines } from "../../utils/polylines/setupPolylines.js"; import { setupPOIs } from "../../utils/setupPOIs.js"; - import useLineData from "../../hooks/useLineData.js"; import { useMapComponentState } from "../../hooks/useMapComponentState.js"; - import CoordinatePopup from "../contextmenu/CoordinatePopup.js"; //----------Ui Widgets---------------- import MapLayersControlPanel from "../uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js"; @@ -668,9 +662,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, [poiIconsData, poiIconsStatus]); //----------------------------------------------------------------- //----------------------------------------------------------------- - - //--------------------------------------------- - useEffect(() => { if (!map) return; diff --git a/config/appVersion.js b/config/appVersion.js index 1eebc77b5..18911b904 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.203"; +export const APP_VERSION = "1.1.204"; diff --git a/docs/DynamischeMarkerErklaerung.md b/docs/DynamischeMarkerErklaerung.md new file mode 100644 index 000000000..f1680956b --- /dev/null +++ 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) diff --git a/docs/architecture.md b/docs/architecture.md index 3638d4a9e..ba8cf36de 100644 --- a/docs/architecture.md +++ b/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] +```