contexmenu handle in MapComponent wegen error contextmenu nicht vorhanden

components/MapComponent.js

@@ -655,6 +655,20 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       // Setze die Karteninstanz in den Recoil-Atom
     }
   }, [map]);
+  //--------------------------------------------
+  // contextmenü Error "Contextmenu ist nicht vorhanden"
+  useEffect(() => {
+    if (map) {
+      // Überprüfe, ob die Karte und das Contextmenu existieren
+      if (map.contextmenu) {
+        console.log("Contextmenu ist vorhanden");
+        // Hier kannst du deine Logik für das Contextmenu hinzufügen
+        map.contextmenu.hide(); // Beispiel: Contextmenu verstecken
+      } else {
+        console.warn("Contextmenu ist nicht vorhanden");
+      }
+    }
+  }, [map]);
 
   return (
     <>

hooks/useLineData.js

@@ -2,38 +2,12 @@
 import { useEffect, useState } from "react";
 import { SERVER_URL } from "../config/urls";
 import { useDispatch, useSelector } from "react-redux";
-import { connectWebSocket, disconnectWebSocket } from "../redux/actions";
 
 const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
   const dispatch = useDispatch();
   const messages = useSelector((state) => state.messages);
   const [lineColors, setLineColors] = useState({});
   const [tooltipContents, setTooltipContents] = useState({});
-  const [webSocketMessages, setWebSocketMessages] = useState([]);
-
-  useEffect(() => {
-    const ws = new WebSocket("ws://localhost:3001"); // Verwende den externen WebSocket-Server
-
-    ws.onopen = () => {
-      console.log("WebSocket-Verbindung hergestellt");
-      // Testnachricht an den Server senden
-      ws.send(JSON.stringify({ type: "test", message: "Hallo vom Client" }));
-    };
-
-    ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      setWebSocketMessages((prev) => [...prev, message]);
-      console.log("WebSocket-Nachricht erhalten:", message);
-    };
-
-    ws.onclose = () => {
-      console.log("WebSocket-Verbindung geschlossen");
-    };
-
-    return () => {
-      ws.close();
-    };
-  }, []);
 
   useEffect(() => {
     let isCancelled = false; // Flag to cancel ongoing operations if component unmounts

utils/initializeMap.js

@@ -5,9 +5,9 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import * as urls from "../config/urls.js";
 import * as layers from "../config/layers.js";
-import { openInNewTab } from "./openInNewTab.js"; // Korrigiert
+import { openInNewTab } from "./openInNewTab.js";
 
-export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
+export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
   if (mapRef.current) {
     const initMap = L.map(mapRef.current, {
       center: [53.111111, 8.4625],
@@ -25,20 +25,25 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
             const link = localStorage.getItem("polylineLink");
             const clickedElement = e.relatedTarget;
 
-            // Überprüfe, ob der Kontextklick auf eine Polyline oder einen Marker erfolgt ist
+            // Überprüfe, ob Karte und contextmenu existieren
-            if (link) {
+            if (initMap && initMap.contextmenu) {
-              const newTab = window.open(link, "_blank");
+              // Verarbeite Kontextmenü-Callback
-              if (newTab) {
+              if (link) {
-                // Wenn der Tab geöffnet wird, lösche die `localStorage`-Einträge
+                const newTab = window.open(link, "_blank");
-                localStorage.removeItem("polylineLink");
+                if (newTab) {
-                localStorage.removeItem("lastElementType");
+                  // Lösche Einträge im localStorage
+                  localStorage.removeItem("polylineLink");
+                  localStorage.removeItem("lastElementType");
+                } else {
+                  console.error("Fehler: Das neue Tab konnte nicht geöffnet werden.");
+                }
+              } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
+                openInNewTab(e, clickedElement);
               } else {
-                console.error("Fehler: Das neue Tab konnte nicht geöffnet werden.");
+                console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
               }
-            } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
-              openInNewTab(e, clickedElement); // Verwende openInNewTab für beide Fälle
             } else {
-              console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
+              console.error("Karte oder Kontextmenü nicht verfügbar.");
             }
           },
         },
@@ -46,15 +51,23 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
       ],
     });
 
+    // Füge die Tile-Layer hinzu
     L.tileLayer(urls.ONLINE_TILE_LAYER, {
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }).addTo(initMap);
 
+    // Initialisiere OverlappingMarkerSpiderfier
     const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
       nearbyDistance: 20,
     });
 
+    // Setze die Map und OMS in den State
     setMap(initMap);
     setOms(overlappingMarkerSpiderfier);
+
+    // Wenn Rechte geladen sind und es noch nicht hinzugefügt wurde, füge das Kontextmenü hinzu
+    if (hasRights && !setMenuItemAdded) {
+      addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
+    }
   }
 };