feat: Marker-Cleanup zur Vermeidung von Memory Leaks implementiert

- cleanupMarkers() Utility in /utils/common/cleanupMarkers.js erstellt
- Marker-Cleanup in MapComponent.js vor createAndSetDevices() integriert
- createAndSetDevices.js von Cleanup-Verantwortung befreit (reine Erzeugung)
- setupPOIs.js erweitert um cleanupMarkers() vor Layer-Neuerstellung
- poiUtils.js und markerUtils.js angepasst: cleanupMarkers() ersetzt .remove()
- Memory Leaks durch verwaiste Tooltips, Events und Marker behoben
- Grundlage für wiederverwendbare Marker-Cleanup-Logik für POIs, Geräte, Linien geschaffen

utils/common/cleanupMarkers.js

@@ -0,0 +1,25 @@
+// /utils/common/cleanupMarkers.js
+
+/**
+ * Entfernt alle Leaflet-Marker vollständig aus der Karte und aus OMS egal welche Typ sind
+ * @param {L.Marker[]} markers - Liste der Marker
+ * @param {object} oms - OverlappingMarkerSpiderfier-Instanz (optional)
+ */
+export const cleanupMarkers = (markers = [], oms = null) => {
+  markers.forEach(marker => {
+    // Tooltip und Popup entfernen
+    marker.unbindTooltip?.();
+    marker.unbindPopup?.();
+
+    // Event-Listener entfernen (zur Sicherheit)
+    marker.off?.();
+
+    // Marker von Karte entfernen
+    marker.remove?.();
+
+    // Marker aus OMS entfernen (wenn vorhanden)
+    if (oms && typeof oms.removeMarker === "function") {
+      oms.removeMarker(marker);
+    }
+  });
+};

utils/devices/createAndSetDevices.js

@@ -7,6 +7,7 @@ import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisSt
 import { selectGisStationsStatusDistrict } from "@/redux/slices/webservice/gisStationsStatusDistrictSlice.js";
 import { selectGisStationsMeasurements } from "@/redux/slices/webservice/gisStationsMeasurementsSlice.js";
 import { addContextMenuToMarker } from "@/utils/contextMenuUtils";
+import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
 
 const determinePriority = (iconPath, priorityConfig) => {
   for (let priority of priorityConfig) {

utils/markerUtils.js

@@ -5,8 +5,9 @@ import circleIcon from "../components/CircleIcon";
 import { store } from "../redux/store";
 import { updatePolylineCoordinatesThunk } from "../redux/thunks/database/polylines/updatePolylineCoordinatesThunk";
 import { redrawPolyline } from "./mapUtils";
+import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
 
-const savePolylineRedux = (lineData) => {
+const savePolylineRedux = lineData => {
   return store
     .dispatch(
       updatePolylineCoordinatesThunk({
@@ -16,7 +17,7 @@ const savePolylineRedux = (lineData) => {
       })
     )
     .unwrap()
-    .catch((error) => {
+    .catch(error => {
       console.error("Fehler beim Speichern der Linienkoordinaten:", error.message);
     });
 };
@@ -44,18 +45,27 @@ export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
 };
 
 export const removeMarker = (marker, lineData, currentZoom, currentCenter) => {
-  const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()));
+  const index = lineData.coordinates.findIndex(coord =>
+    L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
+  );
 
   if (index !== -1) {
     lineData.coordinates.splice(index, 1);
     redrawPolyline(lineData);
-    marker.remove();
+    cleanupMarkers([marker]);
     savePolylineRedux(lineData); // ✅ Wiederverwendung
     window.location.reload();
   }
 };
 
-export const handleEditPoi = (marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast) => {
+export const handleEditPoi = (
+  marker,
+  userRights,
+  setCurrentPoiData,
+  setShowPoiUpdateModal,
+  fetchPoiData,
+  toast
+) => {
   if (!Array.isArray(userRights)) {
     toast.error("Benutzerrechte sind ungültig.", {
       position: "top-center",
@@ -64,7 +74,7 @@ export const handleEditPoi = (marker, userRights, setCurrentPoiData, setShowPoiU
     return;
   }
 
-  if (!userRights.some((r) => r.IdRight === 56)) {
+  if (!userRights.some(r => r.IdRight === 56)) {
     toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
       position: "top-center",
       autoClose: 5000,

utils/poiUtils.js

@@ -6,9 +6,10 @@ import { redrawPolyline } from "./polylines/redrawPolyline.js";
 
 import { store } from "../redux/store";
 import { updatePolylineCoordinatesThunk } from "../redux/thunks/database/polylines/updatePolylineCoordinatesThunk";
+import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
 
 // 🧠 Zentrale Redux-Dispatch-Hilfsfunktion
-const savePolylineRedux = (lineData) => {
+const savePolylineRedux = lineData => {
   return store
     .dispatch(
       updatePolylineCoordinatesThunk({
@@ -18,7 +19,7 @@ const savePolylineRedux = (lineData) => {
       })
     )
     .unwrap()
-    .catch((error) => {
+    .catch(error => {
       console.error("Fehler beim Speichern der Linienkoordinaten:", error.message);
     });
 };
@@ -49,12 +50,14 @@ export const insertNewPOI = (closestPoints, newPoint, lineData, map) => {
 };
 
 export const removePOI = (marker, lineData, currentZoom, currentCenter) => {
-  const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()));
+  const index = lineData.coordinates.findIndex(coord =>
+    L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
+  );
 
   if (index !== -1) {
     lineData.coordinates.splice(index, 1);
     redrawPolyline(lineData);
-    marker.remove();
+    cleanupMarkers([marker]);
     savePolylineRedux(lineData);
     window.location.reload();
   }

utils/polylines/cleanupPolylinesForMemory.js

@@ -0,0 +1,29 @@
+// /utils/polylines/cleanupPolylinesForMemory.js
+
+/**
+ * Bereinigt Leaflet-Polylinien aus dem Speicher:
+ * - entfernt Event-Listener (off)
+ * - entfernt Tooltips (unbindTooltip)
+ * - entfernt Layer von der Karte (removeLayer)
+ *
+ * @param {L.Polyline[]} polylines - Liste der Leaflet-Polylinien
+ * @param {L.Map} map - Leaflet-Karteninstanz
+ */
+export function cleanupPolylinesForMemory(polylines = [], map) {
+  if (!Array.isArray(polylines)) return;
+
+  polylines.forEach(polyline => {
+    try {
+      // Events und Tooltip entfernen
+      polyline.off();
+      polyline.unbindTooltip?.();
+
+      // Von der Karte entfernen, wenn noch vorhanden
+      if (map && map.hasLayer(polyline)) {
+        map.removeLayer(polyline);
+      }
+    } catch (e) {
+      console.warn("Fehler beim Bereinigen einer Polyline:", e);
+    }
+  });
+}

utils/setupPOIs.js

@@ -3,6 +3,7 @@ import { parsePoint } from "./geometryUtils";
 import { handleEditPoi } from "./poiUtils";
 import { updateLocationInDatabaseService } from "../services/database/updateLocationInDatabaseService";
 import { setSelectedPoi, clearSelectedPoi } from "../redux/slices/database/pois/selectedPoiSlice";
+import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
 
 export const setupPOIs = async (
   map,
@@ -28,13 +29,17 @@ export const setupPOIs = async (
 
   // ✅ Mapping vorbereiten: idPoi → icon path
   const iconMap = new Map();
-  poiData.forEach((item) => {
+  poiData.forEach(item => {
     if (item.idPoi && item.path) {
       iconMap.set(item.idPoi, item.path);
     }
   });
 
   if (map && poiLayerRef.current) {
+    const existingMarkers = poiLayerRef.current?.getLayers?.();
+    if (existingMarkers?.length) {
+      cleanupMarkers(existingMarkers);
+    }
     map.removeLayer(poiLayerRef.current);
     poiLayerRef.current = new L.LayerGroup().addTo(map);
 
@@ -42,11 +47,13 @@ export const setupPOIs = async (
       try {
         const { latitude, longitude } = parsePoint(poi.position);
         const poiTypName = poiTypMap.get(poi.idPoiTyp) || "Unbekannt";
-        const canDrag = userRights ? userRights.some((r) => r.IdRight === 56) : false;
+        const canDrag = userRights ? userRights.some(r => r.IdRight === 56) : false;
 
         // ✅ Icon korrekt über idPoi auflösen
         const iconPath = iconMap.get(poi.idPoi);
-        const iconUrl = iconPath ? `/img/icons/pois/${iconPath}` : "/img/icons/pois/default-icon.png";
+        const iconUrl = iconPath
+          ? `/img/icons/pois/${iconPath}`
+          : "/img/icons/pois/default-icon.png";
 
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
@@ -72,7 +79,15 @@ export const setupPOIs = async (
               {
                 text: "POI Bearbeiten",
                 icon: "/img/poi-edit.png",
-                callback: () => handleEditPoi(marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast),
+                callback: () =>
+                  handleEditPoi(
+                    marker,
+                    userRights,
+                    setCurrentPoiData,
+                    setShowPoiUpdateModal,
+                    fetchPoiData,
+                    toast
+                  ),
               },
             ],
           });
@@ -80,12 +95,12 @@ export const setupPOIs = async (
 
         marker.bindTooltip(
           `
-  <div class="bg-white text-gray-800 text-sm rounded-xl px-4 py-2 w-56">
-    <div class="font-semibold text-blue-500 mb-1">${poi.description || "Unbekannt"}</div>
-    <div class="text-gray-600 text-sm">Gerät: ${deviceName || "unbekannt"}</div>
-    <div class="text-gray-600 text-sm">Typ: ${poiTypName}</div>
-  </div>
-  `,
+          <div class="bg-white text-gray-800 text-sm rounded-xl px-4 py-2 w-56">
+            <div class="font-semibold text-blue-500 mb-1">${poi.description || "Unbekannt"}</div>
+            <div class="text-gray-600 text-sm">Gerät: ${deviceName || "unbekannt"}</div>
+            <div class="text-gray-600 text-sm">Typ: ${poiTypName}</div>
+          </div>
+          `,
           {
             direction: "top",
             offset: [0, -10],
@@ -105,7 +120,7 @@ export const setupPOIs = async (
           //this.closePopup();
         });
 
-        marker.on("dragend", (e) => {
+        marker.on("dragend", e => {
           if (canDrag) {
             const newLat = e.target.getLatLng().lat;
             const newLng = e.target.getLatLng().lng;