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

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;