diff --git a/components/MapComponent.js b/components/MapComponent.js index cc99b97c7..f209f3e82 100644 --- a/components/MapComponent.js +++ b/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,