javascript - How do you call fitBounds() when using leaflet-react?

Question

I cannot figure out how to call fitBounds() on the Leaflet map.

If I was just using vanilla leaflet, this solution would work perfectly: Zoom to fit all markers in Mapbox or Leaflet

Unfortunately, I am using react-leaflet.

Here is the solution if I was just using leaflet by itself.

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());

I think this code (my code) this.mapRef.current.leafletElement is equivalent to var leafletMap = new L.featureGroup([marker1, marker2, marker3]); leafletMap.getBounds();, but what is map.fitBounds(); equivalent to in react-leaflet?

Basically, I am trying to display multiple markers on the map and have the view adjust accordingly (zoom in, zoom out, fly to, etc.).

Here is my 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 <Marker position={position}>
          <Popup>
            <span>
              <h4>{object.title}</h4>
              {object.address}, <br /> {object.city}, {object.state}, {object.zip} <br /> {object._geoloc.lat}, {object._geoloc.lng}
            </span>
          </Popup>
        </Marker>
      })
    }

  }
  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 (
      <div className="leaflet-map-container">
        <div onClick={this.handleClick}>Hello</div>
        <Map center={position} zoom={13} ref={this.mapRef}>
          <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <FeatureGroup>
            {this.markers()}
          </FeatureGroup>
        </Map>
      </div>
    )
  }
}

Thanks in advance.

Answer 1

Here is an example how to accomplish it via react-leaflet

handleClick() {
    const map = this.mapRef.current.leafletElement;  //get native Map instance
    const group = this.groupRef.current.leafletElement; //get native featureGroup instance
    map.fitBounds(group.getBounds());
}

where

<div>
    <button onClick={this.handleClick}>Zoom</button>
    <Map
      center={this.props.center}
      zoom={this.props.zoom}
      ref={this.mapRef}
    >
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <FeatureGroup ref={this.groupRef}>
        {this.props.locations.map(location => (
          <Marker
            key={location.name}
            position={{ lat: location.lat, lng: location.lng }}
          >
            <Popup>
              <span>
                <h4>{location.name}</h4>
              </span>
            </Popup>
          </Marker>
        ))}
      </FeatureGroup>
    </Map>
 </div>

which corresponds to

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());

Here is a demo