Harmoware-VIS develop tutorial
Search…
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
1
mkdir Harmoware-VIS-Demo
2
cd Harmoware-VIS-Demo
3
copy nul package.json
Copied!
Edit package.json
package.json
1
{
2
"name": "harmoware-demo",
3
"version": "1.0.0",
4
"description": "harmoware-demo",
5
"main": "index.js",
6
"scripts": {
7
"start": "webpack-dev-server --port 3030 --open --mode development",
8
"build": "webpack --mode production"
9
},
10
"author": "harmoware-demo",
11
"license": "MIT"
12
}
Copied!
Install react
1
npm install --save react react-dom react-redux redux
Copied!
Install harmoware-vis
1
npm install --save harmoware-vis
Copied!
Install babel and webpack
1
npm install --save @babel/core @babel/preset-react babel-loader
2
npm install --save webpack webpack-cli webpack-dev-server
Copied!
Install sass
1
npm install --save node-sass css-loader sass-loader style-loader
Copied!
Create webpack.config.js
1
copy nul webpack.config.js
Copied!
Edit webpack.config.js
webpack.config.js
1
const resolve = require('path').resolve;
2
module.exports = {
3
output: {
4
path: __dirname,
5
filename: 'bundle.js'
6
},
7
devtool: 'source-map',
8
module: {
9
rules: [{
10
test: /\.js$/,
11
loader: 'babel-loader',
12
include: [resolve(__dirname, './src')],
13
query: { "presets": ["@babel/react"] }
14
}, {
15
test: /\.scss$/,
16
use: ["style-loader", "css-loader", "sass-loader"]
17
}]
18
}
19
};
Copied!
Create index.html
1
copy nul index.html
Copied!
Edit index.html
index.html
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="UTF-8">
5
<title>harmoware-demo</title>
6
</head>
7
<body>
8
<div id="app"></div>
9
<script src="./bundle.js"></script>
10
</body>
11
</html>
Copied!
Create index.js
1
mkdir src
2
copy nul src\index.js
Copied!
Edit index.js
index.js
1
import { render } from 'react-dom';
2
import { getCombinedReducer } from 'harmoware-vis';
3
import { createStore } from 'redux';
4
import { Provider } from 'react-redux';
5
import React from 'react';
6
import App from './containers/app';
7
import 'harmoware-vis/scss/harmoware.scss';
8
​
9
const store = createStore(getCombinedReducer());
10
​
11
render(
12
<Provider store={store}>
13
<App />
14
</Provider>,
15
document.getElementById('app')
16
);
Copied!
Create app.js
1
mkdir src\containers
2
copy nul src\containers\app.js
Copied!
Edit app.js
Acquire Mapbox accesstoken.
app.js
1
import React from 'react';
2
import {
3
Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput
4
} from 'harmoware-vis';
5
​
6
const MAPBOX_TOKEN = 'xxxxxxxxxx'; //Acquire Mapbox accesstoken
7
​
8
class App extends Container {
9
render() {
10
const { actions, clickedObject, inputFileName, viewport,
11
routePaths, movesbase, movedData } = this.props;
12
const { movesFileName } = inputFileName;
13
const optionVisible = false;
14
​
15
return (
16
<div>
17
<div className="harmovis_controller">
18
<ul className="flex_list">
19
<li className="flex_row">
20
<div className="harmovis_input_button_column">
21
<label htmlFor="MovesInput">
22
Operation data<MovesInput actions={actions} id="MovesInput" />
23
</label>
24
<div>{movesFileName}</div>
25
</div>
26
</li>
27
</ul>
28
</div>
29
<div className="harmovis_area">
30
<HarmoVisLayers
31
viewport={viewport} actions={actions}
32
mapboxApiAccessToken={MAPBOX_TOKEN}
33
layers={[
34
new MovesLayer({ routePaths, movesbase, movedData,
35
clickedObject, actions, optionVisible }),
36
]}
37
/>
38
</div>
39
</div>
40
);
41
}
42
}
43
export default connectToHarmowareVis(App);
Copied!
Mapbox access token acquisition
Program start
1
npm start
Copied!
How to use
Creation of operation data (json).
demo-data.json
1
[{"operation":[
2
{"position":[136.945255,35.190691,0],"elapsedtime":1551575400,"name":"Nagoya Dome-mae Yada"},
3
{"position":[136.936864,35.191591,0],"elapsedtime":1551575460,"name":"Ozone"},
4
{"position":[136.929784,35.195934,0],"elapsedtime":1551575520,"name":"Heian-dori"},
5
{"position":[136.921210,35.196281,0],"elapsedtime":1551575580,"name":"Shiga-hondori"},
6
{"position":[136.910178,35.197183,0],"elapsedtime":1551575700,"name":"Kurokawa"},
7
{"position":[136.904748,35.190528,0],"elapsedtime":1551575820,"name":"Meijo Koen"},
8
{"position":[136.905379,35.181560,0],"elapsedtime":1551575940,"name":"City Hall"},
9
{"position":[136.908156,35.173784,0],"elapsedtime":1551576060,"name":"Hisaya-odori"},
10
{"position":[136.908031,35.169990,0],"elapsedtime":1551576120,"name":"Sakae"},
11
{"position":[136.908898,35.163724,0],"elapsedtime":1551576240,"name":"Yaba-cho"},
12
{"position":[136.906907,35.157963,0],"elapsedtime":1551576300,"name":"Kamimaezu"},
13
{"position":[136.904771,35.150276,0],"elapsedtime":1551576420,"name":"Higashi Betsuin"},
14
{"position":[136.900947,35.143257,0],"elapsedtime":1551576540,"name":"Kanayama"},
15
{"position":[136.901769,35.134622,0],"elapsedtime":1551576660,"name":"Nishi Takakura"},
16
{"position":[136.906622,35.127823,0],"elapsedtime":1551576780,"name":"Jingu NIshi"},
17
{"position":[136.910380,35.120735,0],"elapsedtime":1551576840,"name":"Tenma-cho"},
18
{"position":[136.919835,35.120141,0],"elapsedtime":1551576960,"name":"Horita"},
19
{"position":[136.929545,35.117125,0],"elapsedtime":1551577080,"name":"Myoon-dori"},
20
{"position":[136.937741,35.117728,0],"elapsedtime":1551577140,"name":"Aratama-bashi"},
21
{"position":[136.948824,35.123331,0],"elapsedtime":1551577260,"name":"Mizuho Undojo Higashi"},
22
{"position":[136.954523,35.130536,0],"elapsedtime":1551577380,"name":"Sogo Rihabiri Center"},
23
{"position":[136.964036,35.136946,0],"elapsedtime":1551577500,"name":"Yagoto"},
24
{"position":[136.965008,35.144556,0],"elapsedtime":1551577620,"name":"Yagoto Nisseki"},
25
{"position":[136.966754,35.154519,0],"elapsedtime":1551577740,"name":"Nagoya Daigaku"},
26
{"position":[136.963441,35.163923,0],"elapsedtime":1551577800,"name":"Motoyama"},
27
{"position":[136.966701,35.175522,0],"elapsedtime":1551577920,"name":"Jiyugaoka"},
28
{"position":[136.962254,35.184612,0],"elapsedtime":1551578040,"name":"Chayagasaka"},
29
{"position":[136.954268,35.188806,0],"elapsedtime":1551578160,"name":"Sunada-bashi"},
30
{"position":[136.945255,35.190691,0],"elapsedtime":1551578280,"name":"Nagoya Dome-mae Yada"}]}]
Copied!
Click the "Operation data" button and select the operation data (json).
This tutorial has been confirmed in version 1.6.1 of Harmoware-VIS.
Last modified 2yr ago
Copy link
Contents