fix: Reinzoomen, Rauszoom und CenterHere in Contextmenu

components/MapComponent.js

@@ -232,7 +232,22 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const closeVersionInfoModal = () => {
     setShowVersionInfoModal(false);
   };
+  //----------------------------------------------------
+  //----------------------------------------------------
+  // Kontextmenü Callback für "Reinzoomen"
+  const zoomInCallback = (e, map) => {
+    zoomIn(e, map);
+  };
 
+  // Kontextmenü Callback für "Rauszoomen"
+  const zoomOutCallback = (map) => {
+    zoomOut(map);
+  };
+
+  // Kontextmenü Callback für "Hier zentrieren"
+  const centerHereCallback = (e, map) => {
+    centerHere(e, map);
+  };
   //----------------------------------------------------
   //-----Kontextmenu----------------
   // Funktion zum Anzeigen der Koordinaten
@@ -287,11 +302,47 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //-----Kontextmenu----ende------------
 
-  const { addItemsToMapContextMenu } = useMapContextMenu(
-    map,
-    hasRights,
-    addStationCallback
-  );
+  const addItemsToMapContextMenu = () => {
+    if (!menuItemAdded) {
+      map.contextmenu.addItem({
+        text: "Koordinaten anzeigen",
+        icon: "img/not_listed_location.png",
+        callback: showCoordinates,
+      });
+
+      map.contextmenu.addItem({ separator: true }); // Divider
+
+      map.contextmenu.addItem({
+        text: "Reinzoomen",
+        icon: "img/zoom_in.png",
+        callback: (e) => zoomInCallback(e, map),
+      });
+
+      map.contextmenu.addItem({
+        text: "Rauszoomen",
+        icon: "img/zoom_out.png",
+        callback: () => zoomOutCallback(map),
+      });
+
+      map.contextmenu.addItem({
+        text: "Hier zentrieren",
+        icon: "img/center_focus.png",
+        callback: (e) => centerHereCallback(e, map),
+      });
+
+      map.contextmenu.addItem({ separator: true }); // Another Divider
+
+      map.contextmenu.addItem({
+        text: "POI hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: (event) => addStationCallback(event, hasRights),
+      });
+
+      setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
+    }
+  };
+
   //------------------------------------------ */
   const layerNames = {
     "GSM Modem": "GSMMODEM",
@@ -502,9 +553,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert.
 
   // Überprüfen der Benutzerrechte beim Initialisieren der Komponente
-  useEffect(() => {
+  /*   useEffect(() => {
     fetchUserRights();
-  }, []);
+  }, []); */
+  useEffect(() => {
+    if (serverURL) {
+      fetchUserRights(serverURL).then((rights) => {
+        setUserRights(rights);
+        setIsRightsLoaded(true);
+        setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
+      });
+    }
+  }, [serverURL]); // Läuft, wenn serverURL sich ändert
 
   // Anzeigen von Modals basierend auf Benutzerrechten
   useEffect(() => {
@@ -697,7 +757,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             },
           },
           "-", // Divider
-
+          /*  
           {
             text: "Koordinaten anzeigen",
             icon: "img/not_listed_location.png",
@@ -705,13 +765,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           },
           "-", // Divider
           { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
-          { text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut },
+          {
+            text: "Rauszoomen",
+            icon: "img/zoom_out.png",
+            callback: () => zoomOutCallback(map),
+          },
           {
             text: "Hier zentrieren",
             icon: "img/center_focus.png",
             callback: (e) => centerHere(e, map),
           },
-          "-", // Divider
+          "-", // Divider */
         ],
       });
 
@@ -2188,6 +2252,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       map.flyTo([51.41321407879154, 7.739617925303934], 7);
     }
   }, [zoomTrigger, map]);
+  //---------------------------------------------------------
+  //---------------------------------------------------------zoomen in kontextmenü
+
   //---------------------------------------------------------
   //---------------------------------------------------------