POIs visible with checkbox

components/DataSheet.js

@@ -6,8 +6,11 @@ import { gisSystemStaticState } from "../store/atoms/gisSystemState";
 import { mapLayersState } from "../store/atoms/mapLayersState";
 import { selectedAreaState } from "../store/atoms/selectedAreaState";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
 
 function DataSheet() {
+  const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
+
   const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] =
     useRecoilState(mapLayersState);
@@ -142,6 +145,18 @@ function DataSheet() {
               <br />
             </React.Fragment>
           ))}
+          <input
+            type="checkbox"
+            checked={poiVisible}
+            onChange={(e) => {
+              const checked = e.target.checked;
+              setPoiVisible(checked);
+              console.log(
+                `POIs sind jetzt ${checked ? "sichtbar" : "nicht sichtbar"}.`
+              );
+            }}
+          />
+          <label className="text-sm ml-2">POIs</label>
         </div>
       </div>
     </div>