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);
This GL JS example shows you how to use fitBounds to zoom & pan to 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)
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)
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);
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
bboxparameter documentation - Mapbox GL JS
LngLatBoundsdocumentation - Mapbox Maps SDK for iOS
CoordinateBoundsdocumentation - Mapbox Maps SDK for Android
CoordinateBoundsclass documentation - Mapbox Java SDK
MapboxGeocoding.Builder.bbox()method documentation - Mapbox Search SDK for iOS
BoundingBoxdocumentation - Turf.js
turf.bboxdocumentation - Location helper - interact with a map and get bounding box values to use in your code.