[WIP] Feature: Hinzufügen von Markern über Kontextmenü in Polyline-> nach git add .

components/MapComponent.js

@@ -2379,8 +2379,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       const polyline = L.polyline(lineData.coordinates, {
         color: lineColors[lineData.idModul] || "#000000",
+        contextmenu: true,
+        contextmenuItems: [
+          {
+            text: "Marker hier hinzufügen",
+            callback: (e) => {
+              const newPoint = e.latlng;
+              const closestPoints = findClosestPoints(
+                lineData.coordinates,
+                newPoint
+              );
+              insertNewMarker(closestPoints, newPoint, lineData, map);
+            },
+          },
+        ],
       }).addTo(map);
 
+      polyline.on("mouseover", (e) => {
+        // Optional: Visualisiere, dass die Linie interaktiv ist
+        polyline.setStyle({ color: "blue" });
+      });
+
+      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",
         {
@@ -2389,7 +2413,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         }
       );
 
-      polyline.on("mouseover", () => {
+      /*       polyline.on("mouseover", () => {
         polyline.setStyle({ weight: 10 });
         polyline.bringToFront();
         console.log(
@@ -2397,10 +2421,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           "lineData : ",
           lineData
         );
-      });
-      polyline.on("mouseout", () => {
+      }); */
+      /*       polyline.on("mouseout", () => {
         polyline.setStyle({ weight: 5 });
-      });
+      }); */
 
       newPolylines.push(polyline);
       newMarkers.push(...lineMarkers);
@@ -2410,6 +2434,94 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     setPolylines(newPolylines);
   }, [map, linePositions, lineColors, tooltipContents]);
 
+  //---------------------------------------------------------
+  //---------------------------------------------------------
+  function saveLineData(lineData) {
+    fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        idModul: lineData.idModul,
+        idLD: lineData.idLD,
+        newCoordinates: lineData.coordinates,
+      }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Fehler beim Speichern der Linienänderungen");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log("Linienänderungen gespeichert:", data);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Speichern der Linienänderungen:", error);
+      });
+  }
+
+  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 updateMarkerPosition(newLatLng, lineData, marker) {
+    const index = lineData.coordinates.findIndex(
+      (coord) => coord === marker.getLatLng()
+    );
+    if (index !== -1) {
+      lineData.coordinates[index] = [newLatLng.lat, newLatLng.lng];
+      drawPolyline(lineData);
+    }
+  }
+
+  function findClosestPoints(coordinates, newPoint) {
+    let minDist = Infinity;
+    let closestPair = [];
+    for (let i = 1; i < coordinates.length; i++) {
+      const dist = L.LineUtil.pointToSegmentDistance(
+        map.latLngToLayerPoint(newPoint),
+        map.latLngToLayerPoint(coordinates[i - 1]),
+        map.latLngToLayerPoint(coordinates[i])
+      );
+      if (dist < minDist) {
+        minDist = dist;
+        closestPair = [coordinates[i - 1], coordinates[i], i];
+      }
+    }
+    return closestPair;
+  }
+
+  function insertNewMarker(closestPair, newPoint, lineData, map) {
+    const newMarker = L.marker(newPoint, { draggable: true }).addTo(map);
+    lineData.coordinates.splice(closestPair[2], 0, [
+      newPoint.lat,
+      newPoint.lng,
+    ]);
+    redrawPolyline(lineData, map);
+  }
+  function redrawPolyline(lineData, map) {
+    if (lineData.polyline) map.removeLayer(lineData.polyline);
+    lineData.polyline = L.polyline(lineData.coordinates, {
+      color: "red", // Oder eine andere logische Farbe
+    }).addTo(map);
+  }
+
   //---------------------------------------------------------
   //---------------------------------------------------------