64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
import { useEffect } from "react";
|
|
import { addContextMenuToMarker } from "../utils/contextMenuUtils";
|
|
|
|
const useGmaMarkersLayer = (map, gmaMarkers, GisStationsMeasurements, GMA, oms) => {
|
|
useEffect(() => {
|
|
if (map && gmaMarkers.length) {
|
|
const gmaMeasurements = GisStationsMeasurements.filter((m) => m.Gr === "GMA");
|
|
let area_name = "";
|
|
let measurements = {};
|
|
|
|
gmaMeasurements.forEach((m) => {
|
|
area_name = m.Area_Name;
|
|
measurements[m.Na] = m.Val;
|
|
});
|
|
|
|
gmaMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Logging the data to debug
|
|
//console.log("Marker Data:", { area_name, measurements });
|
|
|
|
marker.bindTooltip(
|
|
`
|
|
<div class="p-0 rounded-lg bg-white bg-opacity-90">
|
|
<div class="font-bold text-sm text-black">
|
|
<span>${area_name}</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-blue-700">
|
|
<span>LT : ${measurements.LT} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-red-700">
|
|
<span>FBT : ${measurements.FBT} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-yellow-500">
|
|
<span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-green-700">
|
|
<span>RLF : ${measurements.RLF} %</span>
|
|
</div>
|
|
</div>
|
|
`,
|
|
{
|
|
permanent: true,
|
|
direction: "auto",
|
|
offset: [20, 0],
|
|
},
|
|
);
|
|
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(GMA);
|
|
}
|
|
}, [map, gmaMarkers, GisStationsMeasurements, GMA, oms]);
|
|
};
|
|
|
|
export default useGmaMarkersLayer;
|