Ein -und ausblenden LayerGroups durch Checkboxen, manche funktionieren, manche sollen die Benennung prüfen .

MapComponent.js
25.04.2024

components/MapComponent.js

@@ -1121,6 +1121,243 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     toggleLayer(mapLayersVisibility.TALAS);
   }, [map, talasMarkers, mapLayersVisibility.TALAS]);
 
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der ECI-Marker basierend auf dem Zustand von mapLayersVisibility.ECI
+
+  useEffect(() => {
+    if (!map || !eciMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        eciMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        eciMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility state to the ECI layer
+    toggleLayer(mapLayersVisibility.ECI);
+  }, [map, eciMarkers, mapLayersVisibility.ECI]);
+
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der ULAF-Marker basierend auf dem Zustand von mapLayersVisibility.ULAF
+
+  useEffect(() => {
+    if (!map || !ulafMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        ulafMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        ulafMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.ULAF);
+  }, [map, ulafMarkers, mapLayersVisibility.ULAF]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der GSMModem-Marker basierend auf dem Zustand von mapLayersVisibility.GSMModem
+
+  useEffect(() => {
+    if (!map || !gsmModemMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        gsmModemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        gsmModemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.GSMModem);
+  }, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
+
+  useEffect(() => {
+    if (!map || !ciscoRouterMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        ciscoRouterMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.CiscoRouter);
+  }, [map, ciscoRouterMarkers, mapLayersVisibility.CiscoRouter]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der WAGO-Marker basierend auf dem Zustand von mapLayersVisibility.WAGO
+
+  useEffect(() => {
+    if (!map || !wagoMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        wagoMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        wagoMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.WAGO);
+  }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der Siemens-Marker basierend auf dem Zustand von mapLayersVisibility.Siemens
+
+  useEffect(() => {
+    if (!map || !siemensMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        siemensMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        siemensMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.Siemens);
+  }, [map, siemensMarkers, mapLayersVisibility.Siemens]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der OTDR-Marker basierend auf dem Zustand von mapLayersVisibility.OTDR
+
+  useEffect(() => {
+    if (!map || !otdrMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        otdrMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        otdrMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.OTDR);
+  }, [map, otdrMarkers, mapLayersVisibility.OTDR]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der WDM-Marker basierend auf dem Zustand von mapLayersVisibility.WDM
+
+  useEffect(() => {
+    if (!map || !wdmMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        wdmMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        wdmMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.WDM);
+  }, [map, wdmMarkers, mapLayersVisibility.WDM]);
+
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der GMA-Marker basierend auf dem Zustand von mapLayersVisibility.GMA
+
+  useEffect(() => {
+    if (!map || !gmaMarkers) return;
+
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        gmaMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        gmaMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.GMA);
+  }, [map, gmaMarkers, mapLayersVisibility.GMA]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der Sonstige-Marker basierend auf dem Zustand von mapLayersVisibility.Sonstige
+
+  useEffect(() => {
+    if (!map || !sonstigeMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        sonstigeMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        sonstigeMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.Sonstige);
+  }, [map, sonstigeMarkers, mapLayersVisibility.Sonstige]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der TALASICL-Marker basierend auf dem Zustand von mapLayersVisibility.TALASICL
+
+  useEffect(() => {
+    if (!map || !talasiclMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.TALASICL);
+  }, [map, talasiclMarkers, mapLayersVisibility.TALASICL]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der DAUZ-Marker basierend auf dem Zustand von mapLayersVisibility.DAUZ
+
+  useEffect(() => {
+    if (!map || !dauzMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        dauzMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        dauzMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.DAUZ);
+  }, [map, dauzMarkers, mapLayersVisibility.DAUZ]);
+
+  //------------------------------------------ */
+    //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem
+
+  useEffect(() => {
+    if (!map || !smsfunkmodemMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        smsfunkmodemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        smsfunkmodemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.SMSFunkmodem);
+  }, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);
+
+  //------------------------------------------ */
+      //------------------------------------------ */
+  // Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen
+
+  useEffect(() => {
+    if (!map || !messstellenMarkers) return;
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        messstellenMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+      } else {
+        messstellenMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      }
+    };
+    // Apply visibility
+    toggleLayer(mapLayersVisibility.Messstellen);
+  }, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
+
   //------------------------------------------ */
 
   return (