Camera.md

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

number[] | [number, number]

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

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

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.

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

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

defaultSettings

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