はじめに
Harmoware-VISについては別記事「Harmoware-VISの紹介」をご覧ください。
インストール
準備
node.js v16 インストール
Mapboxのaccesstoken取得 ⇒ Mapbox.com
npm install
command.
npm install harmoware-vis
Github install & Run the software
command.
git clone https://github.com/Harmoware/Harmoware-VIS
cd Harmoware-VIS
npm install
# example visualize-sample
npm run visualize-sample
Harmoware-VISの使用方法
基本的に以下のようなコードがベースになります。
rootコンテナは「harmoware-vis.Container」を継承します。
rootコンテナを「harmoware-vis.connectToHarmowareVis」でconnectしexport defaultします。
標示するレイヤーは「harmoware-vis.HarmoVisLayers」の「layers」で指定します。
app.js
import React from 'react';
import { Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput } from 'harmoware-vis';
const MAPBOX_TOKEN = 'XXXXXXXXXX'; //Mapboxのaccesstoken
class App extends Container {
render() {
const { actions, viewport, movedData } = this.props;
const optionVisible = false;
return (
<div>
<div className="harmovis_controller">
<ul >
<li><MovesInput actions={actions} /></li>
</ul>
</div>
<div className="harmovis_area">
<HarmoVisLayers
viewport={viewport} actions={actions} mapboxApiAccessToken={MAPBOX_TOKEN}
layers={[ new MovesLayer({ movedData, actions, optionVisible })]}
/>
</div>
</div>
);
}}
export default connectToHarmowareVis(App);
v1.8.14以降では以下のようなhooks記述も可能です。
app.js
const App = (props)=>{
const { actions, viewport, movedData } = props;
const optionVisible = false;
return (
<Container {...props}>
<div className="harmovis_controller">
<ul >
<li><MovesInput actions={actions} /></li>
</ul>
</div>
<div className="harmovis_area">
<HarmoVisLayers
viewport={viewport} actions={actions} mapboxApiAccessToken={MAPBOX_TOKEN}
layers={[ new MovesLayer({ movedData, actions, optionVisible })]}
/>
</div>
</Container>
)
}
index.js
import { render } from 'react-dom';
import { getConfigureStore } from 'harmoware-vis';
import { Provider } from 'react-redux';
import React from 'react';
import App from './app';
import 'harmoware-vis/scss/harmoware.scss';
const store = getConfigureStore();
render(
<Provider store={store}><App /></Provider>,
document.getElementById('app')
);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
上記サンプルと同等のデモアプリをgithubに上げてありますので参考にしてください。
https://github.com/Harmoware/Harmoware-VIS-Demo
APIリファレンス
Harmoware-VISのAPIリファレンスについては別記事「Harmoware-VIS APIリファレンス」をご覧ください。