77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
// hooks/useUlafMarkersLayer.js
|
|
import { useEffect, useState } from "react";
|
|
import L from "leaflet";
|
|
import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
|
|
//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;
|