Prop | Type | Default | Required | Description |
---|---|---|---|---|
allowUpdates | bool |
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. |
animationDuration | number |
2000 |
false |
The duration a camera update takes (in ms) |
animationMode | enum |
'easeTo' |
false |
The animation style when the camara updates. One of:flyTo : A complex flight animation, affecting both position and zoom.easeTo : A standard damped curve.linearTo : An even linear transition.none : An instantaneous change (v10 only).moveTo : An instantaneous change (<v10). |
defaultSettings | shape |
none |
false |
Default view settings applied on camera |
centerCoordinate | array |
none |
false |
Center coordinate on map [lng, lat] |
padding | shape |
none |
false |
Padding around edges of map in points |
paddingLeft | number |
none |
false |
Left padding in points |
paddingRight | number |
none |
false |
Right padding in points |
paddingTop | number |
none |
false |
Top padding in points |
paddingBottom | number |
none |
false |
Bottom padding in points |
heading | number |
none |
false |
Heading on map |
pitch | number |
none |
false |
Pitch on map |
bounds | shape |
none |
false |
Represents a rectangle in geographical coordinates marking the visible area of the map. The bounds.padding* properties are deprecated; use root padding property instead. |
ne | array |
none |
true |
North east coordinate of bound |
sw | array |
none |
true |
South west coordinate of bound |
paddingLeft | number |
none |
false |
Left padding in points (deprecated; use root padding property instead) |
paddingRight | number |
none |
false |
Right padding in points (deprecated; use root padding property instead) |
paddingTop | number |
none |
false |
Top padding in points (deprecated; use root padding property instead) |
paddingBottom | number |
none |
false |
Bottom padding in points (deprecated; use root padding property instead) |
onUserTrackingModeChange | func |
none |
false |
Callback that is triggered on user tracking mode changes |
zoomLevel | number |
none |
false |
Zoom level of the map |
centerCoordinate | array |
none |
false |
Center coordinate on map [lng, lat] |
padding | shape |
none |
false |
Padding around edges of map in points |
paddingLeft | number |
none |
false |
Left padding in points |
paddingRight | number |
none |
false |
Right padding in points |
paddingTop | number |
none |
false |
Top padding in points |
paddingBottom | number |
none |
false |
Bottom padding in points |
heading | number |
none |
false |
Heading on map |
pitch | number |
none |
false |
Pitch on map |
bounds | shape |
none |
false |
Represents a rectangle in geographical coordinates marking the visible area of the map. The bounds.padding* properties are deprecated; use root padding property instead. |
ne | array |
none |
true |
North east coordinate of bound |
sw | array |
none |
true |
South west coordinate of bound |
paddingLeft | number |
none |
false |
Left padding in points (deprecated; use root padding property instead) |
paddingRight | number |
none |
false |
Right padding in points (deprecated; use root padding property instead) |
paddingTop | number |
none |
false |
Top padding in points (deprecated; use root padding property instead) |
paddingBottom | number |
none |
false |
Bottom padding in points (deprecated; use root padding property instead) |
onUserTrackingModeChange | func |
none |
false |
Callback that is triggered on user tracking mode changes |
zoomLevel | number |
none |
false |
Zoom level of the map |
minZoomLevel | number |
none |
false |
The minimum zoom level of the map |
maxZoomLevel | number |
none |
false |
The maximum zoom level of the map |
maxBounds | shape |
none |
false |
Restrict map panning so that the center is within these bounds |
ne | array |
none |
true |
northEastCoordinates - North east coordinate of bound |
sw | array |
none |
true |
southWestCoordinates - South west coordinate of bound |
followUserLocation | bool |
none |
false |
Should the map orientation follow the user's. |
followUserMode | enum |
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 MapboxGL.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 | any |
none |
false |
Manually update the camera - helpful for when props did not update, however you still want the camera to move |
Map camera transitions to fit provided bounds
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)
Map camera will fly to new coordinate
Name | Type | Required | Description |
---|---|---|---|
coordinates |
Array |
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)
Map camera will move to new coordinate at the same zoom level
Name | Type | Required | Description |
---|---|---|---|
coordinates |
Array |
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
Map camera will zoom to specified level
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)
Map camera will perform updates based on provided config. Advanced use only!
Name | Type | Required | Description |
---|---|---|---|
config |
Object |
Yes |
Camera configuration |
this.camera.setCamera({
centerCoordinate: [lng, lat],
zoomLevel: 16,
animationDuration: 2000,
})
this.camera.setCamera({
stops: [
{ pitch: 45, animationDuration: 200 },
{ heading: 180, animationDuration: 300 },
]
})