テクニカルウェビナー #9 Mapbox GL JS + deck.gl

目的・ゴール 目的 ● Mapbox Maps製品のより詳しい使い方について理解する ゴール ● 新機能、新製品について知る ● Mapbox GL JSの機能についてさらに理解する ● Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る ● Turf, deck.gl等のサードパーティツールとの連携方法を理解する 対象 ● Mapbox Maps製品の技術にご興味のある方

はじめに Mapbox GL JS + deck.glで実践的なデータ表現 ● 国土交通省が提供するデータを地図上に表現 ○ 医療機関データ（医療機関の地点、名称等） ● 表現方法 ○ Mapbox GL JS標準のヒートマップ ○ deck.glのScreenGridLayer ● Jupyter Notebook上でpydeckを実行

ヒートマップ

ヒートマップとは ● データの密度を色で表現 ● Mapbox GL JSはheatmap layerとして実装 ○ サンプル ○ チュートリアル

ヒートマップの原理 ● カーネル密度推定を用いて分布を推定 ○ Point (Feature) を正規分布の中央とする ○ すべてのPointの正規分布の山を足し合わせる ○ Point間をなだらかに色変化 ● ブログ

サンプル確認 1(󰳕) weight: どのデータを採用するかを指定。ここ では地震データのマグニチュードが大きいとき に1.0となるように指定 intensity: （一般に）ズームレベルに応じて weightに乗じる値を変更させる。ズームレベ ルが小さいときたくさんの Featureが密集し、 密度が高くなるため intensityにより値を小さく する。 Create a heatmap layer リファレンス

サンプル確認 2(󰳕) 密度に応じた色の設定 Bandwidthの設定 不透明度の設定

密度(󰳕) color: （一般に）heatmap-densityに基づいて 色を指定。heatmap-densityは内部的に計算 される値で最大値1.0。 weight == 1, intensity == 1のとき、Pointにお ける値は正規分布の定数から計算される値 （0.39894）になる。 したがって、weight, intensityで大きな値を指 定すると多くの地点で 1.0を超える値となり、色 が1.0に張り付いてしまう。 0.39 固定値 > 0.39894

医療機関データをheatmapで表示

医療機関データ ● 国土交通省からダウンロード ○ 基準を満たす医療機関の名称・住所・座標・区分等 ● ShapefileなのでGeoJSONに変換 ○ QGISを使うと簡単に変換可能 医療機関の件数でヒートマップを作成

QGISでの変換(󰳕) 1. zipファイルをドラック＆ドロップ 2. 右クリック->Export->Save Features As… 3. GeoJSONを選択 4. 保存先を設定 5. OK

コード(󰳕) 医療機関の「件数」がデータ なので、常に1 Zoom 20で一件が約0.4

結果(󰳕) H22 R2

医療機関データをScreenGridLayerで表示

概要 ScreenGridLayer ● 各グリッド内の合計値、平均値等でヒストグラムを作成 ○ 値を色で表現 ● 用途によってはheatmapは不向きでこちらを使用 ○ 例) グリッドごとの平均気温 ● パラメータ ○ data: データオブジェクトを指定 ○ getPosition: dataから座標を取得する方法を指定 ○ getWeight: dataから値を取得する方法を指定 ○ aggregation: 集計方法 ■ 'SUM' | 'MEAN' | 'MIN' | 'MAX';

コード(󰳕) heatmap-radiusのデフォルトに合わせる

結果(󰳕)

pydeck

pydeckとは ● deck.glのPython実装（リファレンス） ● Deck#to_html()でHTMLを出力 ○ Jupyter NotebookではDeck#show()で 地図表示 ● Base mapとしてMapboxが利用可 ○ v1.13.0 ● Overlayのみ % pip install pydeck

ArcLayer(󰳕) Base Mapの設定 dataのどこに始点・終点があるかを 指示 始点・終点の色の指定 data: str or list of dict of {str: Any} or pandas.DataFrame Jupyter Notebook ではshow()で地図が表示

ScreenGridLayer(󰳕)

まとめ ● Heatmapの内部処理 ● ScreenGridLayerの使い方 ● データ処理方法 ● pydeckの使い方