Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: rechte Maustaste über GMA ToolTip

Browse Source
This commit is contained in:
ISA
2024-12-11 22:21:04 +01:00
parent 727e4f6edc
commit 86af261e1f
1 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,15 +1,14 @@
//hooks/layers/useGmaMarkersLayer.js
// 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; // Bedingung hier prüfen
if (!map || !isVisible) return;
// Entferne alte Marker
GMA.clearLayers();
// Hinzufügen neuer Marker
markers.forEach((marker) => {
// Finde die Messungen, die zu diesem Marker gehören
const relevantMeasurements = GisStationsMeasurements.filter(
@@ -18,19 +17,16 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
let measurements = {};
let area_name = marker.options.areaName;
let idLD = marker.options.idLD;
relevantMeasurements.forEach((m) => {
measurements[m.Na] = m.Val;
});
// Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte
const lt = measurements["LT"] || "-";
const fbt = measurements["FBT"] || "-";
const gt = measurements["GT"] || "-";
const rlf = measurements["RLF"] || "-";
// Tooltip für den Marker binden
marker.bindTooltip(
`
<div class="p-0 rounded-lg bg-white bg-opacity-90 tooltip-content">
@@ -55,37 +51,40 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
permanent: true,
direction: "auto",
offset: [60, 0],
interactive: true, // Tooltip is now interactive
interactive: true,
}
);
// Hinzufügen eines Kontextmenüs direkt zum Tooltip
marker.on("tooltipopen", function (e) {
// Tooltip-Kontextmenü auf Marker-Kontextmenü verlinken
marker.on("tooltipopen", (e) => {
const tooltipElement = e.tooltip._contentNode;
if (tooltipElement) {
tooltipElement.addEventListener("contextmenu", (event) => {
event.preventDefault(); // Verhindere das Standard-Kontextmenü
console.log("Rechtsklick auf Tooltip erkannt", {
tooltipContent: tooltipElement.innerHTML,
link: marker.options.link,
});
event.preventDefault(); // Standard-Kontextmenü verhindern
console.log("Rechtsklick auf Tooltip erkannt");
if (marker.options.link) {
window.open(marker.options.link, "_blank");
} else {
console.error("Kein Tooltip-Link vorhanden.");
}
// Simuliere das Kontextmenü für den Marker
const simulatedEvent = {
latlng: marker.getLatLng(),
relatedTarget: marker,
originalEvent: event,
};
console.log("simulateEvent:",simulatedEvent )
marker.fire("contextmenu", simulatedEvent);
});
}
});
// Ereignisse für das Öffnen und Schließen des Tooltips
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
// 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);
@@ -99,7 +98,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
return () => {
GMA.clearLayers();
map.removeLayer(GMA); // Entferne die Layer, wenn der Hook gereinigt wird
map.removeLayer(GMA);
};
}, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
};