Skip to content

Latest commit

 

History

History
133 lines (94 loc) · 5.64 KB

Camera.md

File metadata and controls

133 lines (94 loc) · 5.64 KB
Raw

<MapLibreGL.Camera />

props

Prop Type Default Required Description
centerCoordinate GeoJSON.Position none false The location on which the map should center.
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 MapLibreGL.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 FIX ME NO DESCRIPTION
signature:(event:MaplibreGLEvent) => void

methods

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

Map camera transitions to fit provided bounds

arguments
Name Type Required Description
northEastCoordinates GeoJSON.Position Yes North east coordinate of bound
southWestCoordinates GeoJSON.Position Yes South west coordinate of bound
padding Number | Array No Padding for the bounds
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 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(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(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 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 },
  ]
})