DeckglのベースマップにGoogle Mapsを使う(React版)

最終更新日

DEMO

概要

今年の6月にGoogle MapsからDeck.gl対応の発表があったのですが、公式が提供しているサンプルコードがPure JavasScriptのコードしかなく、Reactを使ってGoogle Maps APIとDeck.glを組み合わせるサンプルが見つからなかったので作ってみました。

Google Developers Japan: Google Maps Platform での deck.gl サポートと Maps SDK for Android のアップデート

Using deck.gl with Google Maps - vis.gl - Medium

サンプルコード

解説

タイトルではわかりやすいように「DeckglのベースマップにGoogle Mapsを使う」としましたが仕組み的には実は逆で、Google Maps APIが生成する地図のoverlayerにDeck.glのレイヤーを差し込む作りとなっています。
このブログで以前紹介したDeck.glのベースマップを変更する方法とは、まったく別の仕組みで動いているので注意が必要です。

さて、Google MapsをReactで使用するためのコンポーネントはいくつかあるのですが、Deck.glのレイヤーをGoogle Mapsに差し込むためには、Google Mapオブジェクトへアクセスする機能がコンポーネントで提供されている必要があります。
今回は、@react-google-maps/api - npm を使用しましたが、Mapオブジェクトさえアクセスできるなら使い慣れたコンポーネントを使っても問題ありません。

@react-google-maps/api では、onloadプロパティのコールバックでmapオブジェクトにアクセスすることができます。

Deck.glのレイヤーをGoogle MapsにオーバーレイするにはGoogleMapsOverlayを使います。

注意

あくまでGoogle Mapsが主体で、Deck.glのレイヤーを乗せるだけなので、Google Mapsが対応していないDeck.glの機能などは今の所使えません。
具体的には3Dポリゴンを表示するようなレイヤーは機能しないみたいです。

The Google Maps JavaScript library does not support free rotation of the camera, so sadly the 3D layers of deck.gl may not work very well. deck.gl does not currently support zoom levels below zero, so it will hide itself when the user zooms all the way out.