nodeMap/components/useMapContextMenu.js

// components/useMapContextMenu.js
import { toast } from "react-toastify";
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils";

// components/useMapContextMenu.js
const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopupWithCoordinates) => {
  if (!menuItemAdded && map && map.contextmenu) {
    map.contextmenu.addItem({
      text: "Koordinaten anzeigen",
      icon: "img/not_listed_location.png",
      callback: openPopupWithCoordinates, // Aufruf des Popup-Callbacks
    });

    map.contextmenu.addItem({ separator: true });

    map.contextmenu.addItem({
      text: "Reinzoomen",
      icon: "img/zoom_in.png",
      callback: (e) => {
        const currentZoom = map.getZoom();
        const newZoom = Math.min(15, currentZoom + 3); // Stellt sicher, dass max. 15 erreicht wird
        const zoomDifference = Math.abs(newZoom - currentZoom); // Anzahl der Zoom-Stufen
        const duration = zoomDifference * 0.5; // Pro Stufe 0.5 Sekunden

        map.flyTo(map.getCenter(), newZoom, {
          animate: true,
          duration: duration,
        });
      },
    });

    map.contextmenu.addItem({
      text: "Rauszoomen",
      icon: "img/zoom_out.png",
      callback: () => {
        const currentZoom = map.getZoom();
        const newZoom = Math.max(6, currentZoom - 3); // Stellt sicher, dass min. 6 erreicht wird
        const zoomDifference = Math.abs(newZoom - currentZoom); // Anzahl der Zoom-Stufen
        const duration = zoomDifference * 0.5; // Pro Stufe 0.5 Sekunden

        map.flyTo(map.getCenter(), newZoom, {
          animate: true,
          duration: duration,
        });
      },
    });

    map.contextmenu.addItem({
      text: "Hier zentrieren",
      icon: "img/center_focus.png",
      callback: (e) => {
        map.panTo(e.latlng);
      },
    });

    setMenuItemAdded(true);
  }
};

export default addItemsToMapContextMenu;