131 lines
3.6 KiB
JavaScript
131 lines
3.6 KiB
JavaScript
// /hooks/layers/useBereicheMarkersLayer.js
|
|
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/bereich.png",
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowUrl: "/img/marker-shadow.png",
|
|
shadowSize: [41, 41],
|
|
});
|
|
|
|
const useBereicheMarkersLayer = (map, oms, apiUrl) => {
|
|
const [bereicheMarkers, setBereicheMarkers] = useState([]);
|
|
const prevVisibility = useRef(null); // Referenz, um vorherige Sichtbarkeitsdaten zu speichern
|
|
|
|
const updateMarkersVisibility = () => {
|
|
if (!map || bereicheMarkers.length === 0) return;
|
|
|
|
const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
|
|
|
|
const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);
|
|
|
|
if (areAllLayersInvisible === prevVisibility.current) return;
|
|
|
|
prevVisibility.current = areAllLayersInvisible;
|
|
|
|
bereicheMarkers.forEach((marker) => {
|
|
if (areAllLayersInvisible) {
|
|
marker.addTo(map);
|
|
if (oms) oms.addMarker(marker);
|
|
} else {
|
|
map.removeLayer(marker);
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
updateMarkersVisibility();
|
|
|
|
const handleStorageChange = (event) => {
|
|
if (event.key === "mapLayersVisibility") {
|
|
updateMarkersVisibility();
|
|
}
|
|
};
|
|
|
|
window.addEventListener("storage", handleStorageChange);
|
|
|
|
const intervalId = setInterval(() => {
|
|
updateMarkersVisibility();
|
|
}, 500);
|
|
|
|
return () => {
|
|
window.removeEventListener("storage", handleStorageChange);
|
|
clearInterval(intervalId);
|
|
};
|
|
}, [map, bereicheMarkers, oms]);
|
|
|
|
useEffect(() => {
|
|
const fetchBereiche = async () => {
|
|
try {
|
|
const response = await fetch(apiUrl);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
const markers = data.map((item) => {
|
|
const marker = L.marker([item.x, item.y], {
|
|
icon: customIcon,
|
|
draggable: true,
|
|
});
|
|
|
|
marker.bindTooltip(
|
|
`
|
|
<strong>Bereich:</strong> ${item.location_name} <br />
|
|
<strong>Standort:</strong> ${item.area_name} <br />
|
|
`,
|
|
{
|
|
permanent: false,
|
|
direction: "top",
|
|
offset: [0, -20],
|
|
}
|
|
);
|
|
|
|
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.message);
|
|
setBereicheMarkers([]); // Wichtig: Leere Liste setzen, kein reload oder Ausnahme erzeugen
|
|
}
|
|
};
|
|
|
|
fetchBereiche();
|
|
}, [apiUrl]);
|
|
|
|
useEffect(() => {
|
|
if (map) {
|
|
bereicheMarkers.forEach((marker) => marker.addTo(map));
|
|
}
|
|
|
|
return () => {
|
|
if (map) {
|
|
bereicheMarkers.forEach((marker) => map.removeLayer(marker));
|
|
}
|
|
};
|
|
}, [map, bereicheMarkers]);
|
|
|
|
return bereicheMarkers;
|
|
};
|
|
|
|
export default useBereicheMarkersLayer;
|