diff --git a/components/MapComponent.js b/components/MapComponent.js index 4243a1b90..966f24711 100644 --- a/components/MapComponent.js +++ b/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 };