89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
import { useEffect } from "react";
|
|
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
|
|
|
|
const useGmaMarkersLayer = (
|
|
map,
|
|
gmaMarkers,
|
|
GisStationsMeasurements,
|
|
GMA,
|
|
oms
|
|
) => {
|
|
useEffect(() => {
|
|
if (map && gmaMarkers.length) {
|
|
// Filtere die relevanten Messungen für Fahrbahnzustand
|
|
const gmaMeasurements = GisStationsMeasurements.filter(
|
|
(m) => m.Gr === "Fahrbahnzustand"
|
|
);
|
|
|
|
gmaMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Finde die Messungen, die zu diesem Marker gehören
|
|
const relevantMeasurements = gmaMeasurements.filter(
|
|
(m) => m.Area_Name === marker.options.areaName
|
|
);
|
|
|
|
let measurements = {};
|
|
let area_name = marker.options.areaName;
|
|
|
|
relevantMeasurements.forEach((m) => {
|
|
measurements[m.Na] = m.Val;
|
|
});
|
|
|
|
// Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte
|
|
const lt = measurements["LT"] || "Datenlücke";
|
|
const fbt = measurements["FBT"] || "nicht verfügbar";
|
|
const gt = measurements["GT"] || "nicht verfügbar";
|
|
const rlf = measurements["RLF"] || "nicht verfügbar";
|
|
|
|
// Log die aktuellen Messwerte für den Marker
|
|
/*
|
|
console.log(
|
|
`Marker at ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`
|
|
);
|
|
*/
|
|
// Tooltip für den Marker binden
|
|
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 : ${lt} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-red-700">
|
|
<span>FBT : ${fbt} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-yellow-500">
|
|
<span>GT : ${gt}</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-green-700">
|
|
<span>RLF : ${rlf} %</span>
|
|
</div>
|
|
</div>
|
|
`,
|
|
{
|
|
permanent: true,
|
|
direction: "auto",
|
|
offset: [20, 0],
|
|
}
|
|
);
|
|
|
|
// Ereignisse für das Öffnen und Schließen des Tooltips
|
|
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;
|