feat: entfernen von Platzhalter-Icon und stattdessen CircleIcon hinzufügen in MapComponents bei insertNewMarker

components/MapComponent.js

@@ -2277,6 +2277,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     console.log("lineData:", linesData);
   }, [lineStatusData, linesData]);
   //---------------------------------------------------------
+  const [newPoint, setNewPoint] = useState(null);
+  const [newCoords, setNewCoords] = useState(null);
+  const [tempMarker, setTempMarker] = useState(null);
+
   useEffect(() => {
     if (!map) return;
 
@@ -2307,6 +2311,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
         marker.on("dragend", () => {
           const newCoords = marker.getLatLng();
+          setNewCoords(newCoords); // Aktualisieren Sie den Zustand
           const newCoordinates = [...lineData.coordinates];
           newCoordinates[index] = [newCoords.lat, newCoords.lng];
 
@@ -2403,12 +2408,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           {
             text: "Marker hier hinzufügen",
             callback: (e) => {
+              if (tempMarker) {
+                tempMarker.remove(); // Entfernen des Platzhalter-Icons
+              }
+              //------------
               const newPoint = e.latlng;
+              setNewPoint(newPoint); // Aktualisieren Sie den Zustand
               const closestPoints = findClosestPoints(
                 lineData.coordinates,
                 newPoint
               );
               insertNewMarker(closestPoints, newPoint, lineData, map);
+              redrawPolyline(lineData);
             },
           },
         ],
@@ -2438,7 +2449,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents]);
+  }, [
+    map,
+    linePositions,
+    lineColors,
+    tooltipContents,
+    newPoint,
+    newCoords,
+    tempMarker,
+  ]);
 
   //---------------------------------------------------------
   //-------------------------Funktionen--------------------------------
@@ -2522,7 +2541,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }
 
   function insertNewMarker(closestPoints, newPoint, lineData, map) {
-    const newMarker = L.marker(newPoint, { draggable: true }).addTo(map);
+    const newMarker = L.marker(newPoint, {
+      icon: circleIcon,
+      draggable: true,
+    }).addTo(map);
     lineData.coordinates.splice(closestPoints[2], 0, [
       newPoint.lat,
       newPoint.lng,