diff --git a/components/MapComponent.js b/components/MapComponent.js index 45f7912ca..89730a6d2 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2214,30 +2214,46 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { color: lineColors[lineData.idModul] || "#000000", }).addTo(map); + // Event-Handler für mouseover und mouseout erneut einrichten + updatedPolyline.on("mouseover", () => { + updatedPolyline.setStyle({ weight: 8 }); + updatedPolyline.bringToFront(); + }); + updatedPolyline.on("mouseout", () => { + updatedPolyline.setStyle({ weight: 5 }); + }); + // Ersetzen der alten Polyline durch die neue newPolylines[lineIndex].remove(); newPolylines[lineIndex] = updatedPolyline; - lineData.coordinates = newCoordinates; // Aktualisieren der Koordinaten im Zustand - - // Optional: Koordinaten auf dem Server aktualisieren - // ... + lineData.coordinates = newCoordinates; }); lineMarkers.push(marker); return marker; }); + // Erstellen der Polyline const polyline = L.polyline(lineData.coordinates, { color: lineColors[lineData.idModul] || "#000000", }).addTo(map); + + // Einrichten der mouseover- und mouseout-Event-Handler + polyline.on("mouseover", () => { + polyline.setStyle({ weight: 8 }); + polyline.bringToFront(); + }); + polyline.on("mouseout", () => { + polyline.setStyle({ weight: 5 }); + }); + newPolylines.push(polyline); newMarkers.push(...lineMarkers); }); setMarkers(newMarkers); setPolylines(newPolylines); - }, [map, linePositions, lineColors]); // Achten Sie darauf, dass dieser Effekt läuft, wenn sich `map`, `linePositions` oder `lineColors` ändern - + }, [map, linePositions, lineColors]); //--------------------------------------------------------- //---------------------------------------------------------