Allow bounds fitting options to be provided for initial bounds.

[elyobo]

Complements #5518 by allowing additional options (notably padding) to be
provided for the initial bounds for a map.

Launch Checklist

• briefly describe the changes in this PR
• write tests for all new functionality
• document any changes to public APIs
• post benchmark scores
• manually test the debug page
• tagged @mapbox/studio and/or @mapbox/maps-design if this PR includes style spec changes

I'm not sure how to manually test the debug page, but have implemented a simple unit test (that adding padding decreases the zoom vs not adding it).

fixes #7553

[elyobo]

@mourner you were the reviewer for #5518, this is related, so possibly you would be appropriate to look at this?

[elyobo]

Resolved initial lint/test issues, pushed amended commit.

[asheemmamoowala]

How about emphasizing that this is only used for the initial bounds. Maybe something like:

A fitBounds options object to fit the initial bounds of the map when the bounds option is specified.

[elyobo]

A fitBounds options object to use when fitting the initial bounds provided above.

The version already in there does say that it's for the initial bounds, but perhaps adding only and providing the right syntax note for the bounds would clarify further?

A fitBounds options object to use only when fitting the initial bounds provided above.

[j5kay]

The anchors in the link to the fitBounds API should be all lower-case: #map#fitbounds. It's currently broken on https://docs.mapbox.com/mapbox-gl-js/api/ :(

[elyobo]

Ah, sorry, I'll open another PR for that. TIL that it's legit to have an id with a hash in it!

I did just copy that link from other documentation, so I'll check around - likely that it's broken elsewhere too.

[elyobo]

The one I copied it from has already been fixed in #7791, so just this one to fix :)

[elyobo]

Fix in #7917 - thanks @j5kay.

[elyobo]

Thanks @asheemmamoowala. I didn't see your thumbs up to my more detailed description of the option (GH notifications don't mention those!), so the merged version only had my original description. Would you like a new PR with the change?

[matyushen]

So how could I use it? This doesn't seem to work:

var map = new mapboxgl.Map({
  center: [-122.420679, 37.772537],
  zoom: 13,
  bounds: [[-73.9876, 40.7661], [-73.9397, 40.8002]],
  fitBoundsOptions: {
    padding: { top: 100, bottom: 407, left: 100, right: 100 }
  }
});

Padding is not applied. Am I doing something wrong here?
Thanks!

[asheemmamoowala]

@matyushen this will be available in the next release.

@elyobo - a new PR would be great!

[elyobo]

NP @asheemmamoowala, see #7743

[mrmos]

the correct format for this is:

fitBoundsOptions: {
    padding: 100
}