Icons an beide Seiten Punkte des Linie

components/MapComponent.js

@@ -2074,6 +2074,35 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       });
   }, []);
 
+  useEffect(() => {
+    if (!map) return;
+
+    linePositions.forEach((line) => {
+      if (line.length > 0) {
+        // Create a polyline for each set of coordinates
+        const polyline = L.polyline(line, { color: "red" }).addTo(map);
+
+        // Add start marker
+        const startIcon = new L.Icon({
+          iconUrl: "/path/to/start-icon.png",
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+        });
+        L.marker(line[0], { icon: startIcon }).addTo(map);
+
+        // Add end marker
+        const endIcon = new L.Icon({
+          iconUrl: "/path/to/end-icon.png",
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+        });
+        L.marker(line[line.length - 1], { icon: endIcon }).addTo(map);
+      }
+    });
+  }, [map, linePositions]);
+
   //---------------------------------------------------------
 
   return (