Files
nodeMap/hooks/layers/useWagoMarkersLayer.js

50 lines
1.5 KiB
JavaScript

// hooks/useWagoMarkersLayer.js
import { useState, useEffect } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
const [wagoMarkers, setWagoMarkers] = useState([]);
useEffect(() => {
if (gisSystemStatic && gisSystemStatic.length && map) {
createAndSetDevices(7, setWagoMarkers, gisSystemStatic, priorityConfig); // WAGO-System
}
}, [gisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && wagoMarkers.length) {
wagoMarkers.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 = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, wagoMarkers, oms]);
return wagoMarkers;
};
export default useWagoMarkersLayer;