title: How do you call fitBounds() when using leaflet-react?
body: <p>I cannot figure out how to call fitBounds() on the Leaflet map.</p>
  
  <p>If I was just using vanilla leaflet, this solution would work perfectly: <a href="https://stackoverflow.com/questions/16845614/zoom-to-fit-all-markers-in-mapbox-or-leaflet">Zoom to fit all markers in Mapbox or Leaflet</a></p>
  
  <p>Unfortunately, I am using react-leaflet.</p>
  
  <p>Here is the solution if I was just using leaflet by itself.</p>
  
  <pre><code>var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
  map.fitBounds(leafletMap.getBounds());
  </code></pre>
  
  <p>I think this code (my code) <code>this.mapRef.current.leafletElement</code> is equivalent to <code>var leafletMap = new L.featureGroup([marker1, marker2, marker3]); leafletMap.getBounds();</code>, but what is <code>map.fitBounds();</code> equivalent to in react-leaflet?</p>
  
  <p>Basically, I am trying to display multiple markers on the map and have the view adjust accordingly (zoom in, zoom out, fly to, etc.).</p>
  
  <p>Here is my code.</p>
  
  <pre><code>import React, { createRef, Component } from 'react'
  import { Map, TileLayer, Marker, Popup, FeatureGroup } from 'react-leaflet'
  
  export default class MasterLeafletMap extends Component {
    constructor(props) {
      super(props);
      this.markers = this.markers.bind(this);
      this.handleClick = this.handleClick.bind(this);
      this.mapRef = createRef()
    }
  
    handleClick() {
      const leafletMap = this.mapRef.current.leafletElement;
      this.mapRef.current.fitBounds(leafletMap.getBounds()); // Doesn't work
      leafletMap.fitBounds(leafletMap.getBounds()); // Doesn't work (just trying to get the bounds of the markers that are there and adjust the view)
      this.mapRef.current.leafletElement.flyToBounds(leafletMap.getBounds()); // Doesn't work
    }
    markers() {
      if (this.props.search.items instanceof Array) {
        return this.props.search.items.map(function(object, i) {
          const position = [object._geoloc.lat, object._geoloc.lng];
          return &lt;Marker position={position}&gt;
            &lt;Popup&gt;
              &lt;span&gt;
                &lt;h4&gt;{object.title}&lt;/h4&gt;
                {object.address}, &lt;br /&gt; {object.city}, {object.state}, {object.zip} &lt;br /&gt; {object._geoloc.lat}, {object._geoloc.lng}
              &lt;/span&gt;
            &lt;/Popup&gt;
          &lt;/Marker&gt;
        })
      }
  
    }
    render() {
      const hasLoaded = this.props.search.items instanceof Array;
      if (!hasLoaded) {
        return null;
      }
  
      const position = [this.props.search.items[0]._geoloc.lat, this.props.search.items[0]._geoloc.lng];
  
      return (
        &lt;div className="leaflet-map-container"&gt;
          &lt;div onClick={this.handleClick}&gt;Hello&lt;/div&gt;
          &lt;Map center={position} zoom={13} ref={this.mapRef}&gt;
            &lt;TileLayer
              attribution="&amp;amp;copy &lt;a href=&amp;quot;http://osm.org/copyright&amp;quot;&gt;OpenStreetMap&lt;/a&gt; contributors"
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            /&gt;
            &lt;FeatureGroup&gt;
              {this.markers()}
            &lt;/FeatureGroup&gt;
          &lt;/Map&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Thanks in advance.</p>