feat: Extracted restoreMapSettings to mapUtils.js

Moved the restoreMapSettings function from MapComponent.js to mapUtils.js for better modularity and reusability. This change also helps in maintaining cleaner code and improving readability.

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 {
-import { saveLineData, redrawPolyline } from "../utils/mapUtils.js";
+  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);
+      try {
-      map.setView(centerCoords, parseInt(savedZoom));
+        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 = [];

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
+    }
+  }
+};

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();
+  }
+};