React-leaflet flyto new position

Question

I have a rather large application based on react and leaflet.

The problem is that I can't get the main map of the code to move to a new location, provided by the user in an input menu, when the menu is closed. I don't know how to trigger it properly and am at an impasse.

Here is an excerpt of the code:

My main map

                <MapContainer
                    style={{ width: '100vw', height: '100vh' }}
                    center={[
                        incident.editable.position._lat,
                        incident.editable.position._long,
                    ]}
                    zoom={13}
                    scrollWheelZoom={true}
                    zoomControl={false}
                >

The dialog box where it should move the main map to the new position when it closes

            <Dialog
                maxWidth='md'
                fullWidth
                open={Boolean(showNewPosDialog)}
                onClose={() => { setShowNewPosDialog(false) }}
            >
                <DialogTitle sx={{ paddingTop: 1, paddingBottom: 0 }}>
                    <Typography variant='body1'>
                        You are setting a new position
                    </Typography>
                </DialogTitle>
                <Autocomplete
                    freeSolo
                    options={locationList}
                    getOptionLabel={(option) => option.label}
                    value={location}
                    onChange={(evt, newValue) => {
                        setLocationList([]);
                        if (newValue) {
                            setPosition(new GeoPoint(newValue.y, newValue.x));
                        } else {
                            setPosition(null);
                        }
                        setLocation(newValue);
                        if (
                            evt.target.value !==
                            incidentData.editable.location
                        ) {
                            setAllowSave(true);
                        }
                    }}
                    fullWidth
                    sx={{ marginBottom: 2 }}
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            label='Lokasjon (sted/kommune)'
                            onChange={(evt) => {
                                handleGeoSearch(evt);
                            }}
                            variant='outlined'
                        />
                    )}
                />
                <Grid container spacing={2}>
                    <Grid item xs={12}>
                        <Typography variant='body1'>
                            Move markers on the map
                        </Typography>
                    </Grid>
                    <Grid item xs={12}>
                        <MapContainer
                            center={[58.5, 7.9]}
                            zoom={8}
                            scrollWheelZoom={true}
                            style={{ height: '35vh' }}
                        >
                            <TileLayer
                                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                            />
                            {position && (
                                <Marker
                                    position={[position._lat, position._long]}
                                />
                            )}
                            <MyComponent
                                position={position}
                            />
                        </MapContainer>
                    </Grid>
                </Grid>

The application is pretty big, so if any more information is needed, do tell.

I tried using variables to set off a map change in the component using the useMap hook:

function MyComponent(props) {
    const map = useMap();
    if (props.position) {
        map.flyTo({ lat: props.position._lat, lng: props.position._long }, 12);
    }
    return null;
}

Answer 1

Below is the code that I use. Try to add a use effect. If that does not work I would look into if the data as you set in the position is correct. Does the position get passed correctly to the component and is the coordinates correct?

import React, { useEffect } from "react";
import { useMap } from "react-leaflet";

export interface LeafletFlyToProps {
  latitude?: number;
  longitude?: number;
  zoom?: number;
}

const LeafletFlyTo: React.FC<LeafletFlyToProps> = ({
  latitude,
  longitude,
  zoom = 17,
}) => {
  const map = useMap();

  useEffect(() => {
    if (latitude && longitude) {
      map.flyTo([latitude, longitude], zoom);
    }
  }, [latitude, longitude, map, zoom]);

  return null;
};

export default LeafletFlyTo;