Harmoware-VIS is a Spatial-Temporal Visualization Library using Uber's Deck.GL.
Node.js: 12.16.x
harmoware-vis: 1.6.x
mkdir Harmoware-VIS-Democd Harmoware-VIS-Democopy nul package.json
package.json{"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"}
npm install --save react react-dom react-redux redux
npm install --save harmoware-vis
npm install --save @babel/core @babel/preset-react babel-loadernpm install --save webpack webpack-cli webpack-dev-server
npm install --save node-sass css-loader sass-loader style-loader
copy nul webpack.config.js
webpack.config.jsconst 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"]}]}};
copy nul index.html
index.html<!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>
mkdir srccopy nul src\index.js
index.jsimport { 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'));
mkdir src\containerscopy nul src\containers\app.js
Acquire Mapbox accesstoken.
app.jsimport React from 'react';import {Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput} from 'harmoware-vis';const MAPBOX_TOKEN = 'xxxxxxxxxx'; //Acquire Mapbox accesstokenclass 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"><HarmoVisLayersviewport={viewport} actions={actions}mapboxApiAccessToken={MAPBOX_TOKEN}layers={[new MovesLayer({ routePaths, movesbase, movedData,clickedObject, actions, optionVisible }),]}/></div></div>);}}export default connectToHarmowareVis(App);
Acquire the Accesstoken from mapbox.com .
npm start
Creation of operation data (json).
demo-data.json[{"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"}]}]
Click the "Operation data" button and select the operation data (json).
This tutorial has been confirmed in version 1.6.1 of Harmoware-VIS.