From 57a5e9667b672860ba3f09c7d6e909152d1e0df1 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 14 Jun 2024 08:59:40 +0200
Subject: [PATCH] add:  create two icons, Bremen and Hannover for prepair move
 marker to move the line between these on the map

---
 components/MapComponent.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

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