Integrating MapLibre GL JS with deck.gl: A Review

MapLibre Meetup Japan #04
https://mug-jp.connpass.com/event/345527/

にてお話しした内容をブラッシュアップして公開しました。
deck.glとMapLibre GL JS の連携についての初歩をサンプルコードと共に記しています。

Transcript

1. MapLibre GL JSとdeck.glってどうやって連携させるん だ？【復習編】 MapLibre Meetup Japan #04 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 1
2. おだやか @alt9800 (GitHub / OpenStreetMap / 𝕏 ) 西日本の果てで WebGIS / リモートセンシング/ XR などでご飯食べています。 マイクロモビリティが好きです。 最近プロンプト職人になりつつあり ます。助けてください。 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 2
3. 北海道楽しかったネ... FOSS4G Hokkaido 2024 https://foss4g.hokkaido.jp State of the Map Japan 2024 https://stateofthemap.jp/2024/ MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 3
4. 感銘を受けすぎて北海道を回転させた https://alt9800.github.io/sample-maps/etc/rotate-map/ MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 4
5. さて... MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 5
6. 今回のフィーチャーは deck.gl とMapLibre GL JS の組み合わせ ※ ﾖﾁﾖﾁなので、こういう使い方するといいよ〜〜みたいなリアクションを期待していま す。 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 6
7. deck.glとは？？ MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 7
8. Overview deck.glは 2015年に Uber によって開発が始まった、WebGL2を基幹技術として利 用したデータ可視化ライブラリー群 MIT deck.glはVis.glと名付けられたデータ可視化ライブラリコレクションの基盤として 位置づけられている MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 8
9. 同人誌を書いた コミックマーケット(C103)や技術書 同人誌博覧会 #11などで頒布した v1.1の公開リンク(20ページくら い) MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 9
10. なんでdeck.glを触り始めたのか (モチベーション) もともと地理空間データの可視化がやりたくてWeb開発を初めた経緯があり、 kepler.gl を触れたのち、 もっとシンプルにデータ可視化をしたくなり大元のdeck.glに触り始めた。 (MapLibreの方が知名度が高いと思うので、deck.glから触り始めたユーザーは少数派か も) MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 10
11. deck.glが提供する機能 https://deck.gl/examples より MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 11
12. deck.glが提供する機能 3D GISとしてのインタラクションに関わる基本機能(ズーム / ドラッグによる移動 など) geojsonなどのインポート (これはJS/TSでのデータ整形の話かも) 表示した地物のスタイリング MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 12
13. MapLibre GL JS との比較 MapLibre GL JS deck.gl ZXYタイルマップ読み込み ◦ ◦ style.jsonの読み込み ◦ × データレイヤーのオーバーレイ ◦ ◦ ユーザインタラクション zoom / ドラッグ / 回転 ◦ ◦ ホバーによるデータの詳細表示 ◦ ◦ (カメラコントロールを伴うアニメーション はどっちでやっても辛い) MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 13
14. MapLibre GL JS の強み スタイル記述が明瞭 (GIS機能の指定がkey-valueの形であり、Leafletと比べても明快) データレイヤーのホバーによるデータ表示の柔軟性 ベースマップのスタイリングの豊富さ MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 14
15. deck.glが苦手なこと フォント周り / ラベルの機能が 貧弱 style.jsonを読み込むことに加え て、ベクタータイルを直感的に 使えない 地図の操作ボタンをライブラリ 側でサポートしていないので、 自分でDOMの構成を頑張る必要 がある オーバーレイするボタンをつくる例 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 15
16. なぜdeck.glのベースマップの描画機能などが貧弱に見えるか → もともと Mapbox GL JS との連携を念頭に開発が進んでいた経緯がある (GISとしての機能はベースマップ構築用のライブラリに委ねる選択をした) 上記のようにMapbox GL JS の関連ライブラリを探す表記がでることがあるが、現在で はMapLibre GL JS との連携が強力になっており、無視できるようになった。 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 16
17. 話は同人誌の話題に戻り... MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 17
18. 同人誌で取り扱っているサンプル一 覧 osm-bright-jaテーマを背景地図に読 み込みつつ、deckGLデータで立体表 現を行うサンプル ↑ 地図上での右クリックで、コンテ クストメニューが呼ばれてしまい回 転機能を阻害しまう問題が頒布時点 では未解決であった。 そこで、deckglとMapLibre GL JS の カメラコントロール周りの機能の改 善案をLLMに教わってみた。 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 18
19. デモンストレーション MapLibreとdeck.glの視点を同期させ た例 (見た目は変わっていないがdeckレイ ヤーも読み込めている) 挙動確認 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 19
20. 詳細 基本的には deck 、 libre 両方のインスタンスの中で同じDOMを指定する。 (この場合は container: 'map' ) 加えてViewStateを同期させると良い。 この場合の「同期」は、deck.gl側からMapLibre GL JSの緯度経度、zoomレベルなどを 追いかけるようにして同じ視点を持つようにする。 onViewStateChange: ({ viewState }) => { map.jumpTo({ center: [viewState.longitude, viewState.latitude], zoom: viewState.zoom, pitch: viewState.pitch, bearing: viewState.bearing }); MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 20
21. 詳細 ついでに document.addEventListener('contextmenu', event => event.preventDefault()); のような感じにしないと、右クリックドラッグや、二本指での回転がdeck.glによって 妨げられる。 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 21
22. deck.glのラベル機能を見てみる マークアップのサンプル MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 22
23. MapLibre GL JS と deck.glの 機能を組み合わせる例 MapLibre GL JS のベースマップを切 り替える機能の上に、deck.glの3Dレ イヤーを重ねてみた 実装サンプル MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 23
24. Next step ベクタータイル他、3Dオブジェクトを読み込むと強みを生かせるかも その際の強い味方 https://loaders.gl しみずさんの例 https://gunmagisgeek.com/blog/deck-gl/7303 Shi-Worksさんの例 https://qiita.com/shi-works/items/f3ae4096c08ef4ccbccc 先駆者のお二人の例でも、背景レイヤーの操作やベクタータイルはMapLibreで読み込 み、点群をはじめとする3D表現をdeck.glに担当させていることが多いようだ。 (広い範囲のデジタルツインだとCesiumやRe:Earthの採用が優位か) MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 24
25. まとめ 初学者からみた二つのライブラリの連携 Map Libre GL JS 側から見た連携の旨み → リッチな3D表現に簡単にタッチできる deck.gl 側から見た連携の旨み → ベースレイヤー他、いわゆるWebGISの機能を利用しやすくなる MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 25
26. アフタートークから拾ったおまけ Globe Viewがアツい https://deck.gl/examples/maplibre MapLibreとの組み合わせは3D表示とベースマップやインタラクションの強化と述べた が、すべてが噛み合ってWebGLの良さが引き出せている例は、回転楕円体としての地 図表現なのではないか。(このスライドの背景) ライトの制御で日照範囲を可視化するだけでも、とても未来的な表現が手に入る。 MapLibre GL JSとdeck.glってどうやって連携させるんだ？【復習編】 Alt9800 26