サイトアイコン アマチュア無線局JS2IIU

【Streamlit】PyDeckを使って地図をインタラクティブに表示しよう！

JS2IIU

こんにちは、JS2IIUです。
Streamlitを使えば簡単に、地図をインタラクティブに表示することができます。 st.pydeck_chart()を使えば、PyDeckの豊富な機能をStreamlitアプリケーションに簡単に組み込むことができます。この記事では、st.pydeck_chart()の基本的な使い方から、具体的なサンプルプログラムまでご紹介します。今回もよろしくお願いします。

st.pydeck_chart()でできること

st.pydeck_chart()は、StreamlitアプリケーションにPyDeckの地図を埋め込むための関数です。PyDeckは、WebGLを活用した高性能な地図描画ライブラリであり、3Dマップ、ポイントクラウド、ヒートマップなど、様々な表現力豊かな地図を作成することができます。

st.pydeck_chart()を使うことで、以下のようなことができます。

PyDeckについてはこちらを参考にして下さい。

Gallery — pydeck 0.9.1 documentation
deckgl.readthedocs.io

st.pydeck_chart()の使い方

st.pydeck_chart()関数のシグネチャとパラメータは以下の通りです。

Python
st.pydeck_chart(pydeck_obj=None, *, use_container_width=False, width=None, height=None, selection_mode="single-object", on_select="ignore", key=None)

もしpydeckがインストールされていない場合は、pip install pydeckでインストールしておいて下さい。インストールされているかどうかの確認はpip freezeコマンドの出力を見て下さい。

サンプルプログラム

それでは、st.pydeck_chart()を使ったサンプルプログラムを見てみましょう。このプログラムでは、日本の地図上に、我が家の最寄り空港である名古屋空港（NKM）から出発するFDA（フジドリームエアラインズ）の就航地をArcLayerで表示します。

各空港の緯度経度情報は生成AIで作っていますので、正確でないことをご承知おき下さい。

Python
import streamlit as st
import pydeck

# Define a layer with ArcLayer
#  https://deckgl.readthedocs.io/en/latest/gallery/arc_layer.html

layer = pydeck.Layer(
    "ArcLayer",
    data=[
        {"origin": [136.891667, 35.166667], "destination": [140.715,40.781111]}, # NKM -> AOM
        {"origin": [136.891667, 35.166667], "destination": [140.371111,38.401944]}, # NKM -> FKS
        {"origin": [136.891667, 35.166667], "destination": [139.043889,37.901111]}, # NKM -> HND
        {"origin": [136.891667, 35.166667], "destination": [133.313889,35.443333]}, # NKM -> TAK
        {"origin": [136.891667, 35.166667], "destination": [134.223889,35.526111]}, # NKM -> KCZ
        {"origin": [136.891667, 35.166667], "destination": [132.763889,35.378889]}, # NKM -> MYJ
        {"origin": [136.891667, 35.166667], "destination": [133.613889,33.558333]}, # NKM -> KMI
        {"origin": [136.891667, 35.166667], "destination": [130.45,33.583333]}, # NKM -> KOJ
        {"origin": [136.891667, 35.166667], "destination": [130.735,32.801111]}, # NKM -> OIT
    ],
    get_source_position="origin",
    get_target_position="destination",
    get_source_color=[255, 255, 140], # yellow
    get_target_color=[255, 165, 0], # orange
    auto_highlight=True,
    pickable=True,
    radius=100,
    width_scale=0.00001,
    width_min_pixels=1,
    width_max_pixels=3,
)

# Set the viewport location
view_state = pydeck.ViewState(
    latitude=36,
    longitude=136.0,
    zoom=4.5,
    bearing=0,
    pitch=40,
)

# Render
r = pydeck.Deck(layers=[layer], initial_view_state=view_state)

st.header('FDA destinations from NKM')
st.pydeck_chart(r)
https://js2iiu.com/wp-content/uploads/2025/01/pydeck_01.mov

サンプルプログラムの解説

このプログラムでは、まずpydeck.Layerを使ってArcLayerを定義しています。dataには、出発地（origin）と目的地（destination）の緯度経度を指定します。get_source_colorとget_target_colorで、それぞれ出発地と目的地のマーカーの色を指定しています。

pydeck.ViewStateでは、地図の初期表示位置を設定しています。latitudeとlongitudeで中心座標を、zoomでズームレベルを指定します。どれぐらいのズームレベルにするかは実際に表示させてみてから決めていきます。

最後に、pydeck.DeckでレイヤーとViewStateを組み合わせて地図を作成し、st.pydeck_chart()でStreamlitアプリケーションに表示しています。

地図上のオブジェクトを選択する

st.pydeck_chart()では、selection_modeとon_selectパラメータを使って、地図上のオブジェクトを選択し、その情報にアクセスすることができます。

例えば、selection_mode="single-object"、on_select="callback"と設定し、以下のようなコールバック関数を定義することで、選択されたオブジェクトの情報を取得することができます。

Python
def on_select_callback(selected_objects):
    if selected_objects:
        st.write(f"選択されたオブジェクト: {selected_objects}")

st.pydeck_chart(r, selection_mode="single-object", on_select="callback")

参考になるWEBサイト

ぜひst.pydeck_chart()を使って、インタラクティブな地図をStreamlitアプリケーションに組み込んでみてください！

Pythonに関する書籍の<PR>です。

24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。

最後まで読んでいただきありがとうございました。

モバイルバージョンを終了