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]);
 
   //---------------------------------------------------------
   //---------------------------------------------------------

components/MapCoomonentGPT.js

@@ -1,237 +0,0 @@
-const [newPoint, setNewPoint] = useState(null);
-const [newCoords, setNewCoords] = useState(null);
-const [tempMarker, setTempMarker] = useState(null); // Hinzufügen eines Zustands für den temporären Marker
-
-useEffect(() => {
-  if (!map) return;
-
-  // Entfernen alter Marker und Polylines
-  markers.forEach((marker) => marker.remove());
-  polylines.forEach((polyline) => polyline.remove());
-
-  const newMarkers = [];
-  const newPolylines = [];
-
-  linePositions.forEach((lineData, lineIndex) => {
-    const lineMarkers = [];
-    lineData.coordinates.forEach((coord, index) => {
-      let icon = circleIcon; // Standard-Icon für mittlere Punkte
-      if (index === 0) {
-        icon = startIcon; // Start-Icon für den ersten Punkt
-      } else if (index === lineData.coordinates.length - 1) {
-        icon = endIcon; // End-Icon für den letzten Punkt
-      }
-
-      const marker = L.marker(coord, {
-        icon: icon,
-        draggable: true,
-        contextmenu: true,
-        contextmenuInheritItems: false,
-        contextmenuItems: [], // Starte mit einem leeren Menü
-      }).addTo(map);
-
-      marker.on("dragend", () => {
-        const newCoords = marker.getLatLng();
-        setNewCoords(newCoords); // Aktualisieren Sie den Zustand
-        const newCoordinates = [...lineData.coordinates];
-        newCoordinates[index] = [newCoords.lat, newCoords.lng];
-
-        const updatedPolyline = L.polyline(newCoordinates, {
-          color: lineColors[lineData.idModul] || "#000000",
-        }).addTo(map);
-
-        updatedPolyline.bindTooltip(
-          tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
-          {
-            permanent: false,
-            direction: "auto",
-          }
-        );
-
-        updatedPolyline.on("mouseover", () => {
-          updatedPolyline.setStyle({ weight: 10 });
-          updatedPolyline.bringToFront();
-        });
-        updatedPolyline.on("mouseout", () => {
-          updatedPolyline.setStyle({ weight: 5 });
-        });
-
-        newPolylines[lineIndex].remove();
-        newPolylines[lineIndex] = updatedPolyline;
-        lineData.coordinates = newCoordinates;
-
-        const requestData = {
-          idModul: lineData.idModul,
-          idLD: lineData.idLD,
-          newCoordinates,
-        };
-
-        console.log("Sending to API:", requestData);
-        // API-Aufruf, um die neuen Koordinaten zu speichern
-        fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(requestData),
-        })
-          .then((response) => {
-            if (!response.ok) {
-              return response.json().then((data) => {
-                throw new Error(data.error || "Unbekannter Fehler");
-              });
-            }
-            return response.json();
-          })
-          .then((data) => {
-            console.log("Koordinaten erfolgreich aktualisiert:", data);
-          })
-          .catch((error) => {
-            console.error(
-              "Fehler beim Aktualisieren der Koordinaten:",
-              error.message
-            );
-          });
-      });
-
-      // Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist
-      marker.on("mouseover", function () {
-        this.bindContextMenu({
-          contextmenuItems: [
-            {
-              text: "Marker entfernen",
-              callback: () => {
-                const newCoords = marker.getLatLng();
-                const newCoordinates = [...lineData.coordinates];
-                newCoordinates[index] = [newCoords.lat, newCoords.lng];
-
-                removeMarker(marker, lineData);
-                newPolylines[lineIndex].remove();
-                lineData.coordinates = newCoordinates;
-              },
-            },
-          ],
-        });
-      });
-
-      // Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt
-      marker.on("mouseout", function () {
-        this.unbindContextMenu();
-      });
-
-      lineMarkers.push(marker);
-    });
-
-    const polyline = L.polyline(lineData.coordinates, {
-      color: lineColors[lineData.idModul] || "#000000",
-      contextmenu: true,
-      contextmenuItems: [
-        {
-          text: "Marker hier hinzufügen",
-          callback: (e) => {
-            if (tempMarker) {
-              tempMarker.remove(); // Entfernen des Platzhalter-Icons
-            }
-            const newPoint = e.latlng;
-            setNewPoint(newPoint); // Aktualisieren Sie den Zustand
-            const closestPoints = findClosestPoints(
-              lineData.coordinates,
-              newPoint
-            );
-            insertNewMarker(closestPoints, newPoint, lineData, map);
-            redrawPolyline(lineData);
-          },
-        },
-      ],
-    }).addTo(map);
-
-    polyline.on("mouseover", (e) => {
-      // Optional: Visualisiere, dass die Linie interaktiv ist
-      polyline.setStyle({ color: "blue", weight: 10 });
-    });
-
-    polyline.on("mouseout", (e) => {
-      // Setze die ursprüngliche Farbe zurück
-      polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
-    });
-
-    polyline.bindTooltip(
-      tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
-      {
-        permanent: false,
-        direction: "auto",
-      }
-    );
-
-    newPolylines.push(polyline);
-    newMarkers.push(...lineMarkers);
-  });
-
-  setMarkers(newMarkers);
-  setPolylines(newPolylines);
-}, [
-  map,
-  linePositions,
-  lineColors,
-  tooltipContents,
-  newPoint,
-  newCoords,
-  tempMarker,
-]);
-
-function insertNewMarker(closestPoints, newPoint, lineData, map) {
-  const newMarker = L.marker(newPoint, {
-    icon: circleIcon,
-    draggable: true,
-  }).addTo(map);
-  lineData.coordinates.splice(closestPoints[2], 0, [
-    newPoint.lat,
-    newPoint.lng,
-  ]);
-
-  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);
-  });
-
-  setNewCoords(null); // Setzen Sie newCoords auf null, um den Platzhalter-Icon zu entfernen
-  setTempMarker(null); // Entfernen Sie den temporären Marker
-}
-
-function removeMarker(marker, lineData) {
-  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
-  }
-}
-
-function redrawPolyline(lineData) {
-  if (lineData.polyline) map.removeLayer(lineData.polyline);
-  lineData.polyline = L.polyline(lineData.coordinates, {
-    color: lineColors[lineData.idModul] || "#000000",
-  }).addTo(map);
-
-  lineData.polyline.bindTooltip(
-    tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
-    {
-      permanent: false,
-      direction: "auto",
-    }
-  );
-
-  lineData.polyline.on("mouseover", () => {
-    lineData.polyline.setStyle({ weight: 10 });
-    lineData.polyline.bringToFront();
-  });
-  lineData.polyline.on("mouseout", () => {
-    lineData.polyline.setStyle({ weight: 5 });
-  });
-}