# `` ## 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` | `none` | `false` | The duration the map takes to animate to a new configuration. | | animationMode | `"flyTo" \| "easeTo" \| "linearTo" \| "moveTo"` | `none` | `false` | The easing or path the camera uses to animate to a new configuration. | | defaultSettings | `CameraStop` | `none` | `false` | Default view settings applied on camera | | minZoomLevel | `number` | `none` | `false` | Minimum zoom level of the map | | maxZoomLevel | `number` | `none` | `false` | Maximum 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 `UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js) | | 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` | | onUserTrackingModeChange | `func` | `none` | `false` | Triggered when `followUserLocation` or `followUserMode` changes
*signature:*`(event:VietmapGLEvent) => void` | | debugCameraTransitions | `boolean` | `none` | `false` | (Dev only) Enable verbose console logging (render count, imperative calls, prop-driven native stop diffs) to distinguish re-render vs imperative camera moves. | ## Methods ### `fitBounds(ne, sw, [padding], [animationDuration])` Map camera transitions to fit provided bounds #### Arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | | `ne` | `GeoJSON.Position` | `Yes` | North east coordinate of bound | | `sw` | `GeoJSON.Position` | `Yes` | South west coordinate of bound | | `padding` | `number \| number[]` | `No` | Padding for the bounds | | `animationDuration` | `number` | `No` | Duration of camera animation | ```javascript cameraRef.current?.fitBounds([lng, lat], [lng, lat]) cameraRef.current?.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides cameraRef.current?.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000) cameraRef.current?.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 to | | `animationDuration` | `number` | `No` | Duration of camera animation | ```javascript cameraRef.current?.flyTo([lng, lat]) cameraRef.current?.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 | ```javascript cameraRef.current?.moveTo([lng, lat], 200) // eases camera to new location based on duration cameraRef.current?.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 | ```javascript cameraRef.current?.zoomTo(16) cameraRef.current?.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 | ```javascript cameraRef.current?.setCamera({ centerCoordinate: [lng, lat], zoomLevel: 16, animationDuration: 2000, }) cameraRef.current?.setCamera({ stops: [ { pitch: 45, animationDuration: 200 }, { heading: 180, animationDuration: 300 }, ] }) ```