Camera

import { Camera } from '@rnmapbox/maps';

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

type

literal

Allows static check of the data type. For internal use only.

centerCoordinate

Position

The location on which the map should center.

bounds

intersection

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

The heading (orientation) of the map.

pitch

number

The pitch of the map.

zoomLevel

number

The zoom level of the map.

padding

type Padding = {
  paddingLeft: number; /* Left padding in points */
  paddingRight: number; /* Right padding in points */
  paddingTop: number; /* Top padding in points */
  paddingBottom: number; /* Bottom padding in points */
}

The viewport padding in points.

animationDuration

number

The duration the map takes to animate to a new configuration.

animationMode

| 'flyTo'
| 'easeTo'
| 'linearTo'
| 'moveTo'
| 'none'

The easing or path the camera uses to animate to a new configuration.

Camera Animation

followUserLocation

boolean

Whether the map orientation follows the user location.

followUserMode

UserTrackingMode

The mode used to track the user location on the map.

followZoomLevel

number

The zoom level used when following the user location.

Show Map

followPitch

number

The pitch used when following the user location.

followHeading

number

The heading used when following the user location.

followPadding

Partial

The padding used to position the user location when following.

minZoomLevel

number

The lowest allowed zoom level.

maxZoomLevel

number

The highest allowed zoom level.

maxBounds

type MaxBounds = {
  ne: Position; /* FIX ME NO DESCRIPTION */
  sw: Position; /* FIX ME NO DESCRIPTION */
}

The corners of a box defining the limits of where the camera can pan or zoom.

defaultSettings

type DefaultSettings = {
  type: literal; /* Allows static check of the data type. For internal use only. */
  centerCoordinate: Position; /* The location on which the map should center. */
  bounds: intersection; /* 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; /* The heading (orientation) of the map. */
  pitch: number; /* The pitch of the map. */
  zoomLevel: number; /* The zoom level of the map. */
  padding: signature; /* The viewport padding in points. */
  animationDuration: number; /* The duration the map takes to animate to a new configuration. */
  animationMode: union; /* The easing or path the camera uses to animate to a new configuration. */
}

The configuration that the camera falls back on, if no other values are specified.

allowUpdates

boolean

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

Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target configuration. (Not yet implemented.)

onUserTrackingModeChange

func

Executes when user tracking mode changes. DEPRECATED use Viewport#onStatusChanged instead. 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);

Fit