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

3
config/appVersion.js
View File

@@ -1,5 +1,2 @@
// /config/appVersion // /config/appVersion
// Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
export const APP_VERSION = "1.0.16.0"; export const APP_VERSION = "1.0.16.0";
//export const STANDARD_SIDE_MENU = true;
//export const FULL_SIDE_MENU = false;

2
config/urls.js
View File

@@ -10,7 +10,7 @@ if (typeof window !== "undefined") {
BASE_URL = `${originWithoutPort}/api`; // Dynamische Basis-URL BASE_URL = `${originWithoutPort}/api`; // Dynamische Basis-URL
SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port
PROXY_TARGET = `${originWithoutPort}:3000`; // Dynamisch für einen Proxy PROXY_TARGET = `${originWithoutPort}:4000`; // Dynamisch für einen Proxy
//OFFLINE_TILE_LAYER = "http://10.10.0.70:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server //OFFLINE_TILE_LAYER = "http://10.10.0.70:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
//OFFLINE_TILE_LAYER = "http://10.10.0.70/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server //OFFLINE_TILE_LAYER = "http://10.10.0.70/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server

145
hooks/layers/useGmaMarkersLayer.js
View File

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

5
utils/initializeMap.js
View File

@@ -1,4 +1,7 @@
// utils/initializeMap.js // utils/initializeMap.js
// TODO: Add a comment
//FIXME: Add a comment
//BUG: Add a comment
import L from "leaflet"; import L from "leaflet";
import "leaflet-contextmenu"; import "leaflet-contextmenu";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
@@ -44,7 +47,7 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
try { try {
if (clickedElement instanceof L.Marker || clickedElement?.options?.link) { if (clickedElement instanceof L.Marker || clickedElement?.options?.link) {
const link = clickedElement.options.link; const link = "/talas5/devices/" + clickedElement.options.link;
if (link) { if (link) {
console.log("Opening link in a new tab:", link); console.log("Opening link in a new tab:", link);
window.open(link, "_blank"); window.open(link, "_blank");