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

iOS

Android

Flutter

iOS

Android

Flutter

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)

iOS

Android

Flutter

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)

iOS

Android

Flutter

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 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:

• Mapbox Geocoding API bbox parameter documentation
• Mapbox GL JS LngLatBounds documentation
• Mapbox Maps SDK for iOS CoordinateBounds documentation
• Mapbox Maps SDK for Android CoordinateBounds class documentation
• Mapbox Java SDK MapboxGeocoding.Builder.bbox() method documentation
• Mapbox Search SDK for iOS BoundingBox documentation
• Turf.js turf.bbox documentation
• Location helper - interact with a map and get bounding box values to use in your code.

Was this page helpful?