feat: Stützpunkte entfernen und Browser aktualissieren

components/MapComponent.js

@@ -26,23 +26,32 @@ import { mapLayersState } from "../store/atoms/mapLayersState.js";
 import { selectedAreaState } from "../store/atoms/selectedAreaState.js";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
 import { poiTypState } from "../store/atoms/poiTypState.js";
-import ShowAddStationPopup from "./ShowAddStationPopup";
-import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
+import ShowAddStationPopup from "./ShowAddStationPopup.js";
+import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
 import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
 import PoiUpdateModal from "./PoiUpdateModal.js";
 import { selectedPoiState } from "../store/atoms/poiState.js";
-import { currentPoiState } from "../store/atoms/currentPoiState";
+import { currentPoiState } from "../store/atoms/currentPoiState.js";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import { mapIdState, userIdState } from "../store/atoms/urlParameterState";
+import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
 import { set } from "lodash";
-import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
 import { data } from "autoprefixer";
 import plusRoundIcon from "./PlusRoundIcon.js";
 
 //---------------------------------------------------------------------
 //-------------------- MapComponent -----------------------------------
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+  // Get current zoom and center
+  //const currentZoom = map.getZoom();
+  const [currentZoom, setCurrentZoom] = useState(12);
+  //const currentCenter = map.getCenter();
+  const [currentCenter, setCurrentCenter] = useState(() => {
+    const storedCenter = localStorage.getItem("mapCenter");
+    return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625];
+  });
+
   const [priorityConfig, setPriorityConfig] = useState([]);
 
   const fetchPriorityConfig = async () => {
@@ -973,8 +982,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useEffect(() => {
     if (mapRef.current && !map) {
       initMap = L.map(mapRef.current, {
-        center: [53.111111, 8.4625],
-        zoom: 8,
+        //center: [53.111111, 8.4625],
+        center: currentCenter,
+        //zoom: 8,
+        zoom: currentZoom,
         layers: [
           TALAS,
           ECI,
@@ -2479,25 +2490,62 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       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) {
-      lineData.coordinates.splice(index, 1); // Entferne die Koordinaten des Markers
-      redrawPolyline(lineData); // Neuzeichnen der Polylinie
-      marker.remove(); // Entferne den Marker von der Karte
-      saveLineData(lineData); // Speichern der neuen Linienkoordinaten
+      // 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() {
+    const savedZoom = localStorage.getItem("mapZoom");
+    const savedCenter = localStorage.getItem("mapCenter");
+
+    if (savedZoom && savedCenter) {
+      const centerCoords = JSON.parse(savedCenter);
+      map.setView(centerCoords, parseInt(savedZoom));
+    }
+  }
+
+  // Call restoreMapSettings when the map is initialized
+  useEffect(() => {
+    if (map) {
+      restoreMapSettings();
+    }
+  }, [map]);
+
+  //---------------------------------------------------------
+
   function redrawPolyline(lineData) {
-    const polyline = L.polyline(lineData.coordinates, {
+    if (lineData.polyline) map.removeLayer(lineData.polyline);
+    lineData.polyline = L.polyline(lineData.coordinates, {
       color: lineColors[lineData.idModul] || "#000000",
     }).addTo(map);
 
-    polyline.bindTooltip(
+    lineData.polyline.bindTooltip(
       tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
       {
         permanent: false,
@@ -2505,12 +2553,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       }
     );
 
-    polyline.on("mouseover", () => {
-      polyline.setStyle({ weight: 10 });
-      polyline.bringToFront();
+    lineData.polyline.on("mouseover", () => {
+      lineData.polyline.setStyle({ weight: 10 });
+      lineData.polyline.bringToFront();
     });
-    polyline.on("mouseout", () => {
-      polyline.setStyle({ weight: 5 });
+    lineData.polyline.on("mouseout", () => {
+      lineData.polyline.setStyle({ weight: 5 });
     });
   }
 
@@ -2557,6 +2605,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     // Event-Listener für das Verschieben des Markers hinzufügen
     newMarker.on("dragend", () => {
+      const newCoords = newMarker.getLatLng();
+      setNewCoords(newCoords);
+      const newCoordinates = [...lineData.coordinates];
+      newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
+      lineData.coordinates = newCoordinates;
+      redrawPolyline(lineData);
+
       updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker);
       saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
     });
@@ -2589,6 +2644,33 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
     return closestPair;
   }
+  //---------------------------------------------------------
+  useEffect(() => {
+    if (map) {
+      const handleMapMoveEnd = (event) => {
+        const newCenter = map.getCenter();
+        const newZoom = map.getZoom();
+
+        setCurrentCenter([newCenter.lat, newCenter.lng]);
+        setCurrentZoom(newZoom);
+
+        // Save to localStorage
+        localStorage.setItem(
+          "mapCenter",
+          JSON.stringify([newCenter.lat, newCenter.lng])
+        );
+        localStorage.setItem("mapZoom", newZoom);
+      };
+
+      map.on("moveend", handleMapMoveEnd);
+      map.on("zoomend", handleMapMoveEnd);
+
+      return () => {
+        map.off("moveend", handleMapMoveEnd);
+        map.off("zoomend", handleMapMoveEnd);
+      };
+    }
+  }, [map]);
 
   //---------------------------------------------------------
   //---------------------------------------------------------