Dash 第56回（テーブルデータを地図に表示）

テーブルデータを地図に表示

テーブル上の位置データを地図上に表示します。

地図を表示するためにmapboxよりアクセストークンを取得しておく必要があります。（12行目で設定）

[ソースコード]

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
import plotly.express as px
from dash.dependencies import Input, Output

df = pd.read_csv('401307compatibleformatshelter.csv', encoding='cp932')

# mapboxのアクセストークンを設定
px.set_mapbox_access_token('<<mapboxで取得したトークン>>')

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.Div(
            [
                html.H2('避難所マップ'),
                dash_table.DataTable(
                    id='table1',
                    # セルサイズの設定
                    style_cell={
                        'textAliign':'center',      # テキストを中央寄せ
                        'maxWidth':'80px',          # 最大横幅
                        'minWidth':'80px',          # 最小横幅
                        'whiteSpace':'normal'       # 文字を折り返して表示
                    },
                    fixed_rows={'headers':True},    # 縦スクロール時にヘッダーを固定
                    columns=[{'name':col, 'id':col} for col in df.columns],
                    data=df.to_dict('records')
                )
            ]
        ),
        dcc.Graph(id='map1')
    ]
)

@app.callback(
    Output('map1', 'figure'),
    Input('table1', 'columns'),
    Input('table1', 'derived_virtual_data')
)
def update_map(columns, rows):
    df = pd.DataFrame(rows, columns=[c['name'] for c in columns])
    return px.scatter_mapbox(
        df,
        lat='緯度',
        lon='経度',
        zoom=10,
        hover_data=['名称', '名称かな表記', '住所表記']
    )

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバック関数には、テーブルの引数columnsとderived_virtual_dataを入力としています。

derived_virtual_dataは、テーブルの全ページデータです。

update_map関数では、列名と全データからDataFrameを作成し、そのDataFrameをscatter_mapbox関数に設定し、地図上に散布図を描画したfigureを返しています。（46～53行目）

[ブラウザで表示]

テーブルの位置データが地図上に散布図として描画されていることを確認できました。