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

feat: Extracted restoreMapSettings to mapUtils.js

Browse Source 
Moved the restoreMapSettings function from MapComponent.js to mapUtils.js for better modularity and reusability. This change also helps in maintaining cleaner code and improving readability.
This commit is contained in:
ISA
2024-07-09 10:35:46 +02:00
parent b53fe1b3f1
commit 6cc3cdc483
3 changed files with 72 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
components/MapComponent.js
View File

@@ -47,8 +47,16 @@ import plusRoundIcon from "./PlusRoundIcon.js";
saveLineData,
} from "../utils/utils.js"; */
import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
import { handleEditPoi, insertNewMarker } from "../utils/markerUtils.js";
import { saveLineData, redrawPolyline } from "../utils/mapUtils.js";
import {
handleEditPoi,
insertNewMarker,
removeMarker,
} from "../utils/markerUtils.js";
import {
saveLineData,
redrawPolyline,
restoreMapSettings,
} from "../utils/mapUtils.js";
import circleIcon from "./CircleIcon";
import startIcon from "./StartIcon";
import endIcon from "./EndIcon";
@@ -68,7 +76,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [currentZoom, setCurrentZoom] = useState(12);
const [currentCenter, setCurrentCenter] = useState(() => {
const storedCenter = localStorage.getItem("mapCenter");
return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625];
try {
return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625];
} catch (e) {
console.error("Error parsing stored map center:", e);
return [53.111111, 8.4625];
}
});
const [priorityConfig, setPriorityConfig] = useState([]);
@@ -2043,7 +2056,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng];
removeMarker(marker, lineData);
removeMarker(marker, lineData, currentZoom, currentCenter);
newPolylines[lineIndex].remove();
lineData.coordinates = newCoordinates;
},
@@ -2125,83 +2138,29 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//---------------------------------------------------------
//-------------------------Funktionen--------------------------------
function addMarkerAt(e, lineData) {
const newCoord = [e.latlng.lat, e.latlng.lng];
lineData.coordinates.push(newCoord); // neuen Punkt hinzufügen
drawPolyline(lineData); // Polylinie neu zeichnen
const marker = L.marker(newCoord, { draggable: true }).addTo(map);
marker.on("drag", (event) => {
updateMarkerPosition(event.target.getLatLng(), lineData, marker);
});
}
function drawPolyline(lineData) {
if (lineData.polyline) map.removeLayer(lineData.polyline);
lineData.polyline = L.polyline(lineData.coordinates, {
color: "red",
}).addTo(map);
}
//---------------------------------------------------------
function removeMarker(marker, lineData) {
// Save zoom and center to localStorage
localStorage.setItem("mapZoom", currentZoom);
localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
// Find the index of the coordinate that matches the marker's position
const index = lineData.coordinates.findIndex((coord) =>
L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
);
if (index !== -1) {
// Remove the coordinate from the line data
lineData.coordinates.splice(index, 1);
// Redraw the polyline with the updated coordinates
redrawPolyline(lineData);
// Remove the marker from the map
marker.remove();
// Save the updated line data
saveLineData(lineData);
// Refresh the browser
window.location.reload();
}
}
// Call this function on page load to restore zoom and center
function restoreMapSettings() {
/* function restoreMapSettings() {
const savedZoom = localStorage.getItem("mapZoom");
const savedCenter = localStorage.getItem("mapCenter");
if (savedZoom && savedCenter) {
const centerCoords = JSON.parse(savedCenter);
map.setView(centerCoords, parseInt(savedZoom));
try {
const centerCoords = JSON.parse(savedCenter);
map.setView(centerCoords, parseInt(savedZoom));
} catch (e) {
console.error("Error parsing stored map center:", e);
map.setView([53.111111, 8.4625], 12); // Standardkoordinaten und -zoom
}
}
}
} */
// Call restoreMapSettings when the map is initialized
useEffect(() => {
if (map) {
restoreMapSettings();
restoreMapSettings(map);
}
}, [map]);
//---------------------------------------------------------
function updateMarkerPosition(newLatLng, lineData, marker) {
const index = lineData.coordinates.findIndex((coord) =>
L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
);
if (index !== -1) {
lineData.coordinates[index] = [newLatLng.lat, newLatLng.lng];
redrawPolyline(lineData);
saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
}
}
function findClosestPoints(coordinates, newPoint) {
let minDist = Infinity;
let closestPair = [];