How do I get a react leaflet map to pan to a new center?

Question

I am using react with leaflet. When a user lands on the page, current location is ascertained and the map then renders with a center on the map that is the user location.

However, after that, when I pan the map left and right and then click a button to ascertain my location again (with the purpose of recentering), the map does not recenter. I know the function is firing and location hasn't changed, so I get that the map will not repan.

Is there a way to re-render the map or force it to understand that it has been panned so that it can recenter when the location function is fired? Or perhaps I should be using another leaflet function that recenters the map?

Below is the basic code:

App.js

...
getCurrentLocation = async () => {
    console.log("attempting to get user location ...")
    navigator.geolocation.getCurrentPosition(position => {

      console.log('user is at', [position.coords.latitude, position.coords.longitude]);

      let newViewPort = {
        height: "100vh",
        width: "100vw",
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        zoom: 14
      };

      this.setState({ viewPort: newViewPort });

    });
  }
...

            {/** MAP */}
            <div>
              {this.state.geojson && <Leaf
                data={this.state.data}
                getCurrentLocation={this.getCurrentLocation}
                viewPort={this.state.viewPort}
                geojson={this.state.geojson}
                showModal={this.state.showModal}
                closeModal={this.closeModal}
                toggleModal = {this.toggleModal}
              />}
            </div>

Leaf.js

   ...
    <Map
                center={[this.props.viewPort.latitude, this.props.viewPort.longitude]}
                zoom={this.props.viewPort.zoom}
                className={classes.map}
              >
    ...
    {/**GET CURRENT LOCATION */}
                <Control position="topleft" >
                  <button
                  className={classes.loc}})}
                  >           
                    <Image
                      
                      src={loc}
                      width="40"
                      height="40"
                      onClick={this.props.getCurrentLocation}
                    />  
                  </button>
                </Control>
    ...

Answer 1

change your map to save a ref, eg:

<Map ref={ref=>this.map=ref}
...

Now, using this saved ref, you will be able to call various methods on the Leaflet instance via the leafletElement property on the ref.

eg, to center on a point:

this.map.leafletElement.setView(new L.LatLng(position.coords.latitude, position.coords.longitude), this.props.viewPort.zoom);

Debugging tips:

• try wrapping with setTimeout(code,100); To avoid various timing issues that plague the leaflet library.