HoloViews③（Map Overlay）

Map Overlay

HoloViewsの要素は Tiles要素 に重ねることで、地図上にグラフを表示することができます。

Tiles要素を使って地図上にグラフを表示するには、以下の3つの方法があります。

  1. テンプレート化された WMTS タイルサーバーURL を使用して holoviews.Tiles要素 を作成する。
  2. holoviews.element.tiles.tile_sourcesモジュール の関数を使用して、定義済みのタイルサーバー URLを持つ Tiles要素 を作成する。
  3. コンストラクター引数なしで holoviews.Tiles要素 を作成し、オプションズ（.opts）を使用して mapbox トークンとスタイルを設定する。

plotly mapbox トレースでは地理的位置を指定する場合、経度と緯度を指定しますが、HoloViewsではWebメルカトル座標で指定します。

Webメルカトルの水平座標と垂直座標はそれぞれ easting と northing と呼ばれます。

HoloViewsには、座標変換用に Tiles.lon_lat_to_easting_northing と Tiles.easting_northing_to_lon_lat という関数が用意されています。

サンプル（カーシェア分布）

サンプルとして地図（StamenTerrain WMTS map）上にカーシェアの分布を表示してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import dash
from dash import html
import holoviews as hv
from holoviews.plotting.plotly.dash import to_dash
from holoviews.element.tiles import CartoDark
from plotly.data import carshare

# Convert from lon/lat to web-mercator easting/northing coordinates
df = carshare()
df["easting"], df["northing"] = hv.Tiles.lon_lat_to_easting_northing(
    df["centroid_lon"], df["centroid_lat"]
)

points = hv.Points(df, ["easting", "northing"]).opts(color="crimson")
tiles = CartoDark()
overlay = tiles * points

app = dash.Dash(__name__)
components = to_dash(app, [overlay])

app.layout = html.Div(
    components.children
)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

地図が表示され、その上にカーシェアの分布が表示されました。

ドラッグして地図の位置を変えたり、スクロールによって拡大・縮小を行うことができます。