TALAS als separater layerGroup

components/DataSheet.js

@@ -1,8 +1,11 @@
+//components/DataSheet.js
 import React, { useEffect, useState } from "react";
-import { useRecoilValue } from "recoil";
-import { gisStationsStaticDistrictState } from "../features/gisStationState";
-import { gisSystemStaticState } from "../features/gisSystemState";
+import { useRecoilValue, useRecoilState } from "recoil";
+import { gisStationsStaticDistrictState } from "../states/gisStationState";
+import { gisSystemStaticState } from "../states/gisSystemState";
+import { mapLayersState } from "../states/mapLayersState";
 function DataSheet() {
+  const [layers, setLayers] = useRecoilState(mapLayersState);
   // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
   const [uniqueSystems, setUniqueSystems] = useState([]);
@@ -14,11 +17,11 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
 
   useEffect(() => {
-    console.log(
+    /* console.log(
       "GisStationsStaticDistrict in DataSheet:",
       GisStationsStaticDistrict
-    );
-    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
+    ); */
+    //console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
 
     // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
     const seenNames = new Set();
@@ -59,24 +62,28 @@ function DataSheet() {
       name: area.Name,
     }));
     setSystemListing(newSystemListing);
-    console.log("System Listing:", systemListing);
+    // console.log("System Listing:", systemListing);
   }, [GisStationsStaticDistrict]);
 
   const [checkedStations, setCheckedStations] = useState({});
 
-  const handleCheckboxChange = (id) => {
+  const handleCheckboxChange = (layerName) => {
     setCheckedStations((prev) => ({
       ...prev,
-      [id]: !prev[id],
+      [layerName]: !prev[layerName],
+    }));
+    setLayers((prevLayers) => ({
+      ...prevLayers,
+      [layerName]: !prevLayers[layerName],
     }));
   };
 
   const handleStationChange = (event) => {
-    console.log("Station selected:", event.target.value);
+    // console.log("Station selected:", event.target.value);
   };
 
   const resetView = () => {
-    console.log("View has been reset");
+    // console.log("View has been reset");
   };
 
   return (
@@ -115,7 +122,7 @@ function DataSheet() {
               id={`box-${station.id}`}
               className="accent-blue-500 checked:bg-blue-500"
               checked={checkedStations[station.id] || false}
-              onChange={() => handleCheckboxChange(station.id)}
+              onChange={() => handleCheckboxChange(station.name)}
             />
             <label
               htmlFor={`box-${station.id}`}