test: In Konextmenü POI hinzufügen Icon Platzhalter sichtbar statt hintergelegte Icon für POI

components/MapComponent.js

@@ -2275,7 +2275,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             setLinesData(matchingLine);
           }
         });
-
         setLineColors(colorsByModule);
       } catch (error) {
         console.error("Error fetching data:", error);
@@ -2289,6 +2288,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;
 
@@ -2319,6 +2322,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];
 
@@ -2415,12 +2419,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);
             },
           },
         ],
@@ -2450,7 +2460,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents]);
+  }, [
+    map,
+    linePositions,
+    lineColors,
+    tooltipContents,
+    newPoint,
+    newCoords,
+    tempMarker,
+  ]);
 
   //---------------------------------------------------------
   //-------------------------Funktionen--------------------------------
@@ -2534,7 +2552,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,