Camera.md

<MapboxGL.Camera />

Controls the perspective from which the user sees the map.

To use imperative methods, pass in a ref object:

const camera = useRef<Camera>(null);

useEffect(() => {
  camera.current?.setCamera({
    centerCoordinate: [lon, lat],
  });
}, []);

return (
  <Camera ref={camera} />
);

props

Prop	Type	Default	Required	Description
type	literal	none	false	Allows static check of the data type. For internal use only.
centerCoordinate	Position	none	false	The location on which the map should center.
bounds	intersection	none	false	The corners of a box around which the map should bound. Contains padding props for backwards compatibility; the root padding prop should be used instead.
heading	number	none	false	The heading (orientation) of the map.
pitch	number	none	false	The pitch of the map.
zoomLevel	number	none	false	The zoom level of the map.
padding	shape	none	false	The viewport padding in points.
paddingLeft	number	none	true	Left padding in points
paddingRight	number	none	true	Right padding in points
paddingTop	number	none	true	Top padding in points
paddingBottom	number	none	true	Bottom padding in points
animationDuration	number	none	false	The duration the map takes to animate to a new configuration.
animationMode	`| 'flyTo'
| 'easeTo'
| 'linearTo'
| 'moveTo'
| 'none'`	none	false	The easing or path the camera uses to animate to a new configuration.
followUserMode	UserTrackingMode	none	false	The mode used to track the user location on the map.
followUserLocation	boolean	none	false	Whether the map orientation follows the user location.
followZoomLevel	number	none	false	The zoom level used when following the user location.
followPitch	number	none	false	The pitch used when following the user location.
followHeading	number	none	false	The heading used when following the user location.
minZoomLevel	number	none	false	The lowest allowed zoom level.
maxZoomLevel	number	none	false	The highest allowed zoom level.
maxBounds	shape	none	false	The corners of a box defining the limits of where the camera can pan or zoom.
ne	Position	none	true	FIX ME NO DESCRIPTION
sw	Position	none	true	FIX ME NO DESCRIPTION
defaultSettings	shape	none	false	The configuration that the camera falls back on, if no other values are specified.
type	literal	none	false	Allows static check of the data type. For internal use only.
centerCoordinate	Position	none	false	The location on which the map should center.
bounds	intersection	none	false	The corners of a box around which the map should bound. Contains padding props for backwards compatibility; the root padding prop should be used instead.
heading	number	none	false	The heading (orientation) of the map.
pitch	number	none	false	The pitch of the map.
zoomLevel	number	none	false	The zoom level of the map.
padding	signature	none	false	The viewport padding in points.
animationDuration	number	none	false	The duration the map takes to animate to a new configuration.
animationMode	union	none	false	The easing or path the camera uses to animate to a new configuration.
allowUpdates	boolean	none	false	Whether the camera should send any configuration to the native module. Prevents unnecessary tile fetching and improves performance when the map is not visible. Defaults to true.
triggerKey	string | number	none	false	Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target configuration. (Not yet implemented.)
onUserTrackingModeChange	func	none	false	Executes when user tracking mode changes. signature:(event:MapboxGLEvent) => void

methods

setCamera()

Sets any camera properties, with default fallbacks if unspecified.

arguments

Name	Type	Required	Description

camera.current?.setCamera({
  centerCoordinate: [lon, lat],
});

fitBounds()

Set the camera position to enclose the provided bounds, with optional
padding and duration.

arguments

Name	Type	Required	Description

camera.fitBounds([lon, lat], [lon, lat]);
camera.fitBounds([lon, lat], [lon, lat], [20, 0], 1000);

flyTo()

Sets the camera to center around the provided coordinate using a realistic 'travel'
animation, with optional duration.

arguments

Name	Type	Required	Description

camera.flyTo([lon, lat]);
camera.flyTo([lon, lat], 12000);

moveTo()

Sets the camera to center around the provided coordinate, with optional duration.

arguments

Name	Type	Required	Description

camera.moveTo([lon, lat], 200);
camera.moveTo([lon, lat]);

zoomTo()

Zooms the camera to the provided level, with optional duration.

arguments

Name	Type	Required	Description

camera.zoomTo(16);
camera.zoomTo(16, 100);