fix: add and delete marker on polyline (work in progress)

components/MapComponent.js

@@ -2285,8 +2285,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     console.log("lineData:", linesData);
   }, [lineStatusData, linesData]);
   //---------------------------------------------------------
-  // Function to initialize markers and polylines
-  // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
   useEffect(() => {
     if (!map) return;
 
@@ -2306,6 +2304,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         } 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,
@@ -2318,6 +2317,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           const newCoords = marker.getLatLng();
           const newCoordinates = [...lineData.coordinates];
           newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
           const updatedPolyline = L.polyline(newCoordinates, {
             color: lineColors[lineData.idModul] || "#000000",
           }).addTo(map);
@@ -2378,15 +2378,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
         // Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist
         marker.on("mouseover", function () {
-          this.options.contextmenuItems.push({
+          this.bindContextMenu({
-            text: "Marker entfernen",
+            contextmenuItems: [
-            callback: () => removeMarker(marker, lineData),
+              {
+                text: "Marker entfernen",
+                callback: () => removeMarker(marker, lineData),
+              },
+            ],
           });
         });
 
         // Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt
         marker.on("mouseout", function () {
-          this.options.contextmenuItems.pop();
+          this.unbindContextMenu();
         });
 
         lineMarkers.push(marker);
@@ -2428,19 +2432,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         }
       );
 
-      /*       polyline.on("mouseover", () => {
-        polyline.setStyle({ weight: 10 });
-        polyline.bringToFront();
-        console.log(
-          `polyline with idLD : ${lineData.idLD}, idModul: ${lineData.idModul}`,
-          "lineData : ",
-          lineData
-        );
-      }); */
-      /*       polyline.on("mouseout", () => {
-        polyline.setStyle({ weight: 5 });
-      }); */
-
       newPolylines.push(polyline);
       newMarkers.push(...lineMarkers);
     });
@@ -2450,7 +2441,60 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [map, linePositions, lineColors, tooltipContents]);
 
   //---------------------------------------------------------
-  //---------------------------------------------------------
+  //-------------------------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) {
+    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
+    }
+  }
+
+  function redrawPolyline(lineData) {
+    const polyline = L.polyline(lineData.coordinates, {
+      color: lineColors[lineData.idModul] || "#000000",
+    }).addTo(map);
+
+    polyline.bindTooltip(
+      tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
+      {
+        permanent: false,
+        direction: "auto",
+      }
+    );
+
+    polyline.on("mouseover", () => {
+      polyline.setStyle({ weight: 10 });
+      polyline.bringToFront();
+    });
+    polyline.on("mouseout", () => {
+      polyline.setStyle({ weight: 5 });
+    });
+  }
+
   function saveLineData(lineData) {
     fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
       method: "POST",
@@ -2477,31 +2521,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       });
   }
 
-  function addMarkerAt(e, lineData) {
+  function insertNewMarker(closestPoints, newPoint, lineData, map) {
-    const newCoord = [e.latlng.lat, e.latlng.lng];
+    const newMarker = L.marker(newPoint, { draggable: true }).addTo(map);
-    lineData.coordinates.push(newCoord); // neuen Punkt hinzufügen
+    lineData.coordinates.splice(closestPoints[2], 0, [
-    drawPolyline(lineData); // Polylinie neu zeichnen
+      newPoint.lat,
+      newPoint.lng,
+    ]);
 
-    const marker = L.marker(newCoord, { draggable: true }).addTo(map);
+    // Hier direkt speichern nach Einfügen
-    marker.on("drag", (event) => {
+    saveLineData(lineData);
-      updateMarkerPosition(event.target.getLatLng(), lineData, marker);
+
+    redrawPolyline(lineData);
+
+    // Event-Listener für das Verschieben des Markers hinzufügen
+    newMarker.on("dragend", () => {
+      updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker);
+      saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
     });
   }
 
-  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) =>
       L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
     );
     if (index !== -1) {
       lineData.coordinates[index] = [newLatLng.lat, newLatLng.lng];
-      redrawPolyline(lineData, map);
+      redrawPolyline(lineData);
       saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
     }
   }
@@ -2523,46 +2568,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     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,
-    ]);
-
-    // Hier direkt speichern nach Einfügen
-    saveLineData(lineData);
-
-    redrawPolyline(lineData, map);
-
-    // Event-Listener für das Verschieben des Markers hinzufügen
-    newMarker.on("dragend", () => {
-      updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker);
-      saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
-    });
-  }
-  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);
-  }
-
-  //---------------------------------------------------------
-  //----------------- delete markers and polylines -------------------
-
-  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, map); // Neuzeichnen der Polylinie
-      marker.remove(); // Entferne den Marker von der Karte
-      saveLineData(lineData); // Speichern der neuen Linienkoordinaten
-    }
-  }
-
   //---------------------------------------------------------
   //---------------------------------------------------------