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

# bounding box

A **bounding box** is a way to display a rectangular area of a map. It is expressed as a set of coordinate pairs, with the first coordinate pair referring to the southwestern corner of the box (the minimum [longitude and latitude](https://docs.mapbox.com/help/glossary/lat-lon/)) and the second referring to the northeastern corner of the box (the maximum longitude and latitude).

Below is a visualization of a bounding box created around the state of Vermont from our [Location Helper](https://labs.mapbox.com/location-helper) tool.

![](https://docs.mapbox.com/help/assets/ideal-img/bounding-box-vermont.eff5d97.480.png)

Bounding boxes are useful for describing the spatial limits of geographic features. For example, a you could create a bounding box to describe the limits of an administrative boundary polygon, or describe the limits of a set of point features.

Once a bounding box is defined, you can use it to set the initial view of a map to make sure that the area within the bounding box is fully visible regardless of aspect ratio. You can also use a bounding box to control the view of an existing map programmatically.

### Mapbox GL JS

This [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) snippet creates a bounding box using the [`LngLatBounds` method](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds) and then calls [`fitBounds`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds) to move the map's camera, ensuring that the bounding box is fully in view.

```js
const southWest = new mapboxgl.LngLat(-73.9876, 40.7661);
const northEast = new mapboxgl.LngLat(-73.9397, 40.8002);
const boundingBox = new mapboxgl.LngLatBounds(southWest, northEast);

map.fitBounds(boundingBox);
```

> **Related content (example): [Fit map to a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/fitbounds/)**
> 
> This GL JS example shows you how to use `fitBounds` to zoom & pan to a bounding box.

> **Related content (example): [Initialize a map with a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/initialize-with-bounding-box/)**
> 
> This GL JS example demonstrates how a bounding box can be used to center a map regardless of the map's aspect ratio.

### Mobile SDKs

Our mobile SDK's for [iOS](https://docs.mapbox.com/ios/maps/guides/), [Android](https://docs.mapbox.com/android/maps/guides/) & [Flutter](https://docs.mapbox.com/flutter/maps/guides/) use the `CoordinateBounds` class to create a bounding box and use the `camera` and `setCamera` methods of the `mapboxMap` object to set the camera view to the bounding box.

**iOS**

```swift
let boundingBox = CoordinateBounds(
southwest: CLLocationCoordinate2D(latitude: -0.90204, longitude: -158.63249),
northeast: CLLocationCoordinate2D(latitude: 66.77350, longitude: 10.68889)
)

// Center the camera on the bounds
let camera = mapView.mapboxMap.camera(for: boundingBox, padding: .zero, bearing: 0, pitch: 0)
```

**Android**

```kotlin
let boundingBox = CoordinateBounds(
Point.fromLngLat(-158.63249 -0.90204),
Point.fromLngLat(10.68889, 66.77350),
false
)
// Define camera bounds
private val cameraBoundsOptions = CameraBoundsOptions.Builder()
.bounds(boundingBox)
.minZoom(10.0)
.build()

// Fit camera to the bounding box
mapboxMap.setCamera(cameraBoundsOptions)
```

**Flutter**

```dart
let boundingBox = CoordinateBounds(
southwest: Point( coordinates: Position(42.73834, -73.45338)),
northeast: Point( coordinates: Position(45.02491,  -71.48691)),
infiniteBounds: false
)

// Center the camera on the bounding box
let camera = mapboxMap.cameraForCoordinateBounds(boundingBox);
mapboxMap.setCamera(camera);
```

> **Note**
> 
> A bounding box's edges are not explicitly parallel on all map [projections](https://docs.mapbox.com/mapbox-gl-js/guides/projections/) as they follow longitude & latitude. In this image you can see that the bounding box edges curve to follow longitude/latitude in the [`globe`](https://docs.mapbox.com/mapbox-gl-js/guides/projections/#globe) projection.
> 
> ![](https://docs.mapbox.com/help/assets/ideal-img/bounding-box-globe.54a07d3.480.png)

**Related resources:**

Any Mapbox library that creates maps or initiates geocoding requests has a class or object for using bounding boxes in your code:

-   [Mapbox Geocoding API `bbox` parameter documentation](https://docs.mapbox.com/api/search/geocoding/#forward-geocoding-with-search-text-input)
-   [Mapbox GL JS `LngLatBounds` documentation](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds)
-   [Mapbox Maps SDK for iOS `CoordinateBounds` documentation](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/coordinatebounds/)
-   [Mapbox Maps SDK for Android `CoordinateBounds` class documentation](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps/-coordinate-bounds/)
-   [Mapbox Java SDK `MapboxGeocoding.Builder.bbox()` method documentation](https://docs.mapbox.com/android/java/api/libjava-services/7.0.0/com/mapbox/api/geocoding/v5/MapboxGeocoding.Builder.html#bbox-java.lang.String-)
-   [Mapbox Search SDK for iOS `BoundingBox` documentation](https://docs.mapbox.com/ios/search/api/core/2.9.0-rc.2/Structs/BoundingBox.html)
-   [Turf.js `turf.bbox` documentation](https://turfjs.org/docs/api/bbox)
-   [Location helper - interact with a map and get bounding box values to use in your code.](https://labs.mapbox.com/location-helper)