Skip to main content

bounding box

Additional Developer Resources

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) 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 tool.

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 snippet creates a bounding box using the LngLatBounds method and then calls fitBounds to move the map's camera, ensuring that the bounding box is fully in view.

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);
EXAMPLE
Fit map to a bounding box

This GL JS example shows you how to use fitBounds to zoom & pan to a bounding box.
EXAMPLE
Initialize a map with a 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, Android & Flutter 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.

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)
Note

A bounding box's edges are not explicitly parallel on all map 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 projection.

Related resources:

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

Additional Developer Resources
Was this page helpful?