Files
nodeMap/hooks/layers/useOtdrMarkersLayer.js
2024-09-03 11:30:37 +02:00

46 lines
1.3 KiB
JavaScript

// hooks/useOtdrMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
import { createAndSetDevices } from "../../utils/createAndSetDevices"; // Assuming this function is in poiUtils
const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [otdrMarkers, setOtdrMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && otdrMarkers.length) {
otdrMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, otdrMarkers, oms]);
return otdrMarkers;
};
export default useOtdrMarkersLayer;