React-map-gl: FlyToBoundingRectangle?

[SethHamilton]

First I want to say, this is a great library, loving it. I've done some amazing things with it so far.

I have a scenario that can't be that uncommon. I user might select some properties. I iterate those and get the bounding box in GPS coords. I would like to fly using the FlyToInterpolator to that box.

I've had thoughts around finding the center point (easy enough) and trying to figure out scaling in meters for a given zoom and maybe doing it that way, but I have not found a reference correlating zoom and scale.

I also think the underlying mapbox-gl may have a function that does this. I think I might be able to leverage that, but I'm concerned about losing viewport state in react-map-gl.

Has anyone tackled this one? Thank you.

[SethHamilton]

Well, if anyone else is looking for this, it can be found here:

https://uber-common.github.io/viewport-mercator-project/#/documentation/api-reference/web-mercator-utils

There are a number of useful conversion tools in the viewport-mercator-product.

[Pessimistress]

@SethHamilton You got it. For future visitors of this issue:

import WebMercatorViewport from 'viewport-mercator-project';

const viewport = new WebMercatorViewport({longitude, latitude, zoom, pitch, bearing});
const newViewport = viewport.fitBounds([[-122.4, 37.7], [-122.5, 37.8]], {
  padding: 20,
  offset: [0, -100]
});

[Pessimistress]

• [ ] add a page for viewport manipulation in docs