feat: two lines with different colors, based on module id from API-Endpoint-function, next step, move lines by mouse drag

components/MapComponent.js

@@ -1731,21 +1731,28 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   useEffect(() => {
     if (!map || !talasMarkers) return;
-
+    const someLineCoordinatesforTalas = [
+      [53.111111, 8.4625],
+      [53.111111, 8.4625],
+      [53.111111, 8.4625],
+      [53.111111, 8.4625],
+    ];
     const toggleLayer = (isVisible) => {
       if (isVisible) {
         talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
         //console.log("talasMarkers", talasMarkers);
         //console.log("talasMarkers.color", talasMarkers.color);
-        talasMarkers.forEach((marker) => map.removeLayer(marker));
+        //talasMarkers.forEach((marker) => map.removeLayer(marker));
-        /*     const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
+        console.log("talasMarkers linePositions ", linePositions);
+        const polyline = L.polyline(someLineCoordinatesforTalas, {
+          color: "green",
+        }).addTo(
           //Linien-Farbe /Farbe für die Strecke zwischen den Markern
           TALAS
-        ); */
+        );
-      }
+      } else {
-      /*        else {
         talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
-      } */
+      }
     };
 
     // Apply visibility state to the TALAS layer
@@ -2140,16 +2147,26 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       if (lineData.coordinates.length > 0) {
         const color = lineColors[lineData.idModul] || "#000000"; // Standardfarbe schwarz, wenn keine Farbe gefunden
         const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
-
+        //---------------------------------------------------------
-        L.circleMarker(lineData.coordinates[0], {
+        // Erstellt einen verschiebbaren Marker
+        const draggableMarker = L.circleMarker(lineData.coordinates[0], {
           radius: 5,
-          fillColor: "#0000FF",
+          fillColor: "#00FFFF",
-          color: "#0000FF",
+          color: "#00FFFF",
           weight: 1,
           opacity: 1,
           fillOpacity: 0.8,
+          draggable: true, // Ermöglicht das Verschieben des Markers
         }).addTo(map);
 
+        // Event Listener für 'dragend' um die neue Position zu erfassen
+        draggableMarker.on("dragend", function (e) {
+          const newLat = e.target.getLatLng().lat;
+          const newLng = e.target.getLatLng().lng;
+          // Hier können Sie nun die neuen Koordinaten verarbeiten, z.B. um sie zu speichern
+          console.log("Neue Position: ", newLat, newLng);
+        });
+        //---------------------------------------------------------
         L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], {
           radius: 5,
           fillColor: "#0000FF",
@@ -2174,6 +2191,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [map, linePositions, lineColors]);
   //---------------------------------------------------------
 
+  //---------------------------------------------------------
+
   return (
     <>
       <ToastContainer />