add: create polyline between Bremen and Hannover, prepaire to move marker with the line on the map

components/MapComponent.js

@@ -2198,22 +2198,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     className: "leaflet-div-icon",
   });
 
-  // Function to add markers
+  // Function to add markers and a polyline
   const addMarkers = (map) => {
     if (!map) return;
 
     // Coordinates for Bremen
-    const bremen = new L.Marker([53.07582, 8.80716], {
+    const bremenCoords = [53.07582, 8.80716];
+    const bremen = new L.Marker(bremenCoords, {
       icon: blueCircleIcon,
     }).addTo(map);
 
     // Coordinates for Hannover
-    const hannover = new L.Marker([52.37052, 9.73322], {
+    const hannoverCoords = [52.37052, 9.73322];
+    const hannover = new L.Marker(hannoverCoords, {
       icon: blueCircleIcon,
     }).addTo(map);
 
-    // You might want to zoom to fit all markers
-    const group = new L.featureGroup([bremen, hannover]);
+    // Draw a polyline between Bremen and Hannover
+    const 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);
+
+    // 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
   };