107 lines
3.3 KiB
JavaScript
107 lines
3.3 KiB
JavaScript
import { useEffect, useState, useRef } 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",
|
|
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;
|
|
|
|
// Hole die Sichtbarkeitsdaten aus localStorage
|
|
const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
|
|
|
|
// Überprüfen, ob alle Layer unsichtbar sind
|
|
const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);
|
|
|
|
// Wenn die Sichtbarkeit gleich bleibt, breche die Ausführung ab
|
|
if (areAllLayersInvisible === prevVisibility.current) return;
|
|
|
|
// Speichere den neuen Sichtbarkeitsstatus
|
|
prevVisibility.current = areAllLayersInvisible;
|
|
|
|
// Füge Marker hinzu oder entferne sie basierend auf der Bedingung
|
|
bereicheMarkers.forEach((marker) => {
|
|
if (areAllLayersInvisible) {
|
|
marker.addTo(map);
|
|
if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
|
|
} else {
|
|
map.removeLayer(marker); // Entferne Marker, wenn die Bedingung nicht erfüllt ist
|
|
}
|
|
});
|
|
};
|
|
|
|
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) => {
|
|
const marker = L.marker([item.x, item.y], { icon: customIcon });
|
|
|
|
// Tooltip statt Popup
|
|
marker.bindTooltip(
|
|
`<strong>ID Location:</strong> ${item.idLocation} <br />
|
|
<strong>ID Map:</strong> ${item.idMaps}`,
|
|
{
|
|
permanent: false, // Tooltip wird nur bei Mouseover angezeigt
|
|
direction: "top", // Position des Tooltips relativ zum Marker
|
|
offset: [0, -20], // Verschiebung für bessere Sichtbarkeit
|
|
}
|
|
);
|
|
|
|
return marker;
|
|
});
|
|
|
|
setBereicheMarkers(markers);
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Bereiche:", error);
|
|
}
|
|
};
|
|
|
|
fetchBereiche();
|
|
}, [apiUrl]);
|
|
|
|
useEffect(() => {
|
|
// Initialisiere die Sichtbarkeit beim ersten Laden
|
|
updateMarkersVisibility();
|
|
|
|
// Listener für Änderungen in localStorage hinzufügen
|
|
const handleStorageChange = (event) => {
|
|
if (event.key === "mapLayersVisibility") {
|
|
updateMarkersVisibility();
|
|
}
|
|
};
|
|
|
|
window.addEventListener("storage", handleStorageChange);
|
|
|
|
// Fallback: Überwachung durch Intervall
|
|
const intervalId = setInterval(() => {
|
|
updateMarkersVisibility();
|
|
}, 500); // Alle 500ms prüfen
|
|
|
|
return () => {
|
|
// Entferne den Listener und das Intervall
|
|
window.removeEventListener("storage", handleStorageChange);
|
|
clearInterval(intervalId);
|
|
};
|
|
}, [map, bereicheMarkers, oms]);
|
|
|
|
return bereicheMarkers;
|
|
};
|
|
|
|
export default useBereicheMarkersLayer;
|