Skip to content

Latest commit

 

History

History
161 lines (122 loc) · 8.28 KB

Camera.md

File metadata and controls

161 lines (122 loc) · 8.28 KB

<MapboxGL.Camera />

props

Prop Type Default Required Description
animationDuration number 2000 false The duration a camera update takes (in ms)
animationMode enum 'easeTo' false The animationstyle when the camara updates. One of: flyTo, easeTo, linearTo, moveTo
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 minimun zoom level of the map
maxZoomLevel number none false The maximun 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

methods

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(coordinates[, animationDuration])

Map camera will fly to new coordinate

arguments
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)

moveTo(coordinates[, animationDuration])

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

arguments
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

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)

setCamera(config)

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

arguments
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 },
  ]
})