diff --git a/components/MapComponent.js b/components/MapComponent.js index fd0064205..4243a1b90 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2190,6 +2190,37 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }); }, [map, linePositions, lineColors]); //--------------------------------------------------------- + // 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 + const addMarkers = (map) => { + if (!map) return; + + // Coordinates for Bremen + const bremen = new L.Marker([53.07582, 8.80716], { + icon: blueCircleIcon, + }).addTo(map); + + // Coordinates for Hannover + const hannover = new L.Marker([52.37052, 9.73322], { + icon: blueCircleIcon, + }).addTo(map); + + // You might want to zoom to fit all markers + const group = new L.featureGroup([bremen, hannover]); + 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 //---------------------------------------------------------