feat: Start and end line-marker

components/MapComponent.js

@@ -2233,6 +2233,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     iconSize: [25, 25],
     iconAnchor: [5, 5],
   });
+  const startIcon = L.divIcon({
+    className: "custom-start-icon",
+    html: "<div style='background-color:#000000;border-radius:50%;width:10px;height:10px;'></div>", // Rot für den Startpunkt
+    iconSize: [25, 25],
+    iconAnchor: [5, 5],
+  });
+
+  const endIcon = L.divIcon({
+    className: "custom-end-icon",
+    html: "<div style='background-color:#ffffff;border-radius:50%;width:10px;height:10px;'></div>", // Blau für den Endpunkt
+    iconSize: [25, 25],
+    iconAnchor: [5, 5],
+  });
   //----------------------- Update lines----------------------------------
   const [lineStatusData, setLineStatusData] = useState([]);
   const [linesData, setLinesData] = useState([]);
@@ -2287,8 +2300,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     linePositions.forEach((lineData, lineIndex) => {
       const lineMarkers = [];
       lineData.coordinates.forEach((coord, index) => {
+        let icon = circleIcon; // Standard-Icon für mittlere Punkte
+        if (index === 0) {
+          icon = startIcon; // Start-Icon für den ersten Punkt
+        } else if (index === lineData.coordinates.length - 1) {
+          icon = endIcon; // End-Icon für den letzten Punkt
+        }
+
         const marker = L.marker(coord, {
-          icon: circleIcon,
+          icon: icon,
           draggable: true,
         }).addTo(map);