Add pointer cursor to expand icon and link zoom-out functionality

components/DataSheet.js

@@ -5,6 +5,7 @@ import { gisStationsStaticDistrictState } from "../store/gisStationState";
 import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
 import { selectedAreaState } from "../store/selectedAreaState";
+import { zoomTriggerState } from "../store/zoomTriggerState";
 
 function DataSheet() {
   const setSelectedArea = useSetRecoilState(selectedAreaState);
@@ -72,20 +73,26 @@ function DataSheet() {
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
 
-const handleCheckboxChange = (name, event) => {
-  const { checked } = event.target;
-  //console.log(`Checkbox ${name} checked state:`, checked);  // Log the checked state of the checkbox
+  const handleCheckboxChange = (name, event) => {
+    const { checked } = event.target;
+    //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
-    return newState;
-  });
-};
+    setMapLayersVisibility((prev) => {
+      const newState = {
+        ...prev,
+        [name]: checked,
+      };
+      //console.log(`New mapLayersVisibility state:`, newState);  // Log the new state after update
+      return newState;
+    });
+  };
+  //---------------------------------------------------------
+  const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
+  const handleIconClick = () => {
+    setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
+  };
+  //---------------------------------------------------------
 
   return (
     <div
@@ -109,7 +116,8 @@ const handleCheckboxChange = (name, event) => {
           <img
             src="/img/expand-icon.svg"
             alt="Expand"
-            className="h-6 w-6 ml-2"
+            className="h-6 w-6 ml-2 cursor-pointer"
+            onClick={handleIconClick}
           />
         </div>
         <div>