feat: the polyline dynamically updates as you drag the markers around and the coordinates are updated in real-time

components/MapComponent.js

@@ -2206,22 +2206,33 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     const bremenCoords = [53.07582, 8.80716];
     const bremen = new L.Marker(bremenCoords, {
       icon: blueCircleIcon,
+      draggable: true, // Make the marker draggable
     }).addTo(map);
 
     // Coordinates for Hannover
     const hannoverCoords = [52.37052, 9.73322];
     const hannover = new L.Marker(hannoverCoords, {
       icon: blueCircleIcon,
+      draggable: true, // Make the marker draggable
     }).addTo(map);
 
     // Draw a polyline between Bremen and Hannover
-    const polyline = new L.Polyline([bremenCoords, hannoverCoords], {
+    let polyline = new L.Polyline([bremenCoords, hannoverCoords], {
       color: "blue", // Line color
       weight: 4, // Line width
       opacity: 0.5, // Line opacity
       smoothFactor: 1, // How smooth the line should be
     }).addTo(map);
 
+    // Function to update the polyline in real time as the markers are dragged
+    const updatePolyline = () => {
+      polyline.setLatLngs([bremen.getLatLng(), hannover.getLatLng()]);
+    };
+
+    // Attach the updatePolyline function to the 'drag' event for real-time updates
+    bremen.on("drag", updatePolyline);
+    hannover.on("drag", updatePolyline);
+
     // You might want to zoom to fit all markers and the line
     const group = new L.featureGroup([bremen, hannover, polyline]);
     map.fitBounds(group.getBounds().pad(0.5)); // Adds padding around the group