add: create two icons, Bremen and Hannover for prepair move marker to move the line between these on the map

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
 
   //---------------------------------------------------------