Zoom in on Country

It would be incredibly useful to center and zoom based on the returned <Geography />s within <Geographies />. I think it could be helpful as a prop within <ZoomableGroup />.

[abemedia]

The beauty of open source 🙂

[abemedia]

I have managed to solve the issue of zooming in to a clicked country as follows, however how would I go about skipping the click event on the case of panning the map?

  handleGeographyClick(geography) {
    // geography looks something like this:
    // { type: "Feature",  properties: {...}, geometry: {...} }

    // zoom out if this country is already selected
    if (this.state.currentCountry === geography.properties.iso_a3) {
      return this.setState({
        center: [0,0],
        zoom: 1,
        currentCountry: null
      });
    }

    const path = geoPath().projection(this.projection());
    const center = this.projection().invert(path.centroid(geography));

    // calculate zoom level
    const bounds = path.bounds(geography);
    const dx = bounds[1][0] - bounds[0][0];
    const dy = bounds[1][1] - bounds[0][1];
    const zoom = 0.9 / Math.max(dx / this.props.width, dy / this.props.height);

    this.setState({ 
      center, 
      zoom, 
      currentCountry: geography.properties.iso_a3 
    });
  }