Camera

¶

Props¶

Prop	Type	Default	Required	Description
centerCoordinate	`GeoJSON.Position`	`none`	`false`	The location on which the map should center. Input with [lng, lat] format.
bounds	`CameraBoundsWithPadding`	`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	`CameraPadding`	`none`	`false`	The viewport padding in points.
animationDuration	`number`	`2000`	`false`	The duration the map takes to animate to a new configuration.
animationMode	`'flyTo' \| 'easeTo' \| 'linearTo' \| 'moveTo'`	`'easeTo'`	`false`	The easing or path the camera uses to animate to a new configuration.
allowUpdates	`boolean`	`true`	`false`	If false, the camera will not send any props to the native module. Intended to be used to prevent unnecessary tile fetching and improve performance when the map is not visible. Defaults to true.
defaultSettings	`CameraStop`	`none`	`false`	Default view settings applied on camera
minZoomLevel	`number`	`none`	`false`	The minimun zoom level of the map
maxZoomLevel	`number`	`none`	`false`	The maximun zoom level of the map
maxBounds	`CameraBounds`	`none`	`false`	Restrict map panning so that the center is within these bounds
followUserLocation	`boolean`	`none`	`false`	Should the map orientation follow the user's.
followUserMode	`UserTrackingMode`	`none`	`false`	The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `VietmapGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. Example
followZoomLevel	`number`	`none`	`false`	The zoomLevel on map while followUserLocation is set to `true`
followPitch	`number`	`none`	`false`	The pitch on map while followUserLocation is set to `true`
followHeading	`number`	`none`	`false`	The heading on map while followUserLocation is set to `true`
triggerKey	`string \| number`	`none`	`false`	Manually update the camera - helpful for when props did not update, however you still want the camera to move
onUserTrackingModeChange	`func`	`none`	`false`	signature:`(event:VietmapGLEvent) => void`

Methods¶

FitBounds¶

  fitBounds(northEastCoordinates, southWestCoordinates, [padding], [animationDuration])

Map camera transitions to fit provided bounds

Arguments¶

Name	Type	Required	Description
`northEastCoordinates`	`Array`	`Yes`	North east coordinate of bound
`southWestCoordinates`	`Array`	`Yes`	South west coordinate of bound
`padding`	`Number`	`No`	Camera padding for bound
`animationDuration`	`Number`	`No`	Duration of camera animation

this.camera.fitBounds([lng, lat], [lng, lat])
this.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
this.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)

FlyTo¶

  flyTo(coordinates[, animationDuration])

Map camera will fly to new coordinate

Arguments¶

Name	Type	Required	Description
`coordinates`	`GeoJSON.Position`	`Yes`	Coordinates that map camera will jump too
`animationDuration`	`Number`	`No`	Duration of camera animation

this.camera.flyTo([lng, lat])
this.camera.flyTo([lng, lat], 12000)

MoveTo¶

  moveTo(coordinates[, animationDuration])

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

Arguments¶

Name	Type	Required	Description
`coordinates`	`GeoJSON.Position`	`Yes`	Coordinates that map camera will move too
`animationDuration`	`Number`	`No`	Duration of camera animation

this.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
this.camera.moveTo([lng, lat]) // snaps camera to new location without any easing

ZoomTo¶

  zoomTo(zoomLevel[, animationDuration])

Map camera will zoom to specified level

Arguments¶

Name	Type	Required	Description
`zoomLevel`	`number`	`Yes`	Zoom level that the map camera will animate too
`animationDuration`	`Number`	`No`	Duration of camera animation

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

Set Camera¶

  setCamera([config])

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

Arguments¶

Name	Type	Required	Description
`config`	`Object`	`No`	Camera configuration

this.camera.setCamera({
  centerCoordinate: [lng, lat],
  zoomLevel: 16,
  animationDuration: 2000,
})

this.camera.setCamera({
  stops: [
    { pitch: 45, animationDuration: 200 },
    { heading: 180, animationDuration: 300 },
  ]
})