107 lines
3.2 KiB
JavaScript
107 lines
3.2 KiB
JavaScript
// hooks/layers/useGmaMarkersLayer.js
|
|
import { useEffect } from "react";
|
|
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
|
|
|
|
const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
|
|
useEffect(() => {
|
|
if (!map || !isVisible) return;
|
|
|
|
// Entferne alte Marker
|
|
GMA.clearLayers();
|
|
|
|
markers.forEach((marker) => {
|
|
// Finde die Messungen, die zu diesem Marker gehören
|
|
const relevantMeasurements = GisStationsMeasurements.filter(
|
|
(m) => m.Area_Name === marker.options.areaName
|
|
);
|
|
|
|
let measurements = {};
|
|
let area_name = marker.options.areaName;
|
|
|
|
relevantMeasurements.forEach((m) => {
|
|
measurements[m.Na] = m.Val;
|
|
});
|
|
|
|
const lt = measurements["LT"] || "-";
|
|
const fbt = measurements["FBT"] || "-";
|
|
const gt = measurements["GT"] || "-";
|
|
const rlf = measurements["RLF"] || "-";
|
|
|
|
marker.bindTooltip(
|
|
`
|
|
<div class="p-0 rounded-lg bg-white bg-opacity-90 tooltip-content">
|
|
<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: [60, 0],
|
|
interactive: true,
|
|
}
|
|
);
|
|
|
|
// Tooltip-Kontextmenü auf Marker-Kontextmenü verlinken
|
|
marker.on("tooltipopen", (e) => {
|
|
const tooltipElement = e.tooltip._contentNode;
|
|
|
|
if (tooltipElement) {
|
|
tooltipElement.addEventListener("contextmenu", (event) => {
|
|
event.preventDefault(); // Standard-Kontextmenü verhindern
|
|
console.log("Rechtsklick auf Tooltip erkannt");
|
|
|
|
// Simuliere das Kontextmenü für den Marker
|
|
const simulatedEvent = {
|
|
latlng: marker.getLatLng(),
|
|
relatedTarget: marker,
|
|
originalEvent: event,
|
|
};
|
|
console.log("simulateEvent:",simulatedEvent )
|
|
|
|
marker.fire("contextmenu", simulatedEvent);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Entferne Listener, wenn Tooltip geschlossen wird
|
|
/* marker.on("tooltipclose", (e) => {
|
|
const tooltipElement = e.tooltip._contentNode;
|
|
if (tooltipElement) {
|
|
tooltipElement.removeEventListener("contextmenu", () => {});
|
|
//console.log("Tooltip geschlossen");
|
|
}
|
|
}); */
|
|
|
|
// Kontextmenü für Marker hinzufügen
|
|
addContextMenuToMarker(marker);
|
|
|
|
// Füge den Marker zur Layer-Gruppe hinzu
|
|
GMA.addLayer(marker);
|
|
oms.addMarker(marker);
|
|
});
|
|
|
|
map.addLayer(GMA);
|
|
|
|
return () => {
|
|
GMA.clearLayers();
|
|
map.removeLayer(GMA);
|
|
};
|
|
}, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
|
|
};
|
|
|
|
export default useMarkersLayer;
|