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]);
 
   //----------------------------------
 

hooks/layers/useBereicheMarkersLayer.js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+// Definiere ein Standard-Icon
+const customIcon = new L.Icon({
+  iconUrl: "/img/marker-icon.png", // Beispielpfad: Passe dies auf dein Symbol an
+  iconSize: [25, 41], // Größe des Icons
+  iconAnchor: [12, 41], // Position des Icons
+  popupAnchor: [1, -34],
+  shadowUrl: "/img/marker-shadow.png", // Optionaler Schatten
+  shadowSize: [41, 41],
+});
+
+const useBereicheMarkersLayer = (map, oms, apiUrl) => {
+  const [bereicheMarkers, setBereicheMarkers] = useState([]);
+
+  useEffect(() => {
+    // Hole die Daten aus der API
+    const fetchBereiche = async () => {
+      try {
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+
+        const markers = data.map((item) => {
+          // Erstelle Marker für jedes Datenbank-Item
+          const marker = L.marker([item.x, item.y], { icon: customIcon }).bindPopup(`
+            <strong>ID Location:</strong> ${item.idLocation} <br />
+            <strong>ID Map:</strong> ${item.idMaps}
+          `);
+
+          return marker;
+        });
+
+        setBereicheMarkers(markers);
+      } catch (error) {
+        console.error("Fehler beim Laden der Bereiche:", error);
+      }
+    };
+
+    fetchBereiche();
+  }, [apiUrl]);
+
+  useEffect(() => {
+    if (map && bereicheMarkers.length) {
+      // Füge alle Marker zur Karte hinzu
+      bereicheMarkers.forEach((marker) => {
+        marker.addTo(map);
+        if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
+      });
+    }
+  }, [map, bereicheMarkers, oms]);
+  useEffect(() => {
+    if (!map) return; // Sicherheitsprüfung
+    if (bereicheMarkers.length > 0) {
+      bereicheMarkers.forEach((marker) => {
+        marker.addTo(map);
+        if (oms) oms.addMarker(marker);
+      });
+    }
+  }, [map, bereicheMarkers, oms]);
+
+  return bereicheMarkers;
+};
+
+export default useBereicheMarkersLayer;

pages/api/talas_v5_DB/bereich/readBereich.js

@@ -0,0 +1,51 @@
+import getPool from "../../../../utils/mysqlPool"; // Singleton-Pool importieren
+
+export default async function handler(req, res) {
+  const pool = getPool(); // Singleton-Pool verwenden
+
+  if (req.method !== "GET") {
+    return res.status(405).json({ error: "Nur GET Methode erlaubt" });
+  }
+
+  const { m: idMaps, idLocation } = req.query; // URL-Parameter "m" und "idLocation"
+
+  if (!idMaps) {
+    return res.status(400).json({ error: "idMaps (Parameter 'm') ist erforderlich" });
+  }
+
+  let query = "SELECT * FROM location_coordinates WHERE idMaps = ?";
+  const queryParams = [idMaps];
+
+  if (idLocation) {
+    query += " AND idLocation = ?";
+    queryParams.push(idLocation);
+  }
+
+  let connection;
+
+  try {
+    connection = await pool.getConnection(); // Verbindung aus dem Pool holen
+
+    // SQL-Abfrage ausführen
+    const [results] = await connection.query(query, queryParams);
+
+    if (results.length > 0) {
+      // Ergebnisse formatieren und zurückgeben
+      const formattedResults = results.map((row) => ({
+        idLocation: row.idLocation,
+        x: row.x,
+        y: row.y,
+        idMaps: row.idMaps,
+      }));
+
+      res.status(200).json(formattedResults);
+    } else {
+      res.status(404).json({ error: "Keine Koordinaten gefunden" });
+    }
+  } catch (error) {
+    console.error("Fehler beim Abrufen der Koordinaten:", error);
+    res.status(500).json({ error: "Interner Serverfehler beim Abrufen der Koordinaten" });
+  } finally {
+    if (connection) connection.release(); // Verbindung in den Pool zurückgeben
+  }
+}