diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js index 815fe0034..95faf8e6e 100644 --- a/hooks/layers/useGmaMarkersLayer.js +++ b/hooks/layers/useGmaMarkersLayer.js @@ -1,9 +1,12 @@ import { useEffect } from "react"; import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; +import { addItemsToMapContextMenu } from "../../components/useMapContextMenu"; // Importiere die Funktion const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => { - const host = window.location.origin; - const url = `${host}/talas5/devices/`; + const protocol = window.location.protocol; // Holt das Protokoll (z.B. http oder https) + const hostname = window.location.hostname; // Holt den Hostnamen (z.B. 10.10.0.70) + const baseUrl = `${protocol}//${hostname}/talas5/devices/`; // Basis-URL zusammenstellen + useEffect(() => { if (!map || !isVisible) return; @@ -61,7 +64,51 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV event.preventDefault(); console.log("Rechtsklick auf Tooltip erkannt"); - // Erstelle ein benutzerdefiniertes Kontextmenü + // Kombiniere die Kontextmenü-Items + const combinedContextMenuItems = [ + { + text: "Station öffnen (Tab)", + icon: "/img/screen_new.png", + callback: () => { + if (marker.options.link) { + const fullUrl = `${baseUrl}${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."); + } + }, + }, + { separator: true }, + // Füge zusätzliche Items hinzu + ...[ + { + text: "Koordinaten anzeigen", + icon: "/img/not_listed_location.png", + callback: (e) => { + alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)); + }, + }, + { separator: true }, + { + text: "Reinzoomen", + icon: "img/zoom_in.png", + callback: () => map.zoomIn(), + }, + { + text: "Rauszoomen", + icon: "img/zoom_out.png", + callback: () => map.zoomOut(), + }, + { + text: "Hier zentrieren", + icon: "img/center_focus.png", + callback: (e) => map.panTo(e.latlng), + }, + ], + ]; + + // Benutzerdefiniertes Kontextmenü anzeigen const menu = document.createElement("div"); menu.className = "custom-context-menu"; menu.style.position = "absolute"; @@ -69,44 +116,40 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV menu.style.top = `${event.clientY}px`; menu.style.backgroundColor = "#fff"; menu.style.border = "1px solid #ccc"; - menu.style.padding = "8px"; + menu.style.padding = "4px"; menu.style.zIndex = "1000"; - // Menüeintrag mit Icon erstellen - const openStation = document.createElement("div"); - openStation.style.display = "flex"; - openStation.style.alignItems = "center"; - openStation.style.cursor = "pointer"; - - const icon = document.createElement("img"); - icon.src = "/img/screen_new.png"; // Pfad zum Icon - icon.alt = "Icon"; - icon.style.width = "16px"; - icon.style.height = "16px"; - icon.style.marginRight = "8px"; - - const text = document.createElement("span"); - text.textContent = "Station öffnen (Tab)"; - - openStation.appendChild(icon); - openStation.appendChild(text); - - openStation.onclick = () => { - if (marker.options.link) { - window.open(marker.options.link, "_blank"); + combinedContextMenuItems.forEach((item) => { + if (item.separator) { + const separator = document.createElement("hr"); + menu.appendChild(separator); } else { - console.error("Kein Link für Tooltip vorhanden."); + const menuItem = document.createElement("div"); + menuItem.style.display = "flex"; + menuItem.style.alignItems = "center"; + menuItem.style.cursor = "pointer"; + + 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); + } + + const text = document.createElement("span"); + text.textContent = item.text; + menuItem.appendChild(text); + + menuItem.onclick = item.callback; + menu.appendChild(menuItem); } - document.body.removeChild(menu); // Menü entfernen - }; + }); - // Menüeinträge zum Menü hinzufügen - menu.appendChild(openStation); - - // Menü zum DOM hinzufügen document.body.appendChild(menu); - // Menü entfernen, wenn irgendwo anders geklickt wird const handleClickOutside = () => { if (document.body.contains(menu)) { document.body.removeChild(menu);