feat: paste centerHere function into zoomAndCenterUtil.js with error

components/MapComponent.js

@@ -79,7 +79,7 @@ import { MAP_VERSION } from "../config/settings";
 import * as layers from "../config/layers.js";
 import useMapContextMenu from "./useMapContextMenu.js";
 import { openInSameWindow } from "../utils/openInSameWindow";
-import { zoomIn, zoomOut } from "../utils/zoomUtils";
+import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";
 //---------------------------------------------------------------------
 //-------------------- MapComponent -----------------------------------
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
@@ -235,10 +235,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //----------------------------------------------------
   //-----Kontextmenu----------------
-  const centerHere = (e) => {
-    initMap.panTo(e.latlng);
-  };
-
   // Funktion zum Anzeigen der Koordinaten
   const showCoordinates = (e) => {
     alert(
@@ -708,14 +704,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             callback: showCoordinates,
           },
           "-", // Divider
-          { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
+          /*       { 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,
+            callback: (e) => centerHere(e, map),
           },
-          "-", // Divider
+          "-",  */ // Divider
         ],
       });
 
@@ -750,6 +746,45 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     //console.log("trigger in MapComponent.js:", poiReadTrigger);
   }, [mapRef, map, poiReadTrigger, contextMenuItems]); // Prüfe die Abhängigkeiten sorgfältig
 
+  useEffect(() => {
+    if (map) {
+      map.on("contextmenu", (e) => {
+        const contextMenuItems = [
+          {
+            text: "Reinzoomen",
+            icon: "img/zoom_in.png",
+            callback: (e) => zoomIn(e, map),
+          },
+          {
+            text: "Rauszoomen",
+            icon: "img/zoom_out.png",
+            callback: () => zoomOut(map),
+          },
+          {
+            text: "Hier zentrieren",
+            icon: "img/center_focus.png",
+            callback: (e) => centerHere(e, map),
+          },
+          "-",
+        ];
+        L.DomEvent.stopPropagation(e);
+        const contextMenu = L.popup()
+          .setLatLng(e.latlng)
+          .setContent(
+            '<div class="leaflet-popup-content-wrapper leaflet-popup-content"><div class="leaflet-popup-content" style="max-width: 300px;">' +
+              contextMenuItems
+                .map(
+                  (item) =>
+                    `<a href="#" onclick="(${item.callback.toString()})()">${item.text}</a>`
+                )
+                .join("<br>") +
+              "</div></div>"
+          )
+          .openOn(map);
+      });
+    }
+  }, [map]);
+
   //          poiTyp Daten hinzufügen
   //------------------------------------------
   // Funktion zum Abrufen der poiTyp Daten

utils/zoomAndCenterUtils.js

@@ -1,11 +1,19 @@
-// utils/zoomUtils.js
+// utils/zoomAndCenterUtils.js
 export const zoomIn = (e, map) => {
+  if (!map) {
+    console.error("map is not defined in zoomIn");
+    return;
+  }
   map.flyTo(e.latlng, 12);
   localStorage.setItem("mapZoom", map.getZoom());
   localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
 };
 
 export const zoomOut = (map) => {
+  if (!map) {
+    console.error("map is not defined in zoomOut");
+    return;
+  }
   const x = 51.41321407879154;
   const y = 7.739617925303934;
   const zoom = 7;
@@ -13,3 +21,11 @@ export const zoomOut = (map) => {
   localStorage.setItem("mapZoom", map.getZoom());
   localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
 };
+
+export const centerHere = (e, map) => {
+  if (!map) {
+    console.error("map is not defined in centerHere");
+    return;
+  }
+  map.panTo(e.latlng);
+};