# 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 %}

![](https://2247361432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_GRHvORH_hAPpwl_SU%2F-L_LTps8xfph0DBg9_DO%2F-L_LWcUpIlAOvmxiyfeZ%2Fcapture3.jpg?alt=media\&token=1f638382-6f4d-4c4c-8257-db6dcc532741)

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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://harmoware-develop-tutorial.gitbook.io/tutorial/added-harmoware-vis-control/add-layers-and-control-objects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.