# DepotsLayer

The DepotsLayer will render depots or stations on a map.\
Layer for HarmoVisLayers.

#### Examples

```javascript
<HarmoVisLayers ...
  layers={[
    new DepotsLayer( { depotsData: this.props.depotsData } )
  ]}
/>
```

#### Properties

Inherits from Base Layer properties.

| Properties            | PropTypes       | Default                                             | Description                                                                                                                                                                                                                                                         |
| --------------------- | --------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| depotsData            | Array required  | --                                                  | state `depotsData`                                                                                                                                                                                                                                                  |
| iconlayer             | String option   | undefined                                           | <p>'Scatterplot' or 'SimpleMesh'</p><p>※ Invalid if there is iconDesignations definition</p>                                                                                                                                                                        |
| iconChange            | Boolean option  | true                                                | <p>true : 3D Icon<br>false : Circle Icon</p><p>※ Invalid if there is iconDesignations definition</p>                                                                                                                                                                |
| iconDesignations      | Array option    | --                                                  | <p>Icon layer multiple specification information.</p><p>※ interface : IconDesignation</p>                                                                                                                                                                           |
| layerRadiusScale      |  Number option  | 1                                                   | Icon size scale                                                                                                                                                                                                                                                     |
| layerOpacity          | Number option   | 0.5                                                 | Icon opacity                                                                                                                                                                                                                                                        |
| getColor              | Function option | x => x.color \|\| DARKMAGENTA                       | Icon color specification accessor                                                                                                                                                                                                                                   |
| getRadius             | Function option | x => x.radius \|\| 30                               | Icon radius specification accessor                                                                                                                                                                                                                                  |
| optionVisible         | Boolean option  |  true                                               | Option information display availability                                                                                                                                                                                                                             |
| optionChange          | Boolean option  | false                                               | option Display pattern switching                                                                                                                                                                                                                                    |
| optionOpacity         | Number option   | 0.25                                                | option Information opacity                                                                                                                                                                                                                                          |
| optionCellSize        | Number option   | 20                                                  | option information cell size                                                                                                                                                                                                                                        |
| optionElevationScale  | Number option   | 1                                                   | option information elevation scale                                                                                                                                                                                                                                  |
| optionCentering       | Boolean option  | false                                               | option information centering                                                                                                                                                                                                                                        |
| optionDisplayPosition | Number option   | 30                                                  | <p>option information position</p><p>for 'SimpleMesh' layer</p>                                                                                                                                                                                                     |
| getCubeColor          | Function option | x => x.optColor \|\| \[x.color] \|\| \[DARKMAGENTA] | option information color specification accessor                                                                                                                                                                                                                     |
| getCubeElevation      | Function option | x => x.optElevation \|\| \[0]                       | option information elevation specification accessor                                                                                                                                                                                                                 |
| mesh                  | any option      | new IcoSphereGeometry()                             | The geometry to render for each data object.                                                                                                                                                                                                                        |
| meshSizeScale         | Number option   | 40                                                  | <p>Valid when <code>iconChange</code>is true.</p><p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/simple-mesh-layer.md">Multiplier to scale each geometry by.</a></p>                                                                       |
| getOrientation        | Function option | \[0,0,0]                                            | <p>Valid when <code>iconChange</code>is true.</p><p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/simple-mesh-layer.md">Object orientation defined as a vec3 of Euler angles, <code>[pitch, yaw, roll]</code> in degrees.</a></p>           |
| getScale              | Function option | \[1,1,1]                                            | <p>Valid when <code>iconChange</code>is true.</p><p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/simple-mesh-layer.md">Scaling factor on the mesh along each axis.</a></p>                                                                 |
| getTranslation        | Function option | \[0,0,0]                                            | <p>Valid when <code>iconChange</code>is true.</p><p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/simple-mesh-layer.md">Translation of the mesh along each axis. Offset from the center position given by <code>getPosition</code>.</a></p> |

#### The JSON format of the depots data file

```javascript
// Specified in `position` or `longitude-latitude` format
[
  { "position": [999.9999, 999.9999, 999.9999], // depots position (long,Lati,height)
  },・・・・・・
]

[
  { "longitude": 999.9999, // depots position (longitude)
    "latitude": 99.9999, // depots position (latitude)
  },・・・・・・
]
```

#### Reserved key name of simulation data file

```
type,position,longitude,latitude
```

#### Option Display Sample

<div align="left"><img src="https://4102328192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWxk9k4ZoHtWQJdRi1G%2F-LXr9iXzFGIPeMrKi8So%2F-LXr9n7r-E86DIAu1JFK%2FDepotsLayerOption.bmp?alt=media&#x26;token=25ed5cd7-e67c-4129-897c-059f156f9059" alt="Left &#x22;optionChange = false&#x22; , Right &#x22;optionChange = true&#x22;"></div>

#### Multiple icon layers.

Add "type" identification to depots data.\
Define information for each type in iconDesignations of Props.

Format of information defined in iconDesignations.\
If not specified, it will be the specified value of DepotsLayer's props.

| Properties     | PropTypes               | Description                                                                    |
| -------------- | ----------------------- | ------------------------------------------------------------------------------ |
| type           | string required         | The type identifier added to the depots data.                                  |
| layer          | string required         | 'Scatterplot' or 'SimpleMesh'                                                  |
| radiusScale    | number option           | Same as DepotsLayer props.                                                     |
| getColor       | Function option         | Same as DepotsLayer props.                                                     |
| getOrientation | Function option         | Same as DepotsLayer props.                                                     |
| getScale       | Function option         | Same as DepotsLayer props.                                                     |
| getTranslation | Function option         | Same as DepotsLayer props.                                                     |
| getRadius      | Function option         | Same as DepotsLayer props.                                                     |
| sizeScale      | number option           | Same as DepotsLayer props.                                                     |
| mesh           | <p>any</p><p>option</p> | <p>layer specification is for SimpleMesh.</p><p>Same as DepotsLayer props.</p> |
