Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ISA
2024-06-14 09:25:44 +02:00
parent 57a5e9667b
commit 7518ecc1f0
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/MapComponent.js
View File

@@ -2198,22 +2198,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
className: "leaflet-div-icon", className: "leaflet-div-icon",
}); });
// Function to add markers // Function to add markers and a polyline
const addMarkers = (map) => { const addMarkers = (map) => {
if (!map) return; if (!map) return;
// Coordinates for Bremen // 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, icon: blueCircleIcon,
}).addTo(map); }).addTo(map);
// Coordinates for Hannover // 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, icon: blueCircleIcon,
}).addTo(map); }).addTo(map);
// You might want to zoom to fit all markers // Draw a polyline between Bremen and Hannover
const group = new L.featureGroup([bremen, 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 map.fitBounds(group.getBounds().pad(0.5)); // Adds padding around the group
}; };