deckglでmapboxサービス以外のベースマップを使用する

最終更新日

概要

そもそもdeck.glにはデフォルトで表示されるベースマップといったものはありませんが、公式のサンプルの多くがdeck.glとreact-map-glを組み合わせて使っているケースが多いため、deck.glではベースマップを使うためにMapboxサービスへの登録が必須であるような誤解があるようです。
ここでは、deck.glでベースマップを使用しない方法と、mapbox以外のベースマップを使う方法を紹介します。

ベースマップを使わない

ベースマップを使わない方法はとても簡単で、単にreact-map-glを使用せずdeck.glコンポーネントのみで地図を作成するだけです。

DEMO

サンプルコード

解説

ポイントとしては、deckコンポーネントでviewportプロパティを使わず、initialViewStateプロパティを使い、controllerプロパティにtrueを指定してください。
initialViewStateプロパティを使うとviewportの状態がdeckglコンポーネントの内部に保管され、controllerによるviewportの変化が自動的に反映されます。
(この機能はdeckglコンポーネントをステートフルに利用することになるため、必要な時のみ使用してください)

他のサービスのベースマップを使う

deck.glでmapbox以外のベースマップを使用する方法はいろいろあるのですが、ここではもっとも簡単なreact-map-glを利用した例を紹介します。

react-map-glとは

react-map-glは、地図クライアントライブラリである”MapboxGL JS“をreactで使いやすいようにラップしたコンポーネントです。(ちなみに”MapboxGL JS”もmapboxサービスを利用しなくても使えるオープンソースのライブラリです)

MapboxGL JSにはサードパーティの地図タイルを読み込んでベースマップとして使用する機能があるので、この機能を利用して地理院タイルをreact-map-glで表示してみます。

DEMO

サンプルコード

解説

mapboxGLのLayer style objectを作成し、react-map-glのmapStyleプロパティに渡してあげるだけです。

style objectのプロパティについては以下を参照してください。

Style Specification | Mapbox GL JS | Mapbox