React-map-gl: Viewport Transition Offsets

[eballeste]

Current map transition methods like panTo allow specifying a pixel based offset which is applied to the animation final destination point. Looking at the docs, I can't seem to find any equivalent option with viewport transition to do this. Would be nice to include this feature for UI's that have overlaying panels which requires offsetting the map's center.

Anyone know of a workaround for this?

[Pessimistress]

Use the fitBounds utility:

import WebMercatorViewport from 'viewport-mercator-project';
const viewport = new WebMercatorViewport({width: 600, height: 400});
const bound = viewport.fitBounds(
  [[-73.9876, 40.7661], [-72.9876, 41.7661]],
  {padding: 20, offset: [0, -40]}
);
// => bounds: instance of WebMercatorViewport
// {longitude: -73.48760000000007, latitude: 41.268014439447484, zoom: 7.209231188444142}

Then you can trigger a transition to the returned lng/lat/zoom.

[rdrnt]

@Pessimistress

Where do you find the numbers for the bounds? (i.e [[-73.9876, 40.7661], [-72.9876, 41.7661]]) ?