Skip to content

Latest commit

 

History

History
152 lines (113 loc) · 7 KB

Camera.md

File metadata and controls

152 lines (113 loc) · 7 KB
Raw

<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, moveTo
defaultSettings shape none false Default view settings applied on camera
  centerCoordinate array none false Center coordinate on map [lng, lat]
  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.
    ne array none true North east coordinate of bound
    sw array none true South west coordinate of bound
    paddingLeft number none false Left camera padding for bounds
    paddingRight number none false Right camera padding for bounds
    paddingTop number none false Top camera padding for bounds
    paddingBottom number none false Bottom camera padding for bounds
    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]
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.
  ne array none true North east coordinate of bound
  sw array none true South west coordinate of bound
  paddingLeft number none false Left camera padding for bounds
  paddingRight number none false Right camera padding for bounds
  paddingTop number none false Top camera padding for bounds
  paddingBottom number none false Bottom camera padding for bounds
  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
onUserTrackingModeChange func none false FIX ME NO DESCRIPTION

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