Fitbounds with center option not doing expected thing

[malekeym]

mapbox-gl-js version:2.6.1

browser:Chrome

Steps to Trigger Behavior

1.create LngLatBounds as bounds 2 .use map.fitBounds and pass the center option to it

Link to Demonstration

check out this link for more info: https://jsbin.com/zodotod/edit?html,output

Expected Behavior

The bounds should be in the view and the center of the map should be the center option

Actual Behavior

Just flyTo the center

[Al-0]

I think that center is not an option for the fitBounds method. https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds

[malekeym]

@ai-santos I think, You are wrong

[Al-0]

Hmmm, now that you mention it, it should be available as part of the CameraOptions, I will look into it.

[Jeremboo]

Just to follow up because I have the same problem. I'm using v2.7.0.

[mattwltr]

It's been a while, I can still reproduce it. Any updates?

[gauravkhurana17]

I got it working with following code. fitBounds( [ Object.values(bounds.southwest).reverse(), Object.values(bounds.northeast).reverse(), ] as LngLatBoundsLike, { center: [longitude, latitude] } );

[artem-schander]

Did not work for me. But the following works fine..

let bounds = new Mapbox.LngLatBounds()
addresses.forEach(el => bounds.extend([el.longitude, el.latitude]));

const options = {
    padding: 80,
    duration: 0,
    // center: this.center
}

// calculate center related offset
const ne = bounds.getNorthEast()
const sw = bounds.getSouthWest()

const offset = {
    ne: [
        this.center[0] - ne.lng,
        this.center[1] - ne.lat,
    ],
    sw: [
        this.center[0] - sw.lng,
        this.center[1] - sw.lat,
    ]
}

bounds.extend([this.center[0] + offset.ne[0], this.center[1] + offset.ne[1]])
bounds.extend([this.center[0] + offset.sw[0], this.center[1] + offset.sw[1]])

map.fitBounds(bounds, options)

basically I'm calculating the opposite positions related to the center