LoginSignup
1

More than 1 year has passed since last update.

Harmoware-VIS はじめに

Last updated at Posted at 2021-11-26

はじめに

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リファレンス」をご覧ください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1