> For the complete documentation index, see [llms.txt](https://harmoware-vis.gitbook.io/harmoware-vis-documents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://harmoware-vis.gitbook.io/harmoware-vis-documents/api/harmovislayers.md).

# HarmoVisLayers

  Display the layer that inherits the [Layer](https://github.com/uber/deck.gl/blob/master/docs/api-reference/layer.md) class of [deck.gl](https://github.com/uber/deck.gl) on the map obtained from mapbox.

#### Examples

```javascript
<HarmoVisLayers
  viewport={this.props.viewport} actions={this.props.actions}
  mapboxApiAccessToken={MAPBOX_TOKEN}
  layers={ [ ... ] }
  mapGlComponents={ this.getComponentsDom(this.props.movedData) } // Example
/>
```

#### Properties

| Properties           | PropTypes                                                          | Default                                                                                                             | Description                                                                                      |
| -------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| visible              | Boolean option                                                     | true                                                                                                                | Whether the map is visible.                                                                      |
| actions              | object required                                                    | --                                                                                                                  | state `actions`                                                                                  |
| viewport             | object required                                                    | --                                                                                                                  | state `viewport`                                                                                 |
| mapboxApiAccessToken | string required                                                    | --                                                                                                                  | The access token of mapbox.com                                                                   |
| mapStyle             | string option                                                      | 'mapbox://styles/mapbox/dark-v8'                                                                                    | A map style URL of mapbox.com                                                                    |
| layers               | array required                                                     | --                                                                                                                  | Array of Layer instance (※)                                                                      |
| onViewportChange     | func option                                                        | this.props.actions.setViewport                                                                                      | Actions `setViewport`                                                                            |
| mapGlComponents      | any                                                                | null                                                                                                                | "react-map-gl" control DOM                                                                       |
| mapboxAddLayerValue  | mapboxgl.Layer\[] option                                           | Display buildings in 3D Value                                                                                       | [Display buildings in 3D](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/)            |
| mapboxAddSourceValue | object {id:string, source:object}\[] option                        | --                                                                                                                  | Check the [reference](https://docs.mapbox.com/mapbox-gl-js/api/) for details.                    |
| terrain              | Boolean option                                                     | false                                                                                                               | Show terrain.                                                                                    |
| terrainSource        | <p>object { id:string,</p><p>source:object} option</p>             | <p>{ id:'mapbox-dem',<br>source:{ 'type': 'raster-dem',</p><p>'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',}}</p> | Check the [reference](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addsource) for details.  |
| setTerrain           | <p>object { source:string,</p><p>exaggeration?:number}  option</p> | {source:'mapbox-dem'}                                                                                               | Check the [reference](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setterrain) for details. |

&#x20;※ The `HarmoVisLayers` is a component that render the layers that inherits the [Layer](https://github.com/uber/deck.gl/blob/master/docs/api-reference/layer.md) class of [deck.gl](https://github.com/uber/deck.gl).