diff --git a/config/appVersion.js b/config/appVersion.js index 4b13696cd..17f916373 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,5 +1,2 @@ // /config/appVersion -// Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte export const APP_VERSION = "1.0.16.0"; -//export const STANDARD_SIDE_MENU = true; -//export const FULL_SIDE_MENU = false; diff --git a/config/urls.js b/config/urls.js index 485f10ff3..61b8e653e 100644 --- a/config/urls.js +++ b/config/urls.js @@ -10,7 +10,7 @@ if (typeof window !== "undefined") { BASE_URL = `${originWithoutPort}/api`; // Dynamische Basis-URL 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/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js index 9f53f5b74..cf595f9c0 100644 --- a/hooks/layers/useGmaMarkersLayer.js +++ b/hooks/layers/useGmaMarkersLayer.js @@ -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( - ` + `
-
- ${area_name} -
-
- LT : ${lt} °C -
-
- FBT : ${fbt} °C -
-
- GT : ${gt} °C -
-
- RLF : ${rlf} % -
+
${areaName}
+
LT: ${lt} °C
+
FBT: ${fbt} °C
+
GT: ${gt} °C
+
RLF: ${rlf} %
`, - { - 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; diff --git a/utils/initializeMap.js b/utils/initializeMap.js index b3b7bfb4b..cd55b4165 100644 --- a/utils/initializeMap.js +++ b/utils/initializeMap.js @@ -1,4 +1,7 @@ // utils/initializeMap.js +// TODO: Add a comment +//FIXME: Add a comment +//BUG: Add a comment import L from "leaflet"; import "leaflet-contextmenu"; import "leaflet/dist/leaflet.css"; @@ -44,7 +47,7 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems try { if (clickedElement instanceof L.Marker || clickedElement?.options?.link) { - const link = clickedElement.options.link; + const link = "/talas5/devices/" + clickedElement.options.link; if (link) { console.log("Opening link in a new tab:", link); window.open(link, "_blank");