Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move markers in th line on the map with polyline.setLatLngs(newCoords);

Browse Source
This commit is contained in:
ISA
2024-06-14 11:53:19 +02:00
parent fe65a5d87f
commit 0083976f69
1 changed files with 3 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/MapComponent.js
View File

@@ -2208,59 +2208,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
iconAnchor: [5, 5],
});
//const[polylines, setPolylines] = useState([]);
useEffect(() => {
/* 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: 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("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]);
}, [map, linePositions, lineColors]); */
//---------------------------------------------------------
// Function to initialize markers and polylines
@@ -2296,7 +2246,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const group = new L.featureGroup([...markers, polyline]);
map.fitBounds(group.getBounds().pad(0.5));
});
}, [map]); // Run this effect when `map` is ready
}, [map, linePositions, lineColors]); // Run this effect when `map` is ready
//---------------------------------------------------------
// Define the blue circle icon