del: delete Bremen Hannover line, because it was just for dev test
This commit is contained in:
@@ -2249,58 +2249,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
}, [map, linePositions, lineColors]); // Run this effect when `map` is ready
|
||||
|
||||
//---------------------------------------------------------
|
||||
// Define the blue circle icon
|
||||
const blueCircleIcon = new L.Icon({
|
||||
iconUrl: "path_to_your_blue_circle_image", // Provide the path to your blue circle image
|
||||
iconSize: [35, 35], // Set the size of the icon
|
||||
iconAnchor: [17, 17], // Set the anchor point so the icon is centered
|
||||
className: "leaflet-div-icon",
|
||||
});
|
||||
// Function to add markers and a polyline
|
||||
const addMarkers = (map) => {
|
||||
if (!map) return;
|
||||
|
||||
// Coordinates for Bremen
|
||||
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
|
||||
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
|
||||
};
|
||||
|
||||
// Call addMarkers in the useEffect where the map is initialized
|
||||
useEffect(() => {
|
||||
addMarkers(map); // Assuming 'map' is your map instance
|
||||
}, [map]); // Ensure this runs only once when the map is ready
|
||||
|
||||
//---------------------------------------------------------
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user