From 22bba28f4925a1f1c99bcf10754d7766af67cef5 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 14 Jun 2024 11:27:50 +0200 Subject: [PATCH] temp: move lines on the map --- components/MapComponent.js | 134 +++++++++++++++++++++++++++++++++---- 1 file changed, 121 insertions(+), 13 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 5892039ae..48f0aa50e 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2140,6 +2140,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, []); // Karte-Linien Zeichnen + /* const blueCircleIcon = new L.Icon({ + iconUrl: "path_to_your_blue_circle_image", // Provide the path to your blue circle image + iconSize: [10, 10], // Set the size of the icon + iconAnchor: [5, 5], // Set the anchor point so the icon is centered + className: "leaflet-div-icon", + }); + useEffect(() => { if (!map) return; @@ -2150,22 +2157,87 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //--------------------------------------------------------- // Erstellt einen verschiebbaren Marker const draggableMarker = L.circleMarker(lineData.coordinates[0], { - radius: 5, - fillColor: "#00FFFF", - color: "#00FFFF", - weight: 1, - opacity: 1, - fillOpacity: 0.8, + icon: blueCircleIcon, draggable: true, // Ermöglicht das Verschieben des Markers }).addTo(map); + const updatePolyline = () => { + polyline.setLatLngs( + lineData.coordinates.map((coord) => { + if (coord === lineData.coordinates[0]) { + return draggableMarker.getLatLng(); + } + return coord; + }) + ); + }; + // 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); - }); + draggableMarker.on("drag", updatePolyline); + const group = new L.featureGroup([draggableMarker, polyline]); + map.fitBounds(group.getBounds().pad(0.5)); // Adds padding around the group + //--------------------------------------------------------- + L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], { + radius: 5, + fillColor: "#0000FF", + color: "#0000FF", + weight: 1, + opacity: 1, + fillOpacity: 0.8, + }).addTo(map); + + for (let i = 1; i < lineData.coordinates.length - 1; i++) { + L.circleMarker(lineData.coordinates[i], { + radius: 3, + fillColor: "#FFFF00", + color: "#FFFF00", + weight: 1, + opacity: 1, + fillOpacity: 0.8, + }).addTo(map); + } + } + }); + }, [map, linePositions, lineColors]); */ + //--------------------------------------------------------- + // Custom circle icon for draggable markers + const circleIcon = L.divIcon({ + className: "custom-div-icon", + html: "
", + iconSize: [10, 10], + iconAnchor: [5, 5], + }); + //const[polylines, setPolylines] = useState([]); + useEffect(() => { + if (!map) return; + + linePositions.forEach((lineData) => { + 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); + //setPolylines([...polylines, polyline]); + //--------------------------------------------------------- + // Erstellt einen verschiebbaren Marker + const draggableMarker = L.circleMarker(lineData.coordinates[0], { + icon: circleIcon, + draggable: true, // Ermöglicht das Verschieben des Markers + }).addTo(map); + + const updatePolyline = () => { + polyline.setLatLngs( + lineData.coordinates.map((coord) => { + if (coord === lineData.coordinates[0]) { + return draggableMarker.getLatLng(); + } + return coord; + }) + ); + }; + + // Event Listener für 'dragend' um die neue Position zu erfassen + draggableMarker.on("drag", updatePolyline); + const group = new L.featureGroup([draggableMarker, polyline]); + map.fitBounds(group.getBounds().pad(0.5)); // Adds padding around the group //--------------------------------------------------------- L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], { radius: 5, @@ -2189,6 +2261,43 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }); }, [map, linePositions, lineColors]); + //--------------------------------------------------------- + + // Function to initialize markers and polylines + useEffect(() => { + if (!map) return; + + linePositions.forEach((lineData) => { + const markers = []; + const color = lineColors[lineData.idModul] || "#000000"; // Default black if no color found + + // Create a marker for each coordinate + const polylinePoints = lineData.coordinates.map((coord) => { + const marker = L.marker(coord, { + icon: circleIcon, + draggable: true, + }).addTo(map); + markers.push(marker); + return marker; + }); + + // Draw polyline + const polyline = L.polyline(lineData.coordinates, { color }).addTo(map); + + // Function to update the polyline when markers are dragged + markers.forEach((marker) => { + marker.on("drag", () => { + const newCoords = markers.map((marker) => marker.getLatLng()); + polyline.setLatLngs(newCoords); + }); + }); + + // Fit map to show all markers and polylines + const group = new L.featureGroup([...markers, polyline]); + map.fitBounds(group.getBounds().pad(0.5)); + }); + }, [map]); // Run this effect when `map` is ready + //--------------------------------------------------------- // Define the blue circle icon const blueCircleIcon = new L.Icon({ @@ -2197,7 +2306,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { iconAnchor: [17, 17], // Set the anchor point so the icon is centered className: "leaflet-div-icon", }); - // Function to add markers and a polyline const addMarkers = (map) => { if (!map) return;