Add layers and control objects

Add DepotsDisplay layer and DepotsPositionData Input button.

Import layer and control objects from Harmoware-VIS.

app.js

// 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';

Get necessary state from Harmoware-VIS props.

app.js

// 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;

Added Harmoware-VIS control object to JSX.

app.js

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

Added Harmoware-VIS layer object to JSX.

app.js

// 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 }),
  ]}
/>

Creation of depot position data (json).

depots-data.json

[{"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"}]