Kontext Menü openInNewTab und openInSameWindow ganz oben in Kontext Menü anordnen

components/MapComponent.js

@@ -1,5 +1,5 @@
 // components/MapComponent.js
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 //import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
 import L, { marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -127,10 +127,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       console.error("Fehler beim Aktualisieren der Position");
     }
   };
+  //---------------------------------------------
 
   //----------------------------------------------------
   //-----Kontextmenu----------------
   function addContextMenuToMarker(marker) {
+    marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
+
     marker.bindContextMenu({
       contextmenu: true,
       contextmenuWidth: 140,
@@ -150,14 +153,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }
   // Funktion zum Öffnen in einem neuen Tab
   function openInNewTab(e, marker) {
-    console.log("Marker data:", baseUrl + marker.options.link);
+    if (marker && marker.options && marker.options.link) {
-    window.open(baseUrl + marker.options.link, "_blank");
+      console.log("Marker data:", baseUrl + marker.options.link);
+      window.open(baseUrl + marker.options.link, "_blank");
+    } else {
+      console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
+    }
   }
 
   // Funktion zum Öffnen im gleichen Fenster
   function openInSameWindow(e, marker) {
-    console.log("Marker data:", baseUrl + marker.options.link);
+    if (marker && marker.options && marker.options.link) {
-    window.location.href = baseUrl + marker.options.link;
+      console.log("Marker data:", baseUrl + marker.options.link);
+      window.location.href = baseUrl + marker.options.link;
+    } else {
+      console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
+    }
   }
 
   const zoomIn = (e) => {
@@ -205,6 +216,52 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     setShowPopup(true); // Popup öffnen
   };
   //-----Kontextmenu----ende------------
+  //--------------------------------------------------------------------------------
+
+  // Verwende useMemo, um die Kontextmenü-Items nur zu initialisieren, wenn notwendig
+  const contextMenuItems = useMemo(
+    () => [
+      {
+        text: "Station öffnen (Tab)",
+        icon: "/img/screen_new.png",
+        callback: (e) => {
+          const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
+          openInNewTab(e, clickedMarker);
+        },
+      },
+      {
+        text: "Station öffnen",
+        icon: "/img/screen_same.png",
+        //callback: (e) => openInSameWindow(e, marker),
+        callback: (e) => {
+          const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
+          openInSameWindow(e, clickedMarker);
+        },
+      },
+      "-", // Divider
+      {
+        text: "Station hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: addStationCallback,
+      },
+      {
+        text: "Koordinaten anzeigen",
+        icon: "img/not_listed_location.png",
+        callback: showCoordinates,
+      },
+      "-", // Divider
+      { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
+      { text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut },
+      {
+        text: "Hier zentrieren",
+        icon: "img/center_focus.png",
+        callback: centerHere,
+      },
+    ],
+    []
+  );
+  //----------------------------------------------------------------------------------
   //------------------------------------------ */
   const layerNames = {
     "GSM Modem": "GSMMODEM",
@@ -653,32 +710,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         maxZoom: 15, // Maximale Zoomstufe
         zoomControl: false,
         contextmenu: true,
-        contextmenuItems: [
+        contextmenuItems: contextMenuItems,
-          {
-            text: "Station hinzufügen",
-            icon: "img/add_station.png",
-            //style background red color
-            className: "background-red",
-            callback: addStationCallback,
-          },
-          {
-            text: "Koordinaten",
-            icon: "img/not_listed_location.png",
-            callback: showCoordinates,
-          },
-          "-", // Divider
-          { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
-          {
-            text: "Rauszoomen",
-            icon: "img/zoom_out.png",
-            callback: zoomOut,
-          },
-          {
-            text: "Hier zentrieren",
-            icon: "img/center_focus.png",
-            callback: centerHere,
-          },
-        ],
       });
 
       L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
@@ -889,7 +921,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       talasMarkers.forEach((marker) => {
         marker.addTo(map);
         oms.addMarker(marker);
-        //console.log("Talas marker:", marker._latlng.lat, marker._latlng.lng);
 
         // Popup beim Überfahren mit der Maus öffnen und schließen
         marker.on("mouseover", function () {
@@ -898,28 +929,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
-        /*       //--------------
-        const latitude = marker._latlng.lat;
-        const longitude = marker._latlng.lng;
-        const plusMarker = L.marker([latitude, longitude], {
-          icon: plusRoundIcon,
-          zIndexOffset: 1000, // Higher z-index for visibility
-        });
 
-        // Add to the poiLayer
-        plusMarker.addTo(poiLayerRef.current);
-        console.log("Adding plus icon marker at", [latitude, longitude]);
-        //------------ */
         addContextMenuToMarker(marker);
       });
       map.addLayer(TALAS);
+      console.log("map", map);
+      console.log("oms", oms);
+      //disable map contextmenu
+      map.options.contextmenu = false;
+      map.options.contextmenuItems = [];
+
+      oms.map.options.contextmenu = false;
+      oms.map.options.contextmenuItems = [];
 
       // Call the function here
       checkOverlappingMarkers(oms, map, plusRoundIcon);
     }
   }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
 
-  //console.log("talasMarkers", talasMarkers);
   //-------------------------------------------
   //--------------------------------------------------------------------------------
   useEffect(() => {