WIP: Bereich wird angezeigt, aber da ist noch ein Bug, Talas Marker erscheint trotz Checkbox ausgecheckt

components/DataSheet.js

@@ -20,6 +20,7 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
   const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
+  const [bereicheVisible, setBereicheVisible] = useState(false); // NEU: Bereiche-Status
   useEffect(() => {
     // LocalStorage Werte laden
     const storedPoiVisible = localStorage.getItem("poiVisible");
@@ -113,6 +114,12 @@ function DataSheet() {
     localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage
   };
   //---------------------------
+  const handleBereicheCheckboxChange = (event) => {
+    if (editMode) return;
+    const { checked } = event.target;
+    setBereicheVisible(checked);
+    localStorage.setItem("bereicheVisible", checked);
+  };
 
   //---------------------------
   return (
@@ -163,6 +170,13 @@ function DataSheet() {
               Kabelstrecken
             </label>
           </div>
+          {/* Bereiche */}
+          <div className="flex items-center">
+            <input type="checkbox" checked={bereicheVisible} onChange={handleBereicheCheckboxChange} id="bereiche-checkbox" disabled={editMode} />
+            <label htmlFor="bereiche-checkbox" className="text-sm ml-2">
+              Bereiche
+            </label>
+          </div>
         </div>
       </div>
     </div>

components/MapComponent.js

@@ -34,6 +34,7 @@ import { initializeMap } from "../utils/initializeMap.js";
 import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
 import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
 import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js";
+import useBereicheMarkersLayer from "../hooks/layers/useBereicheMarkersLayer.js";
 import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js";
 import { setupPolylines } from "../utils/setupPolylines.js";
 import { setupPOIs } from "../utils/setupPOIs.js";
@@ -109,6 +110,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [ulafMarkers, setUlafMarkers] = useState([]);
   const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
   const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);
+
   //const [lteModemMarkers, setLteModemMarkers] = useState([]);
 
   const [lineStatusData, setLineStatusData] = useState([]);
@@ -802,6 +804,16 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
   }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
   //---------------------------------------
+  // Initialisiere Leaflet-Karte
+  // Rufe useBereicheMarkersLayer direkt auf
+  const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12");
+
+  useEffect(() => {
+    if (map && oms) {
+      // Wenn zusätzliche Initialisierung nötig ist, führe sie hier aus.
+      console.log("Bereiche-Markierungen geladen:", bereicheMarkers);
+    }
+  }, [map, oms, bereicheMarkers]);
 
   //----------------------------------