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(
+  const addItemsToMapContextMenu = () => {
-    map,
+    if (!menuItemAdded) {
-    hasRights,
+      map.contextmenu.addItem({
-    addStationCallback
+        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ü
+
   //---------------------------------------------------------
   //---------------------------------------------------------
 

services/apiService.js

@@ -82,7 +82,7 @@ export const checkInternet = () => {
 };
 
 // ----------------------------------------------
-export const fetchUserRights = async () => {
+export const fetchUserRights = async (serverURL) => {
   try {
     const response = await fetch(
       `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`

utils/zoomAndCenterUtils.js

@@ -1,3 +1,4 @@
+// utils/zoomAndCenterUtils.js
 export const zoomIn = (e, map) => {
   if (!map) {
     console.error("map is not defined in zoomIn");
@@ -16,6 +17,8 @@ export const zoomOut = (map) => {
   const x = 51.41321407879154;
   const y = 7.739617925303934;
   const zoom = 7;
+  console.log("map");
+  console.log(map);
   map.flyTo([x, y], zoom);
   localStorage.setItem("mapZoom", map.getZoom());
   localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));