大量の位置情報データをKepler.glに投げたら、驚くほど簡単に地図が描けた話

はじめに

数十万件の位置情報データを地図上に可視化しろと言われたら、皆さんはどうするでしょうか。

Leafletでマーカーを一つずつ打つ？ Mapboxのヒートマップレイヤーを自前で組む？どちらも不可能ではありませんが、データ件数が数万を超えたあたりからパフォーマンスの壁にぶつかります。ブラウザが固まる、描画が遅い、そもそもコードが複雑になりすぎる……。

そんな悩みを一気に解決してくれるのが、Uberが開発した地理空間データ可視化ツールKepler.glです。CSVやGeoJSONをドラッグ&ドロップするだけで、WebGLの力を借りた高速な地図可視化が実現できます。

Kepler.glとは

Kepler.glは、Uberが2018年にオープンソースとして公開した位置情報データ可視化ツールです。内部的にはUber製のWebGLレンダリングフレームワークdeck.glを利用しており、大規模なジオデータでもヌルヌルと動く滑らかな描画を実現しています。

Web上で完結するスタンドアロンアプリとして使うこともできますし、React + Reduxのコンポーネントとして自分のアプリに組み込むこともできる、二段構えの設計になっているのが特徴です。

主な特徴

大規模データに強い - WebGLベースの描画エンジンにより、数十万〜数百万件規模の点データでも快適に扱えます
多彩なレイヤータイプ - ポイント、ヒートマップ、六角形ビニング（Hexbin）、弧（Arc）、トリップ（Trip）など、用途に応じたレイヤーを豊富に用意
時系列アニメーション - タイムスタンプを持つデータであれば、時間経過に沿ったフィルタリング・再生が可能
コード不要のGUI操作 - CSV/GeoJSON/JSONをドラッグ&ドロップするだけで、コードを書かずに可視化を開始できる
Reactへの組み込み対応 - kepler.glパッケージをReduxストアに組み込むことで、自作アプリの一部として埋め込める

インストール

Reactアプリに組み込む場合は、以下のパッケージをインストールします。

npm install kepler.gl react-redux redux react-palm styled-components

yarn add kepler.gl react-redux redux react-palm styled-components

コードを書かずにブラウザだけで試したい場合は、公式が提供するデモサイト（kepler.gl/demo）にCSVやGeoJSONをドラッグ&ドロップするだけで利用できます。

基本的な使い方

Kepler.glはRedux前提のライブラリなので、まずはReducerをストアに組み込みます。

// store.js
import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import {taskMiddleware} from 'react-palm/tasks';
import keplerGlReducer from 'kepler.gl/reducers';

const reducers = combineReducers({
  keplerGl: keplerGlReducer,
});

const store = createStore(
  reducers,
  {},
  compose(applyMiddleware(taskMiddleware))
);

export default store;

次に、KeplerGlコンポーネントを描画し、Providerで先ほどのストアを渡します。

// App.jsx
import React from 'react';
import {Provider} from 'react-redux';
import KeplerGl from 'kepler.gl';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <KeplerGl
        id="map"
        mapboxApiAccessToken={process.env.MAPBOX_TOKEN}
        width={window.innerWidth}
        height={window.innerHeight}
      />
    </Provider>
  );
}

export default App;

データを読み込ませたい場合は、addDataToMapアクションをdispatchするだけです。

// loadData.js
import {addDataToMap} from 'kepler.gl/actions';
import {processCsvData} from 'kepler.gl/processors';

export function loadSampleData(dispatch, csvText) {
  const parsedData = processCsvData(csvText);

  dispatch(
    addDataToMap({
      datasets: {
        info: {
          label: '配送拠点データ',
          id: 'delivery_points',
        },
        data: parsedData,
      },
      option: {
        centerMap: true,
        readOnly: false,
      },
    })
  );
}