title: How do I get a react leaflet map to pan to a new center?
body: <p>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.</p>
  <p>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.</p>
  <p>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?</p>
  <p>Below is the basic code:</p>
  <p><strong>App.js</strong></p>
  <pre><code>...
  getCurrentLocation = async () =&gt; {
      console.log(&quot;attempting to get user location ...&quot;)
      navigator.geolocation.getCurrentPosition(position =&gt; {
  
        console.log('user is at', [position.coords.latitude, position.coords.longitude]);
  
        let newViewPort = {
          height: &quot;100vh&quot;,
          width: &quot;100vw&quot;,
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          zoom: 14
        };
  
        this.setState({ viewPort: newViewPort });
  
      });
    }
  ...
  
              {/** MAP */}
              &lt;div&gt;
                {this.state.geojson &amp;&amp; &lt;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}
                /&gt;}
              &lt;/div&gt;
  </code></pre>
  <p><strong>Leaf.js</strong></p>
  <pre><code>   ...
      &lt;Map
                  center={[this.props.viewPort.latitude, this.props.viewPort.longitude]}
                  zoom={this.props.viewPort.zoom}
                  className={classes.map}
                &gt;
      ...
      {/**GET CURRENT LOCATION */}
                  &lt;Control position=&quot;topleft&quot; &gt;
                    &lt;button
                    className={classes.loc}})}
                    &gt;           
                      &lt;Image
                        
                        src={loc}
                        width=&quot;40&quot;
                        height=&quot;40&quot;
                        onClick={this.props.getCurrentLocation}
                      /&gt;  
                    &lt;/button&gt;
                  &lt;/Control&gt;
      ...
  </code></pre>