From 9c73d6f478909a17660d5f4b2e448f63826bf66f Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 27 Jun 2024 07:08:17 +0200
Subject: [PATCH] feat: Start and end line-marker

---
 components/MapComponent.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 3ebe4e2f9..3f59b6013 100644
--- a/components/MapComponent.js
+++ b/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);