Skip to main content

Camera

Controls the viewport of the Map.

Props​

testID​

Type: string

Required: No

zoom​

The zoom level of the map.

Type: number

Required: No

bearing​

The bearing (rotation) of the map.

Type: number

Required: No

pitch​

The pitch of the map.

Type: number

Required: No

padding​

The viewport padding in points.

Type: ViewPadding

Required: No

duration​

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

Type: number

Required: No

easing​

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

Type: CameraEasing

Required: No

initialViewState​

Default view settings applied on camera

Type: InitialViewState

Required: No

minZoom​

Minimum zoom level of the map

Type: number

Required: No

maxZoom​

Maximum zoom level of the map

Type: number

Required: No

maxBounds​

Restrict map panning so that the center is within these bounds

Type: LngLatBounds

Required: No

trackUserLocation​

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

  • undefined: The user's location is not tracked
  • "default": Centers the user's location
  • "heading": Centers the user's location and uses the compass for bearing
  • "course": Centers the user's location and uses the direction of travel for bearing

Type: TrackUserLocation

Required: No

Default: undefined

onTrackUserLocationChange​

Triggered when trackUserLocation changes

Type:

(
      event: NativeSyntheticEvent<TrackUserLocationChangeEvent>,
    ) => void

Required: No

ref​

Ref to access Camera methods.

Type: Ref<CameraRef>

Required: No

Ref Methods​

jumpTo(options)​

Map camera will move to new coordinates at the same zoom level

options​

Type: CameraCenterOptions & CameraOptions

Required: Yes

Jump to a position

cameraRef.current?.jumpTo({ center: [lng, lat] });

easeTo(options)​

Map camera will move to new coordinates at the same zoom level

options​

Type: CameraCenterOptions & CameraOptions & CameraAnimationOptions

Required: Yes

Eases camera to new location based on duration

cameraRef.current?.easeTo({ center: [lng, lat], duration: 200 });

flyTo(options)​

Map camera will fly to new coordinate

options​

Type: CameraCenterOptions & CameraOptions & CameraAnimationOptions

Required: Yes

cameraRef.current?.flyTo({ center: [lng, lat], duration: 12000 });

fitBounds(bounds, [options])​

Map camera transitions to fit provided bounds

bounds​

Type: LngLatBounds

Required: Yes

options​

Type: CameraOptions & CameraAnimationOptions

Required: No

cameraRef.current?.fitBounds(
  [west, south, east, north],
  { top: 20, right: 20, bottom: 20, left: 20 },
  1000,
);

zoomTo(zoom, [options])​

Map camera will zoom to specified level

zoom​

Zoom level that the map camera will animate too

Type: number

Required: Yes

options​

Options

Type: CameraOptions & CameraAnimationOptions

Required: No

cameraRef.current?.zoomTo(16, { duration: 100 });

setStop(stop)​

Map camera will perform updates based on provided config. Advanced use only!

stop​

Array of Camera stops

Type: CameraStop

Required: Yes

Returns: Promise<void>

cameraRef.current?.setStop({
  centerCoordinate: [lng, lat],
  zoomLevel: 16,
  duration: 2000,
});
cameraRef.current?.setStop({
  stops: [
    { pitch: 45, duration: 200 },
    { heading: 180, duration: 300 },
  ],
});

Types​

CameraOptions​

Camera viewport configuration: zoom, bearing, pitch, and padding.

interface CameraOptions {
  zoom?: number;
  bearing?: number;
  pitch?: number;
  padding?: ViewPadding;
}

CameraEasing​

Easing function used for camera animations.

type CameraEasing = undefined | "linear" | "ease" | "fly";

CameraAnimationOptions​

Animation timing options for camera transitions.

interface CameraAnimationOptions {
  duration?: number;
  easing?: CameraEasing;
}

CameraCenterOptions​

Camera center coordinate options.

interface CameraCenterOptions {
  center: LngLat;
}

CameraBoundsOptions​

Camera bounds options.

interface CameraBoundsOptions {
  bounds: LngLatBounds;
}

CameraCenterStop​

Camera animation stop positioned by a center coordinate.

type CameraCenterStop = CameraOptions &
  CameraAnimationOptions &
  CameraCenterOptions;

CameraBoundsStop​

Camera animation stop positioned by geographic bounds.

type CameraBoundsStop = CameraOptions &
  CameraAnimationOptions &
  CameraBoundsOptions;

CameraStop​

A single camera animation stop — optionally positioned by center, bounds, or neither.

type CameraStop =
  | (CameraOptions &
      CameraAnimationOptions & {
        center?: never;
        bounds?: never;
      })
  | CameraCenterStop
  | CameraBoundsStop;

InitialViewState​

Initial camera state when the map first loads.

type InitialViewState =
  | (CameraOptions & {
      center?: never;
      bounds?: never;
    })
  | (CameraOptions & CameraCenterOptions)
  | (CameraOptions & CameraBoundsOptions);

TrackUserLocation​

User location tracking mode.

type TrackUserLocation = "default" | "heading" | "course";

TrackUserLocationChangeEvent​

Event emitted when the user location tracking mode changes.

type TrackUserLocationChangeEvent = {
  trackUserLocation: TrackUserLocation | null;
};