mappls-map-react-native/docs/Camera.md

A Mappls GL react native module for creating custom maps

<!-- This file was autogenerated from Camera.js do not modify -->
## <MapplsGL.Camera />
### 

### props
| 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 animationstyle when the camara updates. One of: `flyTo`, `easeTo`, `linearTo`, `moveTo` |
| defaultSettings | `shape` | `none` | `false` | Default view settings applied on camera |
| &nbsp;&nbsp;centerCoordinate | `array` | `none` | `false` | Center coordinate on map [lng, lat] |
| &nbsp;&nbsp;padding | `shape` | `none` | `false` | Padding around edges of map in points |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingBottom | `number` | `none` | `false` | Bottom padding in points |
| &nbsp;&nbsp;heading | `number` | `none` | `false` | Heading on map |
| &nbsp;&nbsp;pitch | `number` | `none` | `false` | Pitch on map |
| &nbsp;&nbsp;bounds | `shape` | `none` | `false` | Represents a rectangle in geographical coordinates marking the visible area of the map.<br/>The `bounds.padding*` properties are deprecated; use root `padding` property instead. |
| &nbsp;&nbsp;&nbsp;&nbsp;ne | `array` | `none` | `true` | North east coordinate of bound |
| &nbsp;&nbsp;&nbsp;&nbsp;sw | `array` | `none` | `true` | South west coordinate of bound |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points (deprecated; use root `padding` property instead) |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points (deprecated; use root `padding` property instead) |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points (deprecated; use root `padding` property instead) |
| &nbsp;&nbsp;&nbsp;&nbsp;paddingBottom | `number` | `none` | `false` | Bottom padding in points (deprecated; use root `padding` property instead) |
| &nbsp;&nbsp;onUserTrackingModeChange | `func` | `none` | `false` | Callback that is triggered on user tracking mode changes |
| &nbsp;&nbsp;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 |
| &nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points |
| &nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points |
| &nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points |
| &nbsp;&nbsp;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.<br/>The `bounds.padding*` properties are deprecated; use root `padding` property instead. |
| &nbsp;&nbsp;ne | `array` | `none` | `true` | North east coordinate of bound |
| &nbsp;&nbsp;sw | `array` | `none` | `true` | South west coordinate of bound |
| &nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points (deprecated; use root `padding` property instead) |
| &nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points (deprecated; use root `padding` property instead) |
| &nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points (deprecated; use root `padding` property instead) |
| &nbsp;&nbsp;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 |
| &nbsp;&nbsp;ne | `array` | `none` | `true` | northEastCoordinates - North east coordinate of bound |
| &nbsp;&nbsp;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 `MapplsGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/SetUserTrackingModes.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` |
| 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 |



```javascript
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 |



```javascript
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 |



```javascript
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 |



```javascript
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 |



```javascript
this.camera.setCamera({
  centerCoordinate: [lng, lat],
  zoomLevel: 16,
  animationDuration: 2000,
})

this.camera.setCamera({
  stops: [
    { pitch: 45, animationDuration: 200 },
    { heading: 180, animationDuration: 300 },
  ]
})
```