CODEWITHSUNDEEP
mapboxmapbox-gl-js
Maothor
Maothor

Reputation: 45

How to add bounds and padding in MapBox constructor?

With map.fitBounds(bounds, {padding: 100}), it is possible to add padding while setting the bounds making sure your markers (on which 'bounds' are based) are all nicely shown inside the viewable part of the map. I'd like to achive the same in the constructor where the bounds can be set like this:

var map = new mapboxgl.Map({
container: 'MapPanel',
style: 'mapbox://styles/mapbox/streets-v11',
bounds: bounds});

I can't find a way to include the padding - does anyone know how?

Update: Thanks @Steve - just confirming your solution solves my problem.

Upvotes: 1

Views: 2180

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126687

That's what the fitBoundsOptions parameter is for:

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

Use it like this:

const map = new mapboxgl.Map({
container: 'MapPanel',
style: 'mapbox://styles/mapbox/streets-v11',
bounds: bounds,
fitBoundsOptions: { padding: {top: 10, bottom:25, left: 15, right: 5}}});

Upvotes: 4

Related Questions