> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)

# Initialize a map using a bounding box

The [`bounds`option](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) is an alternative way to set the initial camera view of a [`Map`](https://docs.mapbox.com/mapbox-gl-js/api/map/) by specifying a [`bounding box`](https://docs.mapbox.com/help/glossary/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`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds) 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`](https://turfjs.org/docs/api/bbox) function in [`turf.js`](https://turfjs.org/) to calculate the bounding box for any geojson geometry in the browser, or use the [Mapbox Location Helper](https://labs.mapbox.com/location-helper/) tool to quickly get bounding box coordinates on an interactive map.

> **Related content (playground): [Location Helper](https://labs.mapbox.com/location-helper)**
> 
> To experiment with bounding box values for your code, try our *Location Helper*.

> Example code:

**JavaScript**

```html
<!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.28.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.28.1/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>
    let map;

    const initializeMap = () => {
        map = new mapboxgl.Map({
            // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
            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
            },
            style: 'mapbox://styles/mapbox/standard'
        });

        // 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>
```