temp: move lines on the map

components/MapComponent.js

@@ -2140,6 +2140,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, []);
 
   // Karte-Linien Zeichnen
+  /*   const blueCircleIcon = new L.Icon({
+    iconUrl: "path_to_your_blue_circle_image", // Provide the path to your blue circle image
+    iconSize: [10, 10], // Set the size of the icon
+    iconAnchor: [5, 5], // Set the anchor point so the icon is centered
+    className: "leaflet-div-icon",
+  });
+
   useEffect(() => {
     if (!map) return;
 
@@ -2150,22 +2157,87 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         //---------------------------------------------------------
         // Erstellt einen verschiebbaren Marker
         const draggableMarker = L.circleMarker(lineData.coordinates[0], {
-          radius: 5,
-          fillColor: "#00FFFF",
-          color: "#00FFFF",
-          weight: 1,
-          opacity: 1,
-          fillOpacity: 0.8,
+          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("dragend", function (e) {
-          const newLat = e.target.getLatLng().lat;
-          const newLng = e.target.getLatLng().lng;
-          // Hier können Sie nun die neuen Koordinaten verarbeiten, z.B. um sie zu speichern
-          console.log("Neue Position: ", newLat, newLng);
-        });
+        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]); */
+  //---------------------------------------------------------
+  // Custom circle icon for draggable markers
+  const circleIcon = L.divIcon({
+    className: "custom-div-icon",
+    html: "<div style='background-color:#00FFFF;border-radius:50%;width:10px;height:10px;'></div>",
+    iconSize: [10, 10],
+    iconAnchor: [5, 5],
+  });
+  //const[polylines, setPolylines] = useState([]);
+  useEffect(() => {
+    if (!map) return;
+
+    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: circleIcon,
+          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,
@@ -2189,6 +2261,43 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       }
     });
   }, [map, linePositions, lineColors]);
+  //---------------------------------------------------------
+
+  // Function to initialize markers and polylines
+  useEffect(() => {
+    if (!map) return;
+
+    linePositions.forEach((lineData) => {
+      const markers = [];
+      const color = lineColors[lineData.idModul] || "#000000"; // Default black if no color found
+
+      // Create a marker for each coordinate
+      const polylinePoints = lineData.coordinates.map((coord) => {
+        const marker = L.marker(coord, {
+          icon: circleIcon,
+          draggable: true,
+        }).addTo(map);
+        markers.push(marker);
+        return marker;
+      });
+
+      // Draw polyline
+      const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
+
+      // Function to update the polyline when markers are dragged
+      markers.forEach((marker) => {
+        marker.on("drag", () => {
+          const newCoords = markers.map((marker) => marker.getLatLng());
+          polyline.setLatLngs(newCoords);
+        });
+      });
+
+      // Fit map to show all markers and polylines
+      const group = new L.featureGroup([...markers, polyline]);
+      map.fitBounds(group.getBounds().pad(0.5));
+    });
+  }, [map]); // Run this effect when `map` is ready
+
   //---------------------------------------------------------
   // Define the blue circle icon
   const blueCircleIcon = new L.Icon({
@@ -2197,7 +2306,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     iconAnchor: [17, 17], // Set the anchor point so the icon is centered
     className: "leaflet-div-icon",
   });
-
   // Function to add markers and a polyline
   const addMarkers = (map) => {
     if (!map) return;