Leerzeichen von Systemnamen entfernen damit einblenen und ausblenden von der jenige layergroups Markers

components/DataSheet.js

@@ -33,6 +33,7 @@ function DataSheet() {
         (system) => system.IdSystem
       )
     );
+    console.log("allowedSystems:", allowedSystems);
 
     // Filter unique areas that belong to allowed systems
     const seenNames = new Set();
@@ -41,7 +42,7 @@ function DataSheet() {
         !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
       if (isUnique) {
         seenNames.add(item.Area_Name);
-        //console.log("Unique area:", item.Area_Name);
+        //console.log("Unique area:", item.Area_Name); //Dropdown menu
       }
       return isUnique;
     });
@@ -58,9 +59,12 @@ function DataSheet() {
     // Prepare system listings as before
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
-      const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
+      // Entferne alle Leerzeichen und Bindestriche aus dem Namen
+      const formattedName = item.Name.replace(/[\s\-]+/g, "");
+      const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
       if (isUnique) {
-        seenSystemNames.add(item.Name);
+        seenSystemNames.add(formattedName); // Füge den formatierten Namen hinzu
+        console.log("Unique system in DataSheet:", formattedName); // Zeige den formatierten Namen in der Konsole
       }
       return isUnique;
     });
@@ -68,21 +72,21 @@ function DataSheet() {
     setSystemListing(
       filteredSystems.map((system, index) => ({
         id: index + 1,
-        name: system.Name,
+        name: system.Name.replace(/[\s\-]+/g, ""), // Auch hier Leerzeichen und Bindestriche entfernen
       }))
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
-
+  //---------------------------------------------------------
   const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
-    //console.log(`Checkbox ${name} checked state:`, checked);  // Log the checked state of the checkbox
+    console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
 
     setMapLayersVisibility((prev) => {
       const newState = {
         ...prev,
         [name]: checked,
       };
-      //console.log(`New mapLayersVisibility state:`, newState);  // Log the new state after update
+      console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
       return newState;
     });
   };

components/MapComponent.js

@@ -168,6 +168,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     fetchData();
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
   //------------------------------------------
+
   //GisSystemStatic Daten laden
   useEffect(() => {
     const fetchData = async () => {
@@ -1194,13 +1195,18 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     toggleLayer(mapLayersVisibility.TALAS);
   }, [map, talasMarkers, mapLayersVisibility.TALAS]);  */ // Depend on map, markers array, and visibility state
 
-  const handleCheckboxChange = (event) => {
+  const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
-    setMapLayersVisibility((prev) => ({
-      ...prev,
-      TALAS: checked,
-    }));
+    const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
+
+    setMapLayersVisibility((prev) => {
+      return {
+        ...prev,
+        [internalName]: checked,
+      };
+    });
   };
+
   //------------------------------------------
 
   // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
@@ -1270,6 +1276,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
 
   //------------------------------------------ */
+  const layerNames = {
+    "GSM Modem": "GSMMODEM",
+    "Cisco Router": "CiscoRouter",
+    "TALAS ICL": "TALASICL",
+    "SMS-Funkmodem": "GSMModem",
+  };
   //------------------------------------------ */
   // Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
 
@@ -1277,14 +1289,16 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     if (!map || !ciscoRouterMarkers) return;
     const toggleLayer = (isVisible) => {
       if (isVisible) {
-        ciscoRouterMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+        ciscoRouterMarkers.forEach((marker) => marker.addTo(map));
       } else {
-        ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+        ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker));
       }
     };
-    // Apply visibility
-    toggleLayer(mapLayersVisibility.CiscoRouter);
-  }, [map, ciscoRouterMarkers, mapLayersVisibility.CiscoRouter]);
+    // Nutzt die Map, um den internen Namen zu bekommen
+    const internalName = layerNames["Cisco Router"] || "CiscoRouter";
+    toggleLayer(mapLayersVisibility[internalName]);
+    console.log("internalName Cisco Router: ", internalName);
+  }, [map, ciscoRouterMarkers, mapLayersVisibility]);
 
   //------------------------------------------ */
   //------------------------------------------ */
@@ -1395,6 +1409,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   useEffect(() => {
     if (!map || !talasiclMarkers) return;
+    console.log("talasiclMarkers", talasiclMarkers);
     const toggleLayer = (isVisible) => {
       if (isVisible) {
         talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
@@ -1402,9 +1417,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
       }
     };
-    // Apply visibility
-    toggleLayer(mapLayersVisibility.TALASICL);
-  }, [map, talasiclMarkers, mapLayersVisibility.TALASICL]);
+
+    // Verwendung der Map, um den internen Namen zu bekommen, und Fallback auf "TALASICL", falls nicht gefunden
+    const internalName =
+      layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers ";
+    toggleLayer(mapLayersVisibility[internalName]);
+    console.log("internalName for TALAS ICL in MapComponent: ", internalName);
+  }, [map, talasiclMarkers, mapLayersVisibility]);
 
   //------------------------------------------ */
   //------------------------------------------ */

store/mapLayersState.js

@@ -18,7 +18,7 @@ export const mapLayersState = atom({
     Messstellen: true,
     TALASICL: true,
     DAUZ: true,
-    SMSFunkmodem: true,
+    "SMS-Funkmodem": true,
     Sonstige: true,
   },
 });