# Try using Harmoware-VIS

Harmoware-VIS is a Spatial-Temporal Visualization Library using Uber's Deck.GL.

#### Execution environment

* Node.js: 12.16.x
* harmoware-vis: 1.6.x

#### Create workspace and initialize npm

```
mkdir Harmoware-VIS-Demo
cd Harmoware-VIS-Demo
copy nul package.json
```

#### Edit package.json

{% code title="package.json" %}

```javascript
{
  "name": "harmoware-demo",
  "version": "1.0.0",
  "description": "harmoware-demo",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 3030 --open --mode development",
    "build": "webpack --mode production"
  },
  "author": "harmoware-demo",
  "license": "MIT"
}
```

{% endcode %}

#### Install react

```
npm install --save react react-dom react-redux redux
```

#### Install harmoware-vis

```
npm install --save harmoware-vis
```

#### Install babel and webpack

```
npm install --save @babel/core @babel/preset-react babel-loader
npm install --save webpack webpack-cli webpack-dev-server
```

#### Install sass

```
npm install --save node-sass css-loader sass-loader style-loader
```

#### Create webpack.config.js

```
copy nul webpack.config.js
```

#### Edit webpack.config.js

{% code title="webpack.config.js" %}

```javascript
const resolve = require('path').resolve;
module.exports = {
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve(__dirname, './src')],
      query: { "presets": ["@babel/react"] }
    }, {
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"]
    }]
  }
};
```

{% endcode %}

#### Create index.html

```
copy nul index.html
```

#### Edit index.html

{% code title="index.html" %}

```markup
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>harmoware-demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>
</html>
```

{% endcode %}

#### Create index.js

```
mkdir src
copy nul src\index.js
```

#### Edit index.js

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

```jsx
import { render } from 'react-dom';
import { getCombinedReducer } from 'harmoware-vis';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import React from 'react';
import App from './containers/app';
import 'harmoware-vis/scss/harmoware.scss';
​
const store = createStore(getCombinedReducer());
​
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);
```

{% endcode %}

#### Create app.js

```
mkdir src\containers
copy nul src\containers\app.js
```

#### Edit app.js

Acquire Mapbox accesstoken.

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

```jsx
import React from 'react';
import {
  Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput
} from 'harmoware-vis';
​
const MAPBOX_TOKEN = 'xxxxxxxxxx'; //Acquire Mapbox accesstoken
​
class App extends Container {
  render() {
    const { actions, clickedObject, inputFileName, viewport,
      routePaths, movesbase, movedData } = this.props;
    const { movesFileName } = inputFileName;
    const optionVisible = false;

    return (
      <div>
        <div className="harmovis_controller">
          <ul className="flex_list">
            <li className="flex_row">
              <div className="harmovis_input_button_column">
                <label htmlFor="MovesInput">
                  Operation data<MovesInput actions={actions} id="MovesInput" />
                </label>
                <div>{movesFileName}</div>
              </div>
            </li>
          </ul>
        </div>
        <div className="harmovis_area">
          <HarmoVisLayers
            viewport={viewport} actions={actions}
            mapboxApiAccessToken={MAPBOX_TOKEN}
            layers={[
              new MovesLayer({ routePaths, movesbase, movedData,
                clickedObject, actions, optionVisible }),
            ]}
          />
        </div>
      </div>
    );
  }
}
export default connectToHarmowareVis(App);
```

{% endcode %}

#### Mapbox access token acquisition

Acquire the Accesstoken from [mapbox.com](https://www.mapbox.com/) .

#### Program start

```
npm start
```

#### How to use

Creation of operation data (json).

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

```javascript
[{"operation":[
    {"position":[136.945255,35.190691,0],"elapsedtime":1551575400,"name":"Nagoya Dome-mae Yada"},
    {"position":[136.936864,35.191591,0],"elapsedtime":1551575460,"name":"Ozone"},
    {"position":[136.929784,35.195934,0],"elapsedtime":1551575520,"name":"Heian-dori"},
    {"position":[136.921210,35.196281,0],"elapsedtime":1551575580,"name":"Shiga-hondori"},
    {"position":[136.910178,35.197183,0],"elapsedtime":1551575700,"name":"Kurokawa"},
    {"position":[136.904748,35.190528,0],"elapsedtime":1551575820,"name":"Meijo Koen"},
    {"position":[136.905379,35.181560,0],"elapsedtime":1551575940,"name":"City Hall"},
    {"position":[136.908156,35.173784,0],"elapsedtime":1551576060,"name":"Hisaya-odori"},
    {"position":[136.908031,35.169990,0],"elapsedtime":1551576120,"name":"Sakae"},
    {"position":[136.908898,35.163724,0],"elapsedtime":1551576240,"name":"Yaba-cho"},
    {"position":[136.906907,35.157963,0],"elapsedtime":1551576300,"name":"Kamimaezu"},
    {"position":[136.904771,35.150276,0],"elapsedtime":1551576420,"name":"Higashi Betsuin"},
    {"position":[136.900947,35.143257,0],"elapsedtime":1551576540,"name":"Kanayama"},
    {"position":[136.901769,35.134622,0],"elapsedtime":1551576660,"name":"Nishi Takakura"},
    {"position":[136.906622,35.127823,0],"elapsedtime":1551576780,"name":"Jingu NIshi"},
    {"position":[136.910380,35.120735,0],"elapsedtime":1551576840,"name":"Tenma-cho"},
    {"position":[136.919835,35.120141,0],"elapsedtime":1551576960,"name":"Horita"},
    {"position":[136.929545,35.117125,0],"elapsedtime":1551577080,"name":"Myoon-dori"},
    {"position":[136.937741,35.117728,0],"elapsedtime":1551577140,"name":"Aratama-bashi"},
    {"position":[136.948824,35.123331,0],"elapsedtime":1551577260,"name":"Mizuho Undojo Higashi"},
    {"position":[136.954523,35.130536,0],"elapsedtime":1551577380,"name":"Sogo Rihabiri Center"},
    {"position":[136.964036,35.136946,0],"elapsedtime":1551577500,"name":"Yagoto"},
    {"position":[136.965008,35.144556,0],"elapsedtime":1551577620,"name":"Yagoto Nisseki"},
    {"position":[136.966754,35.154519,0],"elapsedtime":1551577740,"name":"Nagoya Daigaku"},
    {"position":[136.963441,35.163923,0],"elapsedtime":1551577800,"name":"Motoyama"},
    {"position":[136.966701,35.175522,0],"elapsedtime":1551577920,"name":"Jiyugaoka"},
    {"position":[136.962254,35.184612,0],"elapsedtime":1551578040,"name":"Chayagasaka"},
    {"position":[136.954268,35.188806,0],"elapsedtime":1551578160,"name":"Sunada-bashi"},
    {"position":[136.945255,35.190691,0],"elapsedtime":1551578280,"name":"Nagoya Dome-mae Yada"}]}]
```

{% endcode %}

Click the "Operation data" button and select the operation data (json).

![](https://2247361432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_GRHvORH_hAPpwl_SU%2F-L_GoPj7B8kXVyVtrZX0%2F-L_Gr3PJ2XTlRdVIbwn1%2Fcapture.jpg?alt=media\&token=c55eb2f0-5be1-4767-a61a-e109a5e88eb7)

This tutorial has been confirmed in version 1.6.1 of Harmoware-VIS.
