feat: move markers in th line on the map with polyline.setLatLngs(newCoords);

components/MapComponent.js

@@ -2208,59 +2208,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     iconAnchor: [5, 5],
   });
   //const[polylines, setPolylines] = useState([]);
-  useEffect(() => {
+  /*   useEffect(() => {
     if (!map) return;
-
+  }, [map, linePositions, lineColors]); */
-    linePositions.forEach((lineData) => {
-      if (lineData.coordinates.length > 0) {
-        const color = lineColors[lineData.idModul] || "#000000"; // Standardfarbe schwarz, wenn keine Farbe gefunden
-        const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
-        //setPolylines([...polylines, polyline]);
-        //---------------------------------------------------------
-        // Erstellt einen verschiebbaren Marker
-        const draggableMarker = L.circleMarker(lineData.coordinates[0], {
-          icon: blueCircleIcon,
-          draggable: true, // Ermöglicht das Verschieben des Markers
-        }).addTo(map);
-
-        const updatePolyline = () => {
-          polyline.setLatLngs(
-            lineData.coordinates.map((coord) => {
-              if (coord === lineData.coordinates[0]) {
-                return draggableMarker.getLatLng();
-              }
-              return coord;
-            })
-          );
-        };
-
-        // Event Listener für 'dragend' um die neue Position zu erfassen
-        draggableMarker.on("drag", updatePolyline);
-        const group = new L.featureGroup([draggableMarker, polyline]);
-        map.fitBounds(group.getBounds().pad(0.5)); // Adds padding around the group
-        //---------------------------------------------------------
-        L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], {
-          radius: 5,
-          fillColor: "#0000FF",
-          color: "#0000FF",
-          weight: 1,
-          opacity: 1,
-          fillOpacity: 0.8,
-        }).addTo(map);
-
-        for (let i = 1; i < lineData.coordinates.length - 1; i++) {
-          L.circleMarker(lineData.coordinates[i], {
-            radius: 3,
-            fillColor: "#FFFF00",
-            color: "#FFFF00",
-            weight: 1,
-            opacity: 1,
-            fillOpacity: 0.8,
-          }).addTo(map);
-        }
-      }
-    });
-  }, [map, linePositions, lineColors]);
   //---------------------------------------------------------
 
   // Function to initialize markers and polylines
@@ -2296,7 +2246,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       const group = new L.featureGroup([...markers, polyline]);
       map.fitBounds(group.getBounds().pad(0.5));
     });
-  }, [map]); // Run this effect when `map` is ready
+  }, [map, linePositions, lineColors]); // Run this effect when `map` is ready
 
   //---------------------------------------------------------
   // Define the blue circle icon