Initialize a map using a bounding box
This example demonstrates the bounds option when initializing a new Map. bounds is an alternative to specifying the zoom and center to set the initial camera view, and ensures that the area specified by the bounding box will be fully visible regardless of the map 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. A geojson polygon representing the same bounds is added as a visual reference. fitBoundsOptions.padding 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.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.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)
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.