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
|
}, [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 (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user