Manuell layerGroup anzeigen

components/DataSheet.js

@@ -68,13 +68,10 @@ function DataSheet() {
   const [checkedStations, setCheckedStations] = useState({});
 
   const handleCheckboxChange = (layerName) => {
-    setCheckedStations((prev) => ({
-      ...prev,
-      [layerName]: !prev[layerName],
-    }));
+    // Umschalten der Sichtbarkeit im Zustand
     setLayers((prevLayers) => ({
       ...prevLayers,
-      [layerName]: !prevLayers[layerName],
+      [layerName]: !prevLayers[layerName], // Umschalten des Booleschen Werts
     }));
   };
 
@@ -121,7 +118,7 @@ function DataSheet() {
               type="checkbox"
               id={`box-${station.id}`}
               className="accent-blue-500 checked:bg-blue-500"
-              checked={checkedStations[station.id] || false}
+              checked={layers[station.name] || false} // Zustand von Recoil verwenden
               onChange={() => handleCheckboxChange(station.name)}
             />
             <label

components/MapComponent.js

@@ -906,156 +906,143 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       map.removeLayer(marker);
     });
   }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
-  
+
   //-------------------------------------------------------------------------------------------------------------------------
   //GMA Layer
   const [layerGMA, setLayerGMA] = useState([]);
+  const [showGMA, setShowGMA] = useState(false);
   useEffect(() => {
     if (!map || !GisStationsStaticDistrict) return;
-    
+
     // Clear existing markers to prevent duplicates
     GMA.clearLayers();
-  
+
     // Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
     if (!oms) {
-      setOms(new OverlappingMarkerSpiderfier(map, {
-        // Konfigurationen für OverlappingMarkerSpiderfier
-        keepSpiderfied: true
-      }));
+      setOms(
+        new OverlappingMarkerSpiderfier(map, {
+          // Konfigurationen für OverlappingMarkerSpiderfier
+          keepSpiderfied: true,
+        })
+      );
     }
-  
-    GisStationsStaticDistrict.forEach(station => {
+
+    GisStationsStaticDistrict.forEach((station) => {
       if (parseInt(station.System) === 11) {
         const icon = L.icon({
           iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
           iconSize: [25, 41],
-          iconAnchor: [12, 41] // iconAnchor set to the tip of the icon
+          iconAnchor: [12, 41], // iconAnchor set to the tip of the icon
         });
-  
+
         const marker = L.marker([station.X, station.Y], { icon });
-        
+
         // Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
         marker.addTo(GMA);
         oms.addMarker(marker);
-  
+
         // Adjust the popup anchor based on your icon's appearance
-        marker.bindPopup(`
+        marker.bindPopup(
+          `
           <b>${station.LD_Name}</b><br>
           ${station.Device}<br>
           ${station.Area_Short} (${station.Area_Name})<br>
           ${station.Location_Short} (${station.Location_Name})<br>
-        `, {
-          offset: L.point(0, -20),
-          autoClose: false
-        });
-  
+        `,
+          {
+            offset: L.point(0, -20),
+            autoClose: false,
+          }
+        );
+
         // Events for mouse interactions
-        marker.on('mouseover', () => marker.openPopup());
-        marker.on('mouseout', () => marker.closePopup());
+        marker.on("mouseover", () => marker.openPopup());
+        marker.on("mouseout", () => marker.closePopup());
       }
     });
-  
+
     // Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
-    TALAS.addTo(map);
+    //GMA.addTo(map);
+    if (!map) return;
+    if (showGMA) {
+      GMA.addTo(map);
+    } else {
+      GMA.remove();
+    }
     setLayerGMA(GMA);
-    console.log("layerGMA:", layerGMA);
-  
+    //console.log("layerGMA:", layerGMA);
+    console.log("GMA layerGroup:", GMA);
   }, [map, GisStationsStaticDistrict, oms]);
-//---------------------------------------------------------------------------------
+  //---------------------------------------------------------------------------------
   //-------------------------------------------------------------------------------------------------------------------------
   //TALAS Layer
   const [layerTALAS, setLayerTALAS] = useState([]);
+  const [showTALAS, setShowTALAS] = useState(false);
   useEffect(() => {
     if (!map || !GisStationsStaticDistrict) return;
-    
+
     // Clear existing markers to prevent duplicates
     TALAS.clearLayers();
-  
+
     // Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
     if (!oms) {
-      setOms(new OverlappingMarkerSpiderfier(map, {
-        // Konfigurationen für OverlappingMarkerSpiderfier
-        keepSpiderfied: true
-      }));
+      setOms(
+        new OverlappingMarkerSpiderfier(map, {
+          // Konfigurationen für OverlappingMarkerSpiderfier
+          keepSpiderfied: true,
+        })
+      );
     }
-  
-    GisStationsStaticDistrict.forEach(station => {
+
+    GisStationsStaticDistrict.forEach((station) => {
       if (parseInt(station.System) === 1) {
         const icon = L.icon({
           iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
           iconSize: [25, 41],
-          iconAnchor: [12, 41] // iconAnchor set to the tip of the icon
+          iconAnchor: [12, 41], // iconAnchor set to the tip of the icon
         });
-  
+
         const marker = L.marker([station.X, station.Y], { icon });
-        
+
         // Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
         marker.addTo(TALAS);
         oms.addMarker(marker);
-  
+
         // Adjust the popup anchor based on your icon's appearance
-        marker.bindPopup(`
+        marker.bindPopup(
+          `
           <b>${station.LD_Name}</b><br>
           ${station.Device}<br>
           ${station.Area_Short} (${station.Area_Name})<br>
           ${station.Location_Short} (${station.Location_Name})<br>
-        `, {
-          offset: L.point(0, -20),
-          autoClose: false
-        });
-  
+        `,
+          {
+            offset: L.point(0, -20),
+            autoClose: false,
+          }
+        );
+
         // Events for mouse interactions
-        marker.on('mouseover', () => marker.openPopup());
-        marker.on('mouseout', () => marker.closePopup());
+        marker.on("mouseover", () => marker.openPopup());
+        marker.on("mouseout", () => marker.closePopup());
       }
     });
-  
+
     // Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
-    TALAS.addTo(map);
+    //TALAS.addTo(map);
+    if (showTALAS) {
+      TALAS.addTo(map);
+    } else {
+      console.log("Removing TALAS from map");
+      TALAS.remove();
+    }
     setLayerTALAS(TALAS);
-    console.log("layerTALAS:", layerTALAS);
-  
-  }, [map, GisStationsStaticDistrict, oms]);
-//---------------------------------------------------------------------------------
-const [activeLayer, setActiveLayer] = useState(null);
-useEffect(() => {
-  if (!map) return;
-
-  // Erstelle eine Funktion, um alle Layer zu entfernen
-  const removeLayers = () => {
-    [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL].forEach(layer => {
-      if (map.hasLayer(layer)) {
-        map.removeLayer(layer);
-      }
-    });
-  };
-
-  // Entferne alle Layer zuerst
-  removeLayers();
-
-  // Füge nur den aktiven Layer hinzu, wenn er definiert ist
-  if (activeLayer && map.hasLayer(activeLayer) === false) {
-    activeLayer.addTo(map);
-  }
-}, [activeLayer, map]); // Abhängigkeiten von activeLayer und map
-
-useEffect(() => {
-  // Setze TALAS als aktiven Layer, wenn die entsprechenden Daten geladen sind
-  if (GisStationsStaticDistrict.length > 0) {
-    setActiveLayer(TALAS); // Diese Funktion aktualisiert den aktiven Layer, der dann im anderen useEffect behandelt wird
-    setActiveLayer(GMA);
-  }
-}, [GisStationsStaticDistrict]); // Reagiere auf Änderungen in GisStationsStaticDistrict
-
-
-  // Verwenden von Systemdaten zur Aktualisierung der LayerGroup-----------3
-  useEffect(() => {
-    console.log("Verarbeitung der talasSystem-Daten:", layerTALAS);
-    // Hier könnten Sie Ihre Leaflet LayerGroup-Aktionen ausführen
-  }, [layerTALAS,layerGMA]);
+    //console.log("layerTALAS:", layerTALAS);
+    console.log("TALAS layerGroup:", TALAS);
+  }, [map, GisStationsStaticDistrict, oms, showTALAS]);
+  //---------------------------------------------------------------------------------
 
   //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
-
   //------------------------------------------
   /*   useEffect(() => {
     if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)