Initialize a map using a bounding box
The boundsoption is an alternative way to set the initial camera view of a Map by specifying a bounding box around the area you want to map to showcase, as opposed to specifying the zoom and center of the map. Note that when bounds is specified, the center and zoom constructor options will be overridden.
The bounds option expects two sets of coordinates, the southwest corner and northeast corner of the bounding box. Mapbox GL JS will calculate the initial camera view to make sure the full extend of the bounding box is fully visible regardless of the map's size or aspect ratio.
In this example we use the bounding box of the five boroughs of New York City to initialize the map, ensuring that the entirety of the city is in view and optimally positioned when the map loads. By default, a bounding box does not have a visual component, so for this example, a geojson polygon representing the bounds is added as a visual reference. The fitBoundsOptions.padding option is also specified to pad the specified bounds and keep it from touching the edge of the map.
Use the buttons to see how the map initialization will honor the bounds option with different aspect ratios.
You can use bbox function in turf.js to calculate the bounding box for any geojson geometry in the browser, or use the Mapbox Location Helper tool to quickly get bounding box coordinates on an interactive map.
To experiment with bounding box values for your code, try our Location Helper.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Initialize a map using a bounding box</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
html,
body,
#map-wrapper-outer {
width: 100%;
height: 100%;
overflow: hidden;
}
#map-wrapper-outer {
display: 'flex';
justify-content: center;
align-items: center;
}
#map-wrapper-inner {
position: relative;
height: 100%;
width: 100%;
}
#btn-container {
position: absolute;
top: 20px;
display: flex;
justify-content: center;
gap: 10px;
width: 100%;
padding: 0 10px 0 10px;
box-sizing: border-box;
}
.btn-control {
font:
bold 12px/20px 'Helvetica Neue',
Arial,
Helvetica,
sans-serif;
background-color: #3386c0;
color: #fff;
z-index: 1;
border: none;
width: 200px;
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
}
.btn-control:hover {
background-color: #4ea0da;
}
.btn-control.active::before {
content: '✔';
margin-right: 5px;
}
</style>
<div id="btn-container">
<button id="narrow" class="btn-control">Narrow</button>
<button id="full" class="btn-control active">Full</button>
<button id="wide" class="btn-control">Wide</button>
</div>
<div id="map-wrapper-outer">
<div id="map-wrapper-inner">
<div id="map"></div>
</div>
</div>
<br>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
let map;
const initializeMap = () => {
map = new mapboxgl.Map({
container: 'map',
bounds: [
[-74.2709, 40.48972],
[-73.7042, 40.93288]
], // bounding box (southwest corner, northeast corner)
// by setting the bounds your map will automatically center around the bounding box
fitBoundsOptions: {
padding: 15 // padding to keep the bounds away from the edge of the map
}
});
// add a geojson line layer with a polygon representing the bounds
map.on('load', () => {
map.addLayer({
id: 'line-bounding-box',
type: 'line',
paint: {
'line-color': '#3386c0',
'line-width': 3,
'line-opacity': 0.9
},
source: {
type: 'geojson',
data: {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[-74.2709, 40.48972],
[-74.2709, 40.93288],
[-73.7042, 40.93288],
[-73.7042, 40.48972],
[-74.2709, 40.48972]
]
]
}
}
}
});
});
};
// change the map wrapper size
const resizeMap = ({ height, width }) => {
const containerDiv = document.getElementById('map-wrapper-inner');
containerDiv.style.width = width;
containerDiv.style.height = height;
if (map) map.remove();
initializeMap();
};
const setActiveButton = (id) => {
document.getElementsByClassName('active')[0].classList.remove('active');
document.getElementById(id).classList.add('active');
};
// button click listeners
document.getElementById('narrow').addEventListener('click', () => {
resizeMap({ width: '30%', height: '100%' });
setActiveButton('narrow');
});
document.getElementById('full').addEventListener('click', () => {
resizeMap({ width: '100%', height: '100%' });
setActiveButton('full');
});
document.getElementById('wide').addEventListener('click', () => {
resizeMap({ width: '100%', height: '50%' });
setActiveButton('wide');
});
initializeMap();
</script>
</body>
</html>
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.