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