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

WIP: ToolTip rechte Maustaste wird erkannt

Browse Source
This commit is contained in:
ISA
2024-12-11 21:36:52 +01:00
parent c45c31714e
commit 727e4f6edc
1 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
hooks/layers/useGmaMarkersLayer.js
View File

@@ -12,7 +12,9 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
// Hinzufügen neuer Marker // 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((m) => m.Area_Name === marker.options.areaName); const relevantMeasurements = GisStationsMeasurements.filter(
(m) => m.Area_Name === marker.options.areaName
);
let measurements = {}; let measurements = {};
let area_name = marker.options.areaName; let area_name = marker.options.areaName;
@@ -28,12 +30,10 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
const gt = measurements["GT"] || "-"; const gt = measurements["GT"] || "-";
const rlf = measurements["RLF"] || "-"; const rlf = measurements["RLF"] || "-";
//console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`);
// Tooltip für den Marker binden // Tooltip für den Marker binden
marker.bindTooltip( marker.bindTooltip(
` `
<div class="p-0 rounded-lg bg-white bg-opacity-90"> <div class="p-0 rounded-lg bg-white bg-opacity-90 tooltip-content">
<div class="font-bold text-sm text-black"> <div class="font-bold text-sm text-black">
<span>${area_name}</span> <span>${area_name}</span>
</div> </div>
@@ -55,9 +55,30 @@ 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
} }
); );
// Hinzufügen eines Kontextmenüs direkt zum Tooltip
marker.on("tooltipopen", function (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,
});
if (marker.options.link) {
window.open(marker.options.link, "_blank");
} else {
console.error("Kein Tooltip-Link vorhanden.");
}
});
}
});
// Ereignisse für das Öffnen und Schließen des Tooltips // Ereignisse für das Öffnen und Schließen des Tooltips
marker.on("mouseover", function () { marker.on("mouseover", function () {
this.openPopup(); this.openPopup();
@@ -66,7 +87,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
this.closePopup(); this.closePopup();
}); });
// Kontextmenü hinzufügen // Kontextmenü für Marker hinzufügen
addContextMenuToMarker(marker); addContextMenuToMarker(marker);
// Füge den Marker zur Layer-Gruppe hinzu // Füge den Marker zur Layer-Gruppe hinzu