mapbox-gl-js version
v3.4.0 through to v3.20.0 present this issue, however it was working in v3.3.0, so possibly a regression caused by #13126
Browser and version
No response
Expected behavior
cameraForBounds will return a center and zoom required to fit the map to a given bounds, accounting for an optional padding. However when using an asymmetrical padding, for example left: 500, right: 0 it is expected that the resulting camera center would be more offset to account.
For example compare the resulting camera center in the two cases below, while the camera zoom changes to account for the padding, the center does not, but it should, resulting in the camera not respecting the padding.
map.cameraForBounds(bounds, {
left: 500,
right: 0,
top: 0,
bottom: 0
}).center
map.cameraForBounds(bounds, {
left: 0,
right: 0,
top: 0,
bottom: 0
}).centerActual behavior
In v3.3.0 this was the case, but from v3.4.0 onwards adding padding to the cameraForBounds options affects the resulting camera zoom, but not the resulting camera center.
Link to the demonstration
- In v3.3.0 the following code produces this result, works as expected.
const camera = map.cameraForBounds(bounds, {
padding: {
top: 10,
right: 10,
bottom: 10,
left: 10 + 400
}
});
map.easeTo({
center: camera.center,
zoom: camera.zoom,
bearing: camera.bearing
});
- In v3.4.0, the same code produces this result, doesn't work as expected.
- To obtain the same result as v3.3.0 when using v3.4.0 and later one needs to add an offset, like this
const camera = map.cameraForBounds(bounds, {
padding: {
top: 10,
right: 10,
bottom: 10,
left: 10 + 400
},
offset: [ 400 / 2, 0 ]
});
map.easeTo({
center: camera.center,
zoom: camera.zoom,
bearing: camera.bearing
});This is just a workaround, as you're applying an offset to correct it, but really an offset should offset it further.
full example, compare across v3.3.0 and v3.4.0
full example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#panel { position: absolute; top: 0; bottom: 0; width: 400px; background: rgba(0, 0, 255, 0.2);}
</style>
</head>
<body>
<div id="map"></div>
<div id="panel"></div>
<script>
mapboxgl.accessToken = 'pk.ey...';
const bounds = [-71.08482, 43.08003225358635, -66.96466, 47.44777598732787 ];
const polygon = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-71.08482, 43.08003225358635],
[-66.96466, 43.08003225358635],
[-66.96466, 47.44777598732787],
[-71.08482, 47.44777598732787],
[-71.08482, 43.08003225358635]
]
]
}
};
const map = new mapboxgl.Map({
container: 'map',
devtools: true,
style: 'mapbox://styles/mapbox/streets-v9',
center: [-68.13734351262877, 45.137451890638886],
zoom: 5,
hash: false,
});
map.on('load', function() {
map.addLayer({
'id': 'bounds',
'type': 'line',
'source': {
'type': 'geojson',
'data': polygon
},
'layout': {},
'paint': {
'line-color': 'red',
'line-width': 2
}
});
const camera = map.cameraForBounds(bounds, {
padding: {
top: 10,
right: 10,
bottom: 10,
left: 10 + 400
},
// a workaround in 3.4.0 and later
//offset: [400 / 2, 0]
});
map.easeTo({
center: camera.center,
zoom: camera.zoom,
bearing: camera.bearing
});
});
</script>
</body>
</html> 
mapbox-gl-js version
v3.4.0 through to v3.20.0 present this issue, however it was working in v3.3.0, so possibly a regression caused by #13126
Browser and version
No response
Expected behavior
cameraForBoundswill return acenterandzoomrequired to fit the map to a given bounds, accounting for an optional padding. However when using an asymmetrical padding, for exampleleft: 500, right: 0it is expected that the resulting cameracenterwould be more offset to account.For example compare the resulting camera center in the two cases below, while the camera zoom changes to account for the padding, the center does not, but it should, resulting in the camera not respecting the padding.
Actual behavior
In v3.3.0 this was the case, but from v3.4.0 onwards adding
paddingto thecameraForBoundsoptions affects the resulting camerazoom, but not the resulting cameracenter.Link to the demonstration
This is just a workaround, as you're applying an offset to correct it, but really an offset should offset it further.
full example, compare across v3.3.0 and v3.4.0
full example