fix: die Icons werden nicht mehr doppelt angezeigt mit Plus Icon für überlappende Icons

components/MapComponent.js

@@ -392,6 +392,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
   //console.log("priorityConfig in MapComponent2: ", priorityConfig);
   useEffect(() => {
     if (gisSystemStaticLoaded && map) {
+      /* damit nich doppelt vorkommen
       createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
       createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
       createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
@@ -408,6 +409,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
       createAndSetDevices(111, setSmsfunkmodemMarkers, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
       createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige-System
       createAndSetDevices(0, setUlafMarkers, GisSystemStatic, priorityConfig); // ULAF-System
+       */
     }
   }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
@@ -466,9 +468,8 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
         ...sonstigeMarkers,
         ...ulafMarkers,
       ];
-
       // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu
-      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
+      // checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
     }
   }, [map, talasMarkers, eciMarkers, gsmModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]);
 
@@ -716,62 +717,102 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
  */
   //---------------------------------
 
-  const markerLayerRef = useRef(null);
+  /**
+      createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
+      createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
+      createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
+      createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System---LTE Modem und GSM Modem sind gleich
+      //createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem----------LTE Modem und GSM Modem sind gleich
+      createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System
+      createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System
+      createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System
+      createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR-System
+      createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM-System
+      createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen-System
+      createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL-System
+      createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ-System
+      createAndSetDevices(111, setSmsfunkmodemMarkers, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
+      createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige-System
+      createAndSetDevices(0, setUlafMarkers, GisSystemStatic, priorityConfig); // ULAF-System
+   */
+
+  const gmaLayerRef = useRef(null);
+  const talasLayerRef = useRef(null);
+  const eciMarkersLayerRef = useRef(null);
+  const gsmModemMarkersLayerRef = useRef(null);
+  const ciscoRouterMarkersLayerRef = useRef(null);
+  const wagoMarkersLayerRef = useRef(null);
+  const siemensMarkersLayerRef = useRef(null);
+  const otdrMarkersLayerRef = useRef(null);
+  const wdmMarkersLayerRef = useRef(null);
+  const messstellenMarkersLayerRef = useRef(null);
+  const talasiclMarkersLayerRef = useRef(null);
+  const dauzMarkersLayerRef = useRef(null);
+  const smsfunkmodemMarkersLayerRef = useRef(null);
+  const ulafMarkersLayerRef = useRef(null);
+  const sonstigeMarkersLayerRef = useRef(null);
+
   useEffect(() => {
     if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass alle Abhängigkeiten geladen sind
 
-    // Initialisiere die LayerGroup, falls noch nicht vorhanden
+    // Initialisiere die LayerGroups, falls noch nicht vorhanden
-    if (!markerLayerRef.current) {
+    if (!gmaLayerRef.current) {
-      markerLayerRef.current = new L.LayerGroup().addTo(map);
+      gmaLayerRef.current = new L.LayerGroup().addTo(map);
     }
-
-    const updateMarkers = () => {
-      // Alte Marker entfernen
-      markerLayerRef.current.clearLayers();
-
-      // Neue Marker für jedes System erstellen
-      /*       createAndSetDevices(11, (markers) => {
-        setGmaMarkers(markers);
-        markers.forEach((marker) => marker.addTo(markerLayerRef.current)); // Marker zur LayerGroup hinzufügen
-      }, GisSystemStatic, priorityConfig);
- */
-      createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig);
-      // Füge hier weitere `createAndSetDevices`-Aufrufe für andere Systeme ein
-    };
-
-    // Initiales Update der Marker
-    updateMarkers();
-
-    // Setze ein Intervall, um die Marker alle 10 Sekunden zu aktualisieren
-    const intervalId = setInterval(() => {
-      updateMarkers();
-    }, 10000); // 10 Sekunden
-
-    // Aufräumen bei Komponentenentladung
-    return () => {
-      clearInterval(intervalId);
-      if (markerLayerRef.current) {
-        markerLayerRef.current.clearLayers();
-      }
-    };
-  }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
-
-  //---------------------------------------
-  const talasLayerRef = useRef(null); // LayerGroup für TALAS
-
-  useEffect(() => {
-    if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass alle Abhängigkeiten geladen sind
-
-    // Initialisiere die LayerGroup für TALAS, falls noch nicht vorhanden
     if (!talasLayerRef.current) {
       talasLayerRef.current = new L.LayerGroup().addTo(map);
     }
+    if (!eciMarkersLayerRef.current) {
+      eciMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!gsmModemMarkersLayerRef.current) {
+      gsmModemMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!ciscoRouterMarkersLayerRef.current) {
+      ciscoRouterMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!wagoMarkersLayerRef.current) {
+      wagoMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!siemensMarkersLayerRef.current) {
+      siemensMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!otdrMarkersLayerRef.current) {
+      otdrMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!wdmMarkersLayerRef.current) {
+      wdmMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!messstellenMarkersLayerRef.current) {
+      messstellenMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!talasiclMarkersLayerRef.current) {
+      talasiclMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!dauzMarkersLayerRef.current) {
+      dauzMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!smsfunkmodemMarkersLayerRef.current) {
+      smsfunkmodemMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!ulafMarkersLayerRef.current) {
+      ulafMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+    if (!sonstigeMarkersLayerRef.current) {
+      sonstigeMarkersLayerRef.current = new L.LayerGroup().addTo(map);
+    }
+
+    const updateGmaMarkers = () => {
+      // Alte Marker entfernen
+      gmaLayerRef.current.clearLayers();
+
+      // Neue Marker für jedes System erstellen
+      createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig);
+    };
 
     const updateTalasMarkers = () => {
       // Alte Marker aus der LayerGroup entfernen
-      talasLayerRef.current.eachLayer((layer) => {
+      talasLayerRef.current.clearLayers();
-        talasLayerRef.current.removeLayer(layer);
-      });
 
       // Neue Marker hinzufügen
       createAndSetDevices(
@@ -779,29 +820,121 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
         (newMarkers) => {
           setTalasMarkers(newMarkers); // Update State
           newMarkers.forEach((marker) => talasLayerRef.current.addLayer(marker)); // Füge Marker zur LayerGroup hinzu
+
+          // Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu
+          checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
         },
         GisSystemStatic,
         priorityConfig
       );
     };
 
-    // Initiales Update
+    const updateEciMarkers = () => {
-    updateTalasMarkers();
+      eciMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig);
+    };
 
-    // Setze ein Intervall, um die TALAS-Marker alle 10 Sekunden zu aktualisieren
+    const updateGsmModemMarkers = () => {
-    const intervalId = setInterval(() => {
+      gsmModemMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateCiscoRouterMarkers = () => {
+      ciscoRouterMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateWagoMarkers = () => {
+      wagoMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateSiemensMarkers = () => {
+      siemensMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateOtdrMarkers = () => {
+      otdrMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateWdmMarkers = () => {
+      wdmMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateMessstellenMarkers = () => {
+      messstellenMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateTalasiclMarkers = () => {
+      talasiclMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateDauzMarkers = () => {
+      dauzMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateSmsfunkmodemMarkers = () => {
+      smsfunkmodemMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(111, setSmsfunkmodemMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateUlafMarkers = () => {
+      ulafMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(0, setUlafMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    const updateSonstigeMarkers = () => {
+      sonstigeMarkersLayerRef.current.clearLayers();
+      createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig);
+    };
+
+    // Initiales Update für beide LayerGroups
+    updateGmaMarkers();
+    updateTalasMarkers();
+    updateEciMarkers();
+    updateGsmModemMarkers();
+    updateCiscoRouterMarkers();
+    updateWagoMarkers();
+    updateSiemensMarkers();
+    updateOtdrMarkers();
+    updateWdmMarkers();
+    updateMessstellenMarkers();
+    updateTalasiclMarkers();
+    updateDauzMarkers();
+    updateSmsfunkmodemMarkers();
+    updateUlafMarkers();
+    updateSonstigeMarkers();
+
+    // Setze Intervalle für regelmäßige Updates
+    const markerIntervalId = setInterval(() => {
+      updateGmaMarkers();
+    }, 18000); // 18 Sekunden
+
+    const talasIntervalId = setInterval(() => {
       updateTalasMarkers();
-    }, 10000); // 10 Sekunden
+    }, 20000); // 20 Sekunden
 
     // Aufräumen bei Komponentenentladung
     return () => {
-      clearInterval(intervalId);
+      clearInterval(markerIntervalId);
+      clearInterval(talasIntervalId);
+      if (gmaLayerRef.current) {
+        gmaLayerRef.current.clearLayers();
+      }
       if (talasLayerRef.current) {
         talasLayerRef.current.clearLayers();
       }
     };
   }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
+  //---------------------------------------
+
   //----------------------------------
 
   //---------------------------------------