From 33d3a74c5db7d1ab0a0440a4affa32b1123b6b27 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 14 Jun 2024 09:43:13 +0200 Subject: [PATCH] feat: the polyline dynamically updates as you drag the markers around and the coordinates are updated in real-time --- components/MapComponent.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 966f24711..5892039ae 100644 --- a/components/MapComponent.js +++ b/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