Files
nodeMap/hooks/layers/useUlafMarkersLayer.js

77 lines
2.1 KiB
JavaScript

// hooks/useUlafMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
//import { fetchDeviceNameById } from "../services/apiService";
const useUlafMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [ulafMarkers, setUlafMarkers] = useState([]);
useEffect(() => {
if (!map || !GisSystemStatic) return;
const markers = [];
GisSystemStatic.forEach((station) => {
if (station.System === 0) {
// Adjust the condition to match ULAF system identification
const marker = L.marker([station.Lat, station.Lon], {
icon: L.icon({
iconUrl: "/img/icons/ulaf.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
id: station.id,
name: station.name,
description: station.description,
});
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
${station.description || "Keine Beschreibung"}
</div>
`);
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("click", async () => {
//const deviceName = await fetchDeviceNameById(station.idLD);
marker
.bindPopup(
`
<div>
<b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
${deviceName}<br>
${station.description || "Keine Beschreibung"}
</div>
`
)
.openPopup();
});
markers.push(marker);
if (map) marker.addTo(map);
if (oms) oms.addMarker(marker);
addContextMenuToMarker(marker);
}
});
setUlafMarkers(markers);
return () => {
markers.forEach((marker) => map.removeLayer(marker));
};
}, [map, GisSystemStatic, oms, priorityConfig]);
return ulafMarkers;
};
export default useUlafMarkersLayer;