WIP: ein sicherung nur mit alles

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";
+            combinedContextMenuItems.forEach((item) => {
+              if (item.separator) {
+                const separator = document.createElement("hr");
+                menu.appendChild(separator);
+              } else {
+                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 = "/img/screen_new.png"; // Pfad zum Icon
+                  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 = "Station öffnen (Tab)";
+                text.textContent = item.text;
+                menuItem.appendChild(text);
 
-            openStation.appendChild(icon);
-            openStation.appendChild(text);
-
-            openStation.onclick = () => {
-              if (marker.options.link) {
-                window.open(marker.options.link, "_blank");
-              } else {
-                console.error("Kein Link für Tooltip vorhanden.");
+                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);