¿Cómo cambiar el centro del contenedor del mapa en React-Leaflet?
Quiero poder cambiar el centro del contenedor del mapa react-leaflet haciendo clic en el contenedor de entrenamiento, que es un objeto que tiene las coordenadas. He compartido todos los estados en los componentes utilizando contextApi.
//WorkoutData.js
export const WorkoutsData = [
{
id: 1,
coords: {latitude: 56.27360151291927,
longitude:-82.84886256490017},
},
{
id: 2,
coords: {latitude: 49.27360151291927,
longitude: -75.84886256490017},
},
{
id: 3,
coords: {latitude: 39.27360151291927,
longitude: -79.84886256490017},
}
];
//MapLocation.js
Tengo una carpeta main.js que tiene todas las variables de estado y todos los demás componentes comparten la variable utilizando contextapi
import React, { useEffect, useState } from “react”;
import “./styles.css”;
import { WorkoutsData } from “./WorkoutLocation”;
const MapLocation() => {
const [workouts, setWorkouts] = useState(WorkoutsData);
const [changedCoords, setChangedCoords] = useState({latitude: 0, longitude: 0})
const [workoutsClicked, setWorkoutsClicked] = useState(false);
const locateWorkout = (id) => {
setWorkoutsClicked(true)
const findLocation = workouts.find((exercise) => {
return exercise.id === id;
});
setChangedCoords({
latitude: findLocation.coords.latitude,
longitude: findLocation.coords.longitude
})
}
return(
<>
workouts.map((workout) => {
return(
)
})
</>
)
export default MapLocation;
//Map.js
Tengo una carpeta main.js que tiene todas las variables de estado y todos los demás componentes comparten la variable utilizando contextapi
const Map = () => {
const[initialCoords, setInitialCoords] = useState({latitude: 0, longitude: 0})
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
setInitialCoords({
latitude: position.coords.latitude,
longitude: position.coords.longitude
})
})
}
}, [])
return(
<>
davy.ai
Para cambiar el centro del contenedor del mapa de react-leaflet haciendo clic en el contenedor de entrenamiento, puede seguir los siguientes pasos:
MapLocation
, cree una función llamadalocateWorkout
que tome un parámetroid
.Dentro de la función, establezca la variable de estado
workoutsClicked
entrue
.Use el método
find
para encontrar y almacenar el objeto de entrenamiento con elid
correspondiente.Establezca la variable de estado
changedCoords
en un objeto que contenga las coordenadas delatitud
ylongitud
del objeto de entrenamiento.Pase la función
locateWorkout
como una propiedad al componente del contenedor de entrenamiento.En el componente
Map
, utilice las variables de estadoworkoutsClicked
ychangedCoords
para renderizar condicionalmente la propiedadcenter
delMapContainer
.Aquí hay un ejemplo de código:
//MapLocation.js
import React, { useContext } from “react”;
import { WorkoutsData } from “./WorkoutLocation”;
import { AppContext } from “./AppContext”;
const WorkoutContainer = ({ workout, locateWorkout }) => {
return (
);
};
const MapLocation = () => {
const { workouts, setChangedCoords, setWorkoutsClicked } = useContext(AppContext);
const locateWorkout = (id) => {
setWorkoutsClicked(true);
const workout = workouts.find((exercise) => exercise.id === id);
setChangedCoords({
latitude: workout.coords.latitude,
longitude: workout.coords.longitude,
});
};
return (
<>
{workouts.map((workout) => (
))}
);
};
export default MapLocation;
//Map.js
import React, { useContext, useEffect, useState } from “react”;
import { MapContainer, TileLayer } from “react-leaflet”;
import { AppContext } from “./AppContext”;
const Map = () => {
const { initialCoords, workoutsClicked, changedCoords } = useContext(AppContext);
const [mapCenter, setMapCenter] = useState([initialCoords.latitude, initialCoords.longitude]);
useEffect(() => {
if (workoutsClicked) {
setMapCenter([changedCoords.latitude, changedCoords.longitude]);
} else {
setMapCenter([initialCoords.latitude, initialCoords.longitude]);
}
}, [workoutsClicked, changedCoords, initialCoords]);
return (
<>
Derechos de autor (c) 2023. Todos los derechos reservados.