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

feat: Marker hinzufügen und Marker entfernen in PolyLines und der currentZoom funktioniert

Browse Source
This commit is contained in:
ISA
2024-07-11 10:11:20 +02:00
parent 3ea4ce99b5
commit 0079664dfb
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/MapComponent.js
View File

@@ -81,7 +81,11 @@ import useMapContextMenu from "./useMapContextMenu.js";
//--------------------------------------------------------------------- //---------------------------------------------------------------------
//-------------------- MapComponent ----------------------------------- //-------------------- MapComponent -----------------------------------
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [currentZoom, setCurrentZoom] = useState(12); const [currentZoom, setCurrentZoom] = useState(() => {
const storedZoom = localStorage.getItem("mapZoom");
return storedZoom ? parseInt(storedZoom, 10) : 12;
});
const [currentCenter, setCurrentCenter] = useState(() => { const [currentCenter, setCurrentCenter] = useState(() => {
const storedCenter = localStorage.getItem("mapCenter"); const storedCenter = localStorage.getItem("mapCenter");
try { try {
@@ -242,10 +246,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const zoomIn = (e) => { const zoomIn = (e) => {
initMap.flyTo(e.latlng, 12); initMap.flyTo(e.latlng, 12);
//console.log("ZoomIn koordinaten in MapComponent", e.latlng); //console.log("ZoomIn koordinaten in MapComponent", e.latlng);
// Speichern der Daten in LocalStorage
localStorage.setItem("mapZoom", map.getZoom());
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
}; };
const zoomOut = (e) => { const zoomOut = (e) => {
fly(); fly();
localStorage.setItem("mapZoom", map.getZoom());
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
}; };
const centerHere = (e) => { const centerHere = (e) => {
initMap.panTo(e.latlng); initMap.panTo(e.latlng);
@@ -2072,8 +2081,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
insertNewMarker(closestPoints, newPoint, lineData, map); insertNewMarker(closestPoints, newPoint, lineData, map);
redrawPolyline(lineData); redrawPolyline(lineData);
//Browser aktualisieren //Browser aktualisieren
localStorage.setItem("mapZoom", currentZoom); //localStorage.setItem("mapZoom", currentZoom);
localStorage.setItem("mapCenter", JSON.stringify(currentCenter)); //localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
window.location.reload(); window.location.reload();
}, },
}, },

5
utils/markerUtils.js
View File

@@ -20,6 +20,7 @@ export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
// Event-Listener für das Verschieben des Markers hinzufügen // Event-Listener für das Verschieben des Markers hinzufügen
newMarker.on("dragend", () => { newMarker.on("dragend", () => {
const newCoords = newMarker.getLatLng(); const newCoords = newMarker.getLatLng();
setNewCoords(newCoords);
const newCoordinates = [...lineData.coordinates]; const newCoordinates = [...lineData.coordinates];
newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng]; newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
lineData.coordinates = newCoordinates; lineData.coordinates = newCoordinates;
@@ -66,8 +67,8 @@ export const handleEditPoi = (
export const removeMarker = (marker, lineData, currentZoom, currentCenter) => { export const removeMarker = (marker, lineData, currentZoom, currentCenter) => {
// Save zoom and center to localStorage // Save zoom and center to localStorage
localStorage.setItem("mapZoom", currentZoom); //localStorage.setItem("mapZoom", currentZoom);
localStorage.setItem("mapCenter", JSON.stringify(currentCenter)); //localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
// Find the index of the coordinate that matches the marker's position // Find the index of the coordinate that matches the marker's position
const index = lineData.coordinates.findIndex((coord) => const index = lineData.coordinates.findIndex((coord) =>