User Application Examples

Examples

// sample using mapbox
import React from 'react';
import {
  Container, connectToHarmowareVis,
  HarmoVisLayers, MovesLayer, DepotsLayer,
  MovesInput, DepotsInput, SimulationDateTime,
  PauseButton, PlayButton, ForwardButton, ReverseButton, AddMinutesButton,
  ElapsedTimeRange, SpeedRange, SpeedValue} from 'harmoware-vis';

const MAPBOX_TOKEN = 'XXXXXXXXXX';

//Access Token acquired from mapbox.com
class App extends Container {
  render() {
    const { settime, timeBegin, timeLength, actions, clickedObject, depotsData,
      secperhour, animatePause, animateReverse, getMoveOptionChecked,
      getDepotOptionChecked, getOptionChangeChecked, viewport, routePaths,
      movesbase, movedData } = this.props;
    const optionVisible = false;

    return (
      <div>
        <div className="harmovis_controller">
          <ul >
            <li><MovesInput actions={actions} /></li>
            <li><DepotsInput actions={actions} /></li>
            <li>{animatePause ?
                <PlayButton actions={actions} /> :
                <PauseButton actions={actions} />}
                {animateReverse ?
                <ForwardButton actions={actions} /> :
                <ReverseButton actions={actions} />}
            </li>
            <li>
            <AddMinutesButton addMinutes={-5} actions={actions} />
            <AddMinutesButton addMinutes={5} actions={actions} />
            </li>
            <li>
            <SimulationDateTime timeBegin={timeBegin} settime={settime} />
            </li>
            <li>
            <ElapsedTimeRange settime={settime} timeLength={timeLength}
                timeBegin={timeBegin} actions={actions} />
            </li>
            <li>
            <SpeedRange secperhour={secperhour} actions={actions} />
            </li>
          </ul>
        </div>
        <div className="harmovis_area">
          <HarmoVisLayers
            viewport={viewport} actions={actions}
            mapboxApiAccessToken={MAPBOX_TOKEN}
            layers={[].concat(
              new MovesLayer({ routePaths, movesbase, movedData,
                       clickedObject, actions, optionVisible }),
              new DepotsLayer({ depotsData, optionVisible }),
            )}
          />
        </div>
      </div>
    );
  }}
export default connectToHarmowareVis(App);