131 lines
4.3 KiB
JavaScript
131 lines
4.3 KiB
JavaScript
import { useEffect } from "react";
|
|
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
|
|
|
|
const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
|
|
useEffect(() => {
|
|
if (!map || !isVisible) return;
|
|
|
|
// Entferne alte Marker
|
|
GMA.clearLayers();
|
|
|
|
markers.forEach((marker) => {
|
|
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} °C</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,
|
|
}
|
|
);
|
|
|
|
marker.on("tooltipopen", (e) => {
|
|
const tooltipElement = e.tooltip._contentNode;
|
|
|
|
if (tooltipElement) {
|
|
tooltipElement.addEventListener("contextmenu", (event) => {
|
|
event.preventDefault();
|
|
console.log("Rechtsklick auf Tooltip erkannt");
|
|
|
|
// Erstelle ein benutzerdefiniertes Kontextmenü
|
|
const menu = document.createElement("div");
|
|
menu.className = "custom-context-menu";
|
|
menu.style.position = "absolute";
|
|
menu.style.left = `${event.clientX}px`;
|
|
menu.style.top = `${event.clientY}px`;
|
|
menu.style.backgroundColor = "#fff";
|
|
menu.style.border = "1px solid #ccc";
|
|
menu.style.padding = "8px";
|
|
menu.style.zIndex = "1000";
|
|
|
|
// Menüeinträge hinzufügen
|
|
const openStation = document.createElement("div");
|
|
openStation.textContent = "Station öffnen (Tab)";
|
|
openStation.style.cursor = "pointer";
|
|
openStation.onclick = () => {
|
|
if (marker.options.link) {
|
|
window.open(marker.options.link, "_blank");
|
|
} else {
|
|
console.error("Kein Link für Tooltip vorhanden.");
|
|
}
|
|
document.body.removeChild(menu); // Menü entfernen
|
|
};
|
|
|
|
const showDetails = document.createElement("div");
|
|
showDetails.textContent = "Details anzeigen";
|
|
showDetails.style.cursor = "pointer";
|
|
showDetails.onclick = () => {
|
|
alert(`Details für ${area_name}`);
|
|
document.body.removeChild(menu); // Menü entfernen
|
|
};
|
|
|
|
// Menüeinträge zum Menü hinzufügen
|
|
menu.appendChild(openStation);
|
|
menu.appendChild(document.createElement("hr"));
|
|
menu.appendChild(showDetails);
|
|
|
|
// Menü zum DOM hinzufügen
|
|
document.body.appendChild(menu);
|
|
|
|
// Menü entfernen, wenn irgendwo anders geklickt wird
|
|
const handleClickOutside = () => {
|
|
if (document.body.contains(menu)) {
|
|
document.body.removeChild(menu);
|
|
document.removeEventListener("click", handleClickOutside);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("click", handleClickOutside);
|
|
});
|
|
}
|
|
});
|
|
|
|
addContextMenuToMarker(marker);
|
|
|
|
GMA.addLayer(marker);
|
|
oms.addMarker(marker);
|
|
});
|
|
|
|
map.addLayer(GMA);
|
|
|
|
return () => {
|
|
GMA.clearLayers();
|
|
map.removeLayer(GMA);
|
|
};
|
|
}, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
|
|
};
|
|
|
|
export default useGmaMarkersLayer;
|