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

fix: GMA Tooltip Kontextmenü schließen wenn versucht neu aufzurufen

Browse Source
This commit is contained in:
ISA
2024-12-16 13:49:43 +01:00
parent 1abe72f209
commit a00e322cbb
4 changed files with 54 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,63 +1,44 @@
import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
const zoomIn = (map, latlng) => {
if (!map) {
console.error("map is not defined in zoomIn");
return;
let currentMenu = null; // Variable für das aktuelle Kontextmenü
const closeContextMenu = () => {
if (currentMenu) {
currentMenu.remove();
currentMenu = null;
}
};
const zoomIn = (map, latlng) => {
if (!map) return;
const currentZoom = map.getZoom();
if (currentZoom < 14) {
map.flyTo(latlng, 14);
localStorage.setItem("mapZoom", 14);
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
}
};
const zoomOut = (map) => {
if (!map) {
console.error("map is not defined in zoomOut");
return;
}
const currentZoom = map.getZoom();
if (currentZoom > 7) {
const x = 51.41321407879154;
const y = 7.739617925303934;
const zoom = 7;
map.flyTo([x, y], zoom);
localStorage.setItem("mapZoom", zoom);
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
}
if (!map) return;
map.flyTo([51.4132, 7.7396], 7);
};
const centerHere = (e, map) => {
if (!map) {
console.error("map is not defined in centerHere");
return;
}
map.panTo(e.latlng);
localStorage.setItem("mapZoom", map.getZoom());
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
const centerHere = (map, latlng) => {
if (!map) return;
map.panTo(latlng);
};
useEffect(() => {
if (!map || !isVisible) return;
// Entferne alte Marker
GMA.clearLayers();
markers.forEach((marker) => {
const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);
const areaName = marker.options.areaName;
const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === areaName);
let measurements = {};
let area_name = marker.options.areaName;
relevantMeasurements.forEach((m) => {
measurements[m.Na] = m.Val;
});
@@ -67,41 +48,24 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
const gt = measurements["GT"] || "-";
const rlf = measurements["RLF"] || "-";
// Tooltip erstellen
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 class="font-bold text-sm text-black"><span>${areaName}</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,
}
{ permanent: true, interactive: true }
);
let currentMouseLatLng = null;
const mouseMoveHandler = (event) => {
currentMouseLatLng = event.latlng;
};
// Mousemove-Listener hinzufügen, um die aktuellen Koordinaten zu speichern
map.on("mousemove", mouseMoveHandler);
marker.on("tooltipopen", (e) => {
@@ -110,21 +74,16 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
if (tooltipElement) {
tooltipElement.addEventListener("contextmenu", (event) => {
event.preventDefault();
console.log("Rechtsklick auf Tooltip erkannt");
closeContextMenu(); // Altes Menü schließen
// Kombiniere die Kontextmenü-Items
// Kontextmenü-Items definieren
const combinedContextMenuItems = [
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: () => {
if (marker.options.link) {
const fullUrl = `${marker.options.link}`;
window.open(fullUrl, "_blank");
console.log("Link in neuem Tab geöffnet:", fullUrl);
} else {
console.error("Kein Link für Tooltip vorhanden.");
}
const fullUrl = marker.options.link || "http://example.com";
window.open(fullUrl, "_blank");
},
},
{ separator: true },
@@ -133,39 +92,29 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
icon: "/img/not_listed_location.png",
callback: () => {
if (currentMouseLatLng) {
alert(
`Breitengrad: ${currentMouseLatLng.lat.toFixed(5)}\nLängengrad: ${currentMouseLatLng.lng.toFixed(5)}`
);
} else {
console.error("Keine gültigen Koordinaten erkannt.");
alert(`Breitengrad: ${currentMouseLatLng.lat.toFixed(5)}\nLängengrad: ${currentMouseLatLng.lng.toFixed(5)}`);
}
},
},
{ separator: true },
{
text: "Reinzoomen",
icon: "img/zoom_in.png",
callback: () => {
const latlng = marker.getLatLng();
zoomIn(map, latlng);
},
icon: "/img/zoom_in.png",
callback: () => zoomIn(map, marker.getLatLng()),
},
{
text: "Rauszoomen",
icon: "img/zoom_out.png",
icon: "/img/zoom_out.png",
callback: () => zoomOut(map),
},
{
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: () => {
const latlng = marker.getLatLng();
centerHere({ latlng }, map);
},
icon: "/img/center_focus.png",
callback: () => centerHere(map, marker.getLatLng()),
},
];
// Benutzerdefiniertes Kontextmenü anzeigen
// Menü erstellen und anzeigen
const menu = document.createElement("div");
menu.className = "custom-context-menu";
menu.style.position = "absolute";
@@ -185,13 +134,12 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
menuItem.style.display = "flex";
menuItem.style.alignItems = "center";
menuItem.style.cursor = "pointer";
menuItem.style.padding = "4px";
if (item.icon) {
const icon = document.createElement("img");
icon.src = item.icon;
icon.alt = "Icon";
icon.style.width = "16px";
icon.style.height = "16px";
icon.style.marginRight = "8px";
menuItem.appendChild(icon);
}
@@ -200,20 +148,23 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
text.textContent = item.text;
menuItem.appendChild(text);
menuItem.onclick = item.callback;
menuItem.onclick = () => {
item.callback();
closeContextMenu();
};
menu.appendChild(menuItem);
}
});
document.body.appendChild(menu);
currentMenu = menu;
const handleClickOutside = () => {
if (document.body.contains(menu)) {
document.body.removeChild(menu);
const handleClickOutside = (e) => {
if (menu && !menu.contains(e.target)) {
closeContextMenu();
document.removeEventListener("click", handleClickOutside);
}
};
document.addEventListener("click", handleClickOutside);
});
}
@@ -221,10 +172,9 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
marker.on("tooltipclose", () => {
map.off("mousemove", mouseMoveHandler);
closeContextMenu();
});
addContextMenuToMarker(marker);
GMA.addLayer(marker);
oms.addMarker(marker);
});
@@ -234,8 +184,11 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
return () => {
GMA.clearLayers();
map.removeLayer(GMA);
closeContextMenu();
};
}, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
return null;
};
export default useGmaMarkersLayer;