diff --git a/components/MapComponent.js b/components/MapComponent.js index 41881886c..3c7c6d3fe 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -47,8 +47,16 @@ import plusRoundIcon from "./PlusRoundIcon.js"; saveLineData, } from "../utils/utils.js"; */ import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js"; -import { handleEditPoi, insertNewMarker } from "../utils/markerUtils.js"; -import { saveLineData, redrawPolyline } from "../utils/mapUtils.js"; +import { + handleEditPoi, + insertNewMarker, + removeMarker, +} from "../utils/markerUtils.js"; +import { + saveLineData, + redrawPolyline, + restoreMapSettings, +} from "../utils/mapUtils.js"; import circleIcon from "./CircleIcon"; import startIcon from "./StartIcon"; import endIcon from "./EndIcon"; @@ -68,7 +76,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [currentZoom, setCurrentZoom] = useState(12); const [currentCenter, setCurrentCenter] = useState(() => { const storedCenter = localStorage.getItem("mapCenter"); - return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625]; + try { + return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625]; + } catch (e) { + console.error("Error parsing stored map center:", e); + return [53.111111, 8.4625]; + } }); const [priorityConfig, setPriorityConfig] = useState([]); @@ -2043,7 +2056,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const newCoordinates = [...lineData.coordinates]; newCoordinates[index] = [newCoords.lat, newCoords.lng]; - removeMarker(marker, lineData); + removeMarker(marker, lineData, currentZoom, currentCenter); newPolylines[lineIndex].remove(); lineData.coordinates = newCoordinates; }, @@ -2125,83 +2138,29 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //--------------------------------------------------------- //-------------------------Funktionen-------------------------------- - function addMarkerAt(e, lineData) { - const newCoord = [e.latlng.lat, e.latlng.lng]; - lineData.coordinates.push(newCoord); // neuen Punkt hinzufügen - drawPolyline(lineData); // Polylinie neu zeichnen - - const marker = L.marker(newCoord, { draggable: true }).addTo(map); - marker.on("drag", (event) => { - updateMarkerPosition(event.target.getLatLng(), lineData, marker); - }); - } - - function drawPolyline(lineData) { - if (lineData.polyline) map.removeLayer(lineData.polyline); - lineData.polyline = L.polyline(lineData.coordinates, { - color: "red", - }).addTo(map); - } - //--------------------------------------------------------- - function removeMarker(marker, lineData) { - // Save zoom and center to localStorage - localStorage.setItem("mapZoom", currentZoom); - localStorage.setItem("mapCenter", JSON.stringify(currentCenter)); - - // Find the index of the coordinate that matches the marker's position - const index = lineData.coordinates.findIndex((coord) => - L.latLng(coord[0], coord[1]).equals(marker.getLatLng()) - ); - - if (index !== -1) { - // Remove the coordinate from the line data - lineData.coordinates.splice(index, 1); - - // Redraw the polyline with the updated coordinates - redrawPolyline(lineData); - - // Remove the marker from the map - marker.remove(); - - // Save the updated line data - saveLineData(lineData); - - // Refresh the browser - window.location.reload(); - } - } - // Call this function on page load to restore zoom and center - function restoreMapSettings() { + /* function restoreMapSettings() { const savedZoom = localStorage.getItem("mapZoom"); const savedCenter = localStorage.getItem("mapCenter"); if (savedZoom && savedCenter) { - const centerCoords = JSON.parse(savedCenter); - map.setView(centerCoords, parseInt(savedZoom)); + try { + const centerCoords = JSON.parse(savedCenter); + map.setView(centerCoords, parseInt(savedZoom)); + } catch (e) { + console.error("Error parsing stored map center:", e); + map.setView([53.111111, 8.4625], 12); // Standardkoordinaten und -zoom + } } - } + } */ // Call restoreMapSettings when the map is initialized useEffect(() => { if (map) { - restoreMapSettings(); + restoreMapSettings(map); } }, [map]); - //--------------------------------------------------------- - - function updateMarkerPosition(newLatLng, lineData, marker) { - const index = lineData.coordinates.findIndex((coord) => - L.latLng(coord[0], coord[1]).equals(marker.getLatLng()) - ); - if (index !== -1) { - lineData.coordinates[index] = [newLatLng.lat, newLatLng.lng]; - redrawPolyline(lineData); - saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben - } - } - function findClosestPoints(coordinates, newPoint) { let minDist = Infinity; let closestPair = []; diff --git a/utils/mapUtils.js b/utils/mapUtils.js index 4879fd601..05a31d723 100644 --- a/utils/mapUtils.js +++ b/utils/mapUtils.js @@ -1,3 +1,4 @@ +// /utils/mapUtils.js import L from "leaflet"; export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => { @@ -61,3 +62,18 @@ export const saveLineData = (lineData) => { console.error("Fehler beim Speichern der Linienänderungen:", error); }); }; +// Call this function on page load to restore zoom and center +export const restoreMapSettings = (map) => { + const savedZoom = localStorage.getItem("mapZoom"); + const savedCenter = localStorage.getItem("mapCenter"); + + if (savedZoom && savedCenter) { + try { + const centerCoords = JSON.parse(savedCenter); + map.setView(centerCoords, parseInt(savedZoom)); + } catch (e) { + console.error("Error parsing stored map center:", e); + map.setView([53.111111, 8.4625], 12); // Standardkoordinaten und -zoom + } + } +}; diff --git a/utils/markerUtils.js b/utils/markerUtils.js index ff6cc85f2..cac0e98c3 100644 --- a/utils/markerUtils.js +++ b/utils/markerUtils.js @@ -1,3 +1,4 @@ +// /utils/markerUtils.js import circleIcon from "../components/CircleIcon"; import { saveLineData, redrawPolyline } from "./mapUtils"; @@ -62,3 +63,31 @@ export const handleEditPoi = ( setShowPoiUpdateModal(true); }; + +export const removeMarker = (marker, lineData, currentZoom, currentCenter) => { + // Save zoom and center to localStorage + localStorage.setItem("mapZoom", currentZoom); + localStorage.setItem("mapCenter", JSON.stringify(currentCenter)); + + // Find the index of the coordinate that matches the marker's position + const index = lineData.coordinates.findIndex((coord) => + L.latLng(coord[0], coord[1]).equals(marker.getLatLng()) + ); + + if (index !== -1) { + // Remove the coordinate from the line data + lineData.coordinates.splice(index, 1); + + // Redraw the polyline with the updated coordinates + redrawPolyline(lineData); + + // Remove the marker from the map + marker.remove(); + + // Save the updated line data + saveLineData(lineData); + + // Refresh the browser + window.location.reload(); + } +};