> For the complete documentation index, see [llms.txt](https://harmoware-develop-tutorial.gitbook.io/tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://harmoware-develop-tutorial.gitbook.io/tutorial/added-harmoware-vis-control/add-layers-and-control-objects.md).

# Add layers and control objects

Add DepotsDisplay layer and DepotsPositionData Input button.

Import layer and control objects from Harmoware-VIS.

{% code title="app.js" %}

```javascript
// before
import {
  Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput,
  PlayButton, PauseButton, ForwardButton, ReverseButton
} from 'harmoware-vis';

// after
import {
  Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput,
  PlayButton, PauseButton, ForwardButton, ReverseButton, DepotsLayer, DepotsInput
} from 'harmoware-vis';
```

{% endcode %}

Get necessary state from Harmoware-VIS props.

{% code title="app.js" %}

```javascript
// before
const { actions, clickedObject, inputFileName, viewport,
  routePaths, movesbase, movedData,
  animatePause, animateReverse } = this.props;
const { movesFileName } = inputFileName;

// after
const { actions, clickedObject, inputFileName, viewport,
  routePaths, movesbase, movedData, depotsData,
  animatePause, animateReverse } = this.props;
const { movesFileName, depotsFileName } = inputFileName;
```

{% endcode %}

Added Harmoware-VIS control object to JSX.

{% code title="app.js" %}

```jsx
<li className="flex_row">
  <div className="harmovis_input_button_column">
    <label htmlFor="DepotsInput">
      Depot position data<DepotsInput actions={actions} id="DepotsInput" />
    </label>
    <div>{depotsFileName}</div>
  </div>
</li>
```

{% endcode %}

Added Harmoware-VIS layer object to JSX.

{% code title="app.js" %}

```jsx
// before
<HarmoVisLayers
  viewport={viewport} actions={actions}
  mapboxApiAccessToken={MAPBOX_TOKEN}
  layers={[
    new MovesLayer({ routePaths, movesbase, movedData,
      clickedObject, actions, optionVisible }),
  ]}
/>

// after
<HarmoVisLayers
  viewport={viewport} actions={actions}
  mapboxApiAccessToken={MAPBOX_TOKEN}
  layers={[
    new MovesLayer({ routePaths, movesbase, movedData,
      clickedObject, actions, optionVisible }),
    new DepotsLayer({ depotsData, actions, optionVisible }),
  ]}
/>
```

{% endcode %}

![](/files/-L_LWcUpIlAOvmxiyfeZ)

Creation of depot position data (json).

{% code title="depots-data.json" %}

```javascript
[{"position":[136.936864,35.191591,0],"name":"Ozone"},
{"position":[136.929784,35.195934,0],"name":"Heian-dori"},
{"position":[136.921210,35.196281,0],"name":"Shiga-hondori"},
{"position":[136.910178,35.197183,0],"name":"Kurokawa"},
{"position":[136.904748,35.190528,0],"name":"Meijo Koen"},
{"position":[136.905379,35.181560,0],"name":"City Hall"},
{"position":[136.908156,35.173784,0],"name":"Hisaya-odori"},
{"position":[136.908031,35.169990,0],"name":"Sakae"},
{"position":[136.908898,35.163724,0],"name":"Yaba-cho"},
{"position":[136.906907,35.157963,0],"name":"Kamimaezu"},
{"position":[136.904771,35.150276,0],"name":"Higashi Betsuin"},
{"position":[136.900947,35.143257,0],"name":"Kanayama"},
{"position":[136.901769,35.134622,0],"name":"Nishi Takakura"},
{"position":[136.906622,35.127823,0],"name":"Jingu NIshi"},
{"position":[136.910380,35.120735,0],"name":"Tenma-cho"},
{"position":[136.919835,35.120141,0],"name":"Horita"},
{"position":[136.929545,35.117125,0],"name":"Myoon-dori"},
{"position":[136.937741,35.117728,0],"name":"Aratama-bashi"},
{"position":[136.948824,35.123331,0],"name":"Mizuho Undojo Higashi"},
{"position":[136.954523,35.130536,0],"name":"Sogo Rihabiri Center"},
{"position":[136.964036,35.136946,0],"name":"Yagoto"},
{"position":[136.965008,35.144556,0],"name":"Yagoto Nisseki"},
{"position":[136.966754,35.154519,0],"name":"Nagoya Daigaku"},
{"position":[136.963441,35.163923,0],"name":"Motoyama"},
{"position":[136.966701,35.175522,0],"name":"Jiyugaoka"},
{"position":[136.962254,35.184612,0],"name":"Chayagasaka"},
{"position":[136.954268,35.188806,0],"name":"Sunada-bashi"},
{"position":[136.945255,35.190691,0],"name":"Nagoya Dome-mae Yada"}]
```

{% endcode %}