MapTiler(MIERUNE Style)のベクタータイルをReact-map-glで表示するサンプル。

オープンデータを活用したデジタル地図サービスをリリース　－ MIERUNEとMapTilerが提携、日本のロケーションサービス市場を拡大 － - 株式会社MIERUNEのプレスリリース

MapTilerサービスの中でMIERUNEスタイルの地図(ベクタータイル)が利用できるとのことで試してみたのですが、残念ながら公式にはDeck.glのサンプルがなかったのでReact-map-glを使ったサンプルを置いて置きます。
これで、Deck.glでMapTilerで作成したタイルをベースマップとして利用することができます。

ベクトルタイルなので、地図を傾けたり回転させても、テキストラベルがちゃんと正しい向きで表示されて便利ですね。

react-map-glはMapbox GL JSのWrapperなので、maptilerが出力するスタイルタイル(style.json)をmapStyleプロパティに渡してあげれば動きます。
プラグインの読み込みだけちょっと特殊な方法で書いていますが、これに関してはreact-map-glのイシューで「こうすればプラグインを読み込めるよ！」って書いてあったのでこれでいいのでしょう。（個人的には、index.htmlのヘッダに記述した方がいい気もしますが、とりあえずこれで試してみて問題が出たら別の方法を検討してみます。）

ちなみに、すげーワーニングが出ているのは、どうもアイコン画像の読み込みで取りこぼしがあるために発生しているようなのですが、今のところ原因はわかりません orz