From 29eb3e8192c4532d8ed5a463087a7525165c623c Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 15 Jul 2024 09:42:06 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Bereich=20ausgew=C3=A4hlt=20dann=20k?= =?UTF-8?q?=C3=B6nnte=20nicht=20mit=20der=20Maus=20die=20Kartenansicht=20v?= =?UTF-8?q?erschieben?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/MapComponent.js | 54 ++++++++++++++++++++++++++++++++----- utils/zoomAndCenterUtils.js | 5 ++-- 2 files changed, 51 insertions(+), 8 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index e6bf71e7d..9ea3aad44 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -704,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: (e) => centerHere(e, map), }, - "-", */ // Divider + "-", // Divider ], }); @@ -746,7 +746,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //console.log("trigger in MapComponent.js:", poiReadTrigger); }, [mapRef, map, poiReadTrigger, contextMenuItems]); // Prüfe die Abhängigkeiten sorgfältig - useEffect(() => { + /* const zoomIn = (e) => { + initMap.flyTo(e.latlng, 12); + //console.log("ZoomIn koordinaten in MapComponent", e.latlng); + }; + + const zoomOut = (e) => { + fly(); + }; + const centerHere = (e) => { + initMap.panTo(e.latlng); + }; */ + + /* useEffect(() => { if (map) { map.on("contextmenu", (e) => { const contextMenuItems = [ @@ -783,7 +795,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { .openOn(map); }); } - }, [map]); + }, [map]); */ // poiTyp Daten hinzufügen //------------------------------------------ @@ -1707,14 +1719,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //------------------------------------------ */ // Effect to handle navigation to selected area - useEffect(() => { + /* useEffect(() => { if (selectedArea && map) { const marker = findMyMarker(selectedArea); if (marker) { map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed } } - }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies + }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies */ //------------------------------------------ @@ -2146,6 +2158,36 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }, [map]); + //------------------------------------------ */hier ist das Bug + + // Effect to handle navigation to selected area + /* useEffect(() => { + if (selectedArea && map) { + const marker = findMyMarker(selectedArea); + if (marker) { + map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed + } + } + }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies */ + + //------------------------------------------ + //--------------------------------------------------------- Kein Bug + useEffect(() => { + if (selectedArea && map) { + const station = GisStationsStaticDistrict.find( + (s) => s.Area_Name === selectedArea + ); + if (station) { + map.flyTo([station.X, station.Y], 14); + } + } + }, [selectedArea, map, GisStationsStaticDistrict]); + + useEffect(() => { + if (zoomTrigger && map) { + map.flyTo([51.41321407879154, 7.739617925303934], 7); + } + }, [zoomTrigger, map]); //--------------------------------------------------------- //--------------------------------------------------------- diff --git a/utils/zoomAndCenterUtils.js b/utils/zoomAndCenterUtils.js index 8891aa3e6..cffcfa8f1 100644 --- a/utils/zoomAndCenterUtils.js +++ b/utils/zoomAndCenterUtils.js @@ -1,10 +1,9 @@ -// utils/zoomAndCenterUtils.js export const zoomIn = (e, map) => { if (!map) { console.error("map is not defined in zoomIn"); return; } - map.flyTo(e.latlng, 12); + map.flyTo(e.latlng, map.getZoom() + 1); localStorage.setItem("mapZoom", map.getZoom()); localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); }; @@ -28,4 +27,6 @@ export const centerHere = (e, map) => { return; } map.panTo(e.latlng); + localStorage.setItem("mapZoom", map.getZoom()); + localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); };