DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#4 〜Mapコンポーネントの表示〜

DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第４弾の記事です。

前回はDECK.GLのPathLayerを使って、データの描画を行いました。
今回はこれにマップコンポーネントを組み込んで表示させてみたいと思います。

目次

本記事は全５回に渡り説明していきます。

1. ReactとDECK.GLの環境構築
2. 基本的なReactのコードをブラウザで確認
3. DECK.GLを使った簡単なデータの表示
4. マップコンポーネントの表示 ←今回はコレ
5. GoogleMapタイムラインデータ表示

前回のおさらい

前回は、App.jsx に下記のコードを書きました。

App.js

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [
  {
    path: [
      [-122.45, 37.7],
      [-122.5, 37.8],
      [-122.6, 37.7]
    ]
  }
];

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",
        data,
        getPath: d => d.path,
        getWidth: 30
      })
    ];
    return <DeckGL viewState={viewState} layers={layer}></DeckGL>;
  }
}

マップコンポーネント

DECK.GLはマップコンポーネントなしでも独立して動作しますが、地理データをビジュアライズするのに地図情報が表示されないのではおもしろくありませんよね。

DECK.GLと簡単に連携できるマップコンポーネントとして、GoogleMapとMapboxの２つの選択肢がありますが、
今回はMapboxを使って描画したいと思います。

※マップコンポーネントの連携についての詳細はこちらをご参照ください。

Mapboxとは？

Mapboxとは、米カリフォルニア州サンフランシスコにある位置データプラットフォームです。要するに、GoogleMapのような地図サービスです。

最近はゼンリンと提携したり、「ソフトバンク・ビジョン・ファンド」から出資を受けたりと、日本での事業も強化しようとしているようです。

• 参考: Mapbox.jp、日本で事業を開始
• 参考: ゼンリンがデータ提供したというMapboxを使ってみた

Mapboxでは、GoogleMap同様開発者に便利なインターフェースがたくさん提供されています。
例えば、Mapbox GL JSというJavaScriptライブラリが提供されていたり、
mapbox-glという名前でNodeパッケージも公開されています。

今回はReactコンポーネントとして利用できるreact-map-glを使ってMapboxを連携させましょう。

※MapboxのDocumentationはこちら

• Mapbox GL JSのGithub
• react-map-glのGithub

Mapboxを連携させよう

react-map-glライブラリのインストール

まずreact-map-glライブラリをインストールします。

$ yarn add react-map-gl
yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@7.1.2" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.

... （長いので省略）

├─ tinyqueue@2.0.3
├─ vt-pbf@3.1.1
└─ wgs84@0.0.0
✨  Done in 24.60s.
$ 

MapGLコンポーネントのimport

インストールが終わったら、MapGLコンポーネントをimportしましょう。
また、Mapbox GL JS の css も import しておかないとwarningが出てしまうので、こちらもimportします。

App.js(一部)

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";
import MapGL from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

Mapbox のアクセストークン

Mapbox を使う場合は、 Mapbox のアクセストークンを埋め込む必要があります。

アクセストークンは、Mapboxにログインして、「Access tokens」の + Create a token ボタンから作成することができます。

こちらからログインしてください https://account.mapbox.com/
※アカウントを持っていない人は、アカウントの作成が必要です

アクセストークンが取得できたら、下記のようにApp.jsxに書きます。
本来アクセストークンのような外部に漏れてはいけない情報は、.envファイルなどの環境変数で管理した方が良いですが、
Mapboxには、指定したURLから発信されたリクエストに対してのみ機能する「制限付きトークン」を作成することができるので、これであればファイルに埋め込んでも問題ありませんね。

App.js(一部)

// mapbox access token
const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoiZ......."

MapGLコンポーネントの追加

それでは最後にDeckGLにマップコンポーネントを組み込みます。
上記で定義したアクセストークンはmapboxApiAccessTokenに渡します。

App.js(一部)

    return (
      <DeckGL viewState={viewState} layers={layer}>
        <MapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );

ブラウザで表示

それではここまで書いたコードをブラウザで表示してみましょう！
yarn startコマンドで起動させると・・・

地図の上にパスが表示されました！！

次回予告

次回はいよいよGoogleMapタイムラインの表示を行います！

App.jsxの全体像

App.js

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";
import MapGL from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

// mapbox access token
const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoiZ.......";

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [
  {
    path: [
      [-122.45, 37.7],
      [-122.5, 37.8],
      [-122.6, 37.7]
    ]
  }
];

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",
        data,
        getPath: d => d.path,
        getWidth: 30
      })
    ];
    return (
      <DeckGL viewState={viewState} layers={layer}>
        <MapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );
  }
}