bereich.png erstellt und bei editMode active marker.setZIndexOffset(1000);

hooks/layers/useBereicheMarkersLayer.js

@@ -1,10 +1,11 @@
 import { useEffect, useState, useRef } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
+import { updateLocation } from "../../utils/updateBereichUtil";
 
 // Definiere ein Standard-Icon
 const customIcon = new L.Icon({
-  iconUrl: "/img/marker-icon.png",
+  iconUrl: "/img/bereich.png",
   iconSize: [25, 41],
   iconAnchor: [12, 41],
   popupAnchor: [1, -34],
@@ -100,6 +101,64 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
     };
   }, [map, bereicheMarkers, oms]);
 
+  useEffect(() => {
+    const fetchBereiche = async () => {
+      try {
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+
+        const markers = data.map((item) => {
+          const marker = L.marker([item.x, item.y], {
+            icon: customIcon,
+            draggable: true, // Ermöglicht Drag-and-Drop
+          });
+
+          // Tooltip
+          marker.bindTooltip(
+            `<strong>ID Location:</strong> ${item.idLocation} <br />
+             <strong>ID Map:</strong> ${item.idMaps}`,
+            {
+              permanent: false,
+              direction: "top",
+              offset: [0, -20],
+            }
+          );
+
+          // Event-Listener für Drag-End
+          marker.on("dragend", async (e) => {
+            const { lat, lng } = e.target.getLatLng();
+            try {
+              await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng });
+              console.log("Koordinaten erfolgreich aktualisiert:", { lat, lng });
+            } catch (error) {
+              console.error("Fehler beim Aktualisieren der Koordinaten:", error);
+            }
+          });
+
+          return marker;
+        });
+
+        setBereicheMarkers(markers);
+      } catch (error) {
+        console.error("Fehler beim Laden der Bereiche:", error);
+      }
+    };
+
+    fetchBereiche();
+  }, [apiUrl]);
+
+  useEffect(() => {
+    if (map) {
+      bereicheMarkers.forEach((marker) => marker.addTo(map));
+    }
+
+    return () => {
+      if (map) {
+        bereicheMarkers.forEach((marker) => map.removeLayer(marker));
+      }
+    };
+  }, [map, bereicheMarkers]);
+
   return bereicheMarkers;
 };