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( + '
' + + contextMenuItems + .map( + (item) => + `${item.text}` + ) + .join("
") + + "
" + ) + .openOn(map); + }); + } + }, [map]); + // poiTyp Daten hinzufügen //------------------------------------------ // Funktion zum Abrufen der poiTyp Daten diff --git a/utils/zoomUtils.js b/utils/zoomAndCenterUtils.js similarity index 56% rename from utils/zoomUtils.js rename to utils/zoomAndCenterUtils.js index 960f0835c..8891aa3e6 100644 --- a/utils/zoomUtils.js +++ b/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); +};