# 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 harmoware-demo
``` {% 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( , 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 (
); } } 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://harmoware-develop-tutorial.gitbook.io/tutorial/master.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.