diff --git a/components/MapComponent.js b/components/MapComponent.js index 6b72df435..e6bf71e7d 100644 --- a/components/MapComponent.js +++ b/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( + '