es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo cambiar el centro del contenedor del mapa en React-Leaflet?

12 Jun, 2023 Programación

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(

{workout.coords}

)
})
</>
)
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(
<>

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. En el componente MapLocation, cree una función llamada locateWorkout que tome un parámetro id.

    2. Dentro de la función, establezca la variable de estado workoutsClicked en true.

    3. Use el método find para encontrar y almacenar el objeto de entrenamiento con el id correspondiente.

    4. Establezca la variable de estado changedCoords en un objeto que contenga las coordenadas de latitud y longitud del objeto de entrenamiento.

    5. Pase la función locateWorkout como una propiedad al componente del contenedor de entrenamiento.

    6. En el componente Map, utilice las variables de estado workoutsClicked y changedCoords para renderizar condicionalmente la propiedad center del MapContainer.

    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 (

    locateWorkout(workout.id)}>

    {workout.coords.latitude}, {workout.coords.longitude}

    );
    };

    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 (
    <>