0 2024-01-05 第73回NearMe技術勉強会 Kenji Hosoda streamlit-foliumで地図系APIを インタラクティブに可視化する

1 まずは動かしてみよう Download: https://gist.github.com/kenji4569/b14ba47b1ec58fb2426fcc12f1bd777a Setup: $ pip install streamlit streamlit-folium $ streamlit run streamlit-folium-example-app.py (もし動かない場合は、Pythonのバージョンを上げてみてください)

2 クリックすると 経由地が増える 各経由地の 緯度経度を調整 経由地をクリア 経由地が変化した時に、 今回はダミーでsleep(1)を入れているが、 ここで地図系APIを呼び出して可視化する想定 変数のデバッグ

3 なぜ Streamlit なのか - 可視化に便利なコンポーネントが揃っている - インタラクティブなUIを簡単に構築できる - 宣言的UI：状態を更新すると、スクリプトが再実行されて、新しい状態に対 するUIが描画される - 最終的に、デプロイして非エンジニアでも触ることができる

4 コード解説：状態の初期化 if not st.session_state.get("initialized"): initial_waypoints = [HANEDA_T1, TOKYO] for i, waypoint in enumerate(initial_waypoints): st.session_state["waypoint_{0}_lat".format(i)] = waypoint[0] st.session_state["waypoint_{0}_lng".format(i)] = waypoint[1] st.session_state.initialized = True 次回から実行されない 状態の初期化

5 コード解説：サイドバーに数値入力を表示 with st.sidebar: for i, waypoint in enumerate(waypoints): st.write("Waypoint {0}".format(i)) col1, col2 = st.columns(2) with col1: st.number_input( "lat", value=waypoint[0], key="waypoint_{0}_lat".format(i), format=DEGREE_FORMAT, step=DEGREE_STEP, ) ... サイドバーに表示 2列に分けて表示 数値入力

6 コード解説：アクションボタン def on_remove_last_waypoint (): last_index = len(waypoints) - 1 if last_index < 0: return st.session_state["waypoint_{0}_lat".format(last_index)] = None st.session_state["waypoint_{0}_lng".format(last_index)] = None st.button("Remove last waypoint" , on_click=on_remove_last_waypoint ) ボタン配置 状態更新

7 コード解説：地図クリック @st.cache_data(max_entries=3) def create_folium_map(waypoints): m = folium.Map(location=TOKYO, zoom_start=11) m.add_child(folium.LatLngPopup()) ... return m st_map = st_folium(create_folium_map(waypoints)) if st_map.get("last_clicked"): last_clicked = st_map["last_clicked"] last_index = len(waypoints) - 1 st.session_state[ "waypoint_{0}_lat".format(last_index + 1)] = last_clicked["lat"] st.session_state[ "waypoint_{0}_lng".format(last_index + 1)] = last_clicked["lng"] st_map["last_clicked"] = None st.rerun() folium.LatLngPopup()でクリックした時に位置 情報を取得できる @st.cache_dataでレスポンスをキャッシュ （そうしないとなぜか地図要素が増えると 挙動がおかしくなるので ..） 引数(のハッシュ)がキャッシュのキーとなる 状態更新 位置情報の削除 スクリプトの再実行 位置情報が入る

8 コード解説：デバッグ with st.expander("waypoints"): st.write(waypoints) with st.expander("session_state"): st.write(st.session_state) 折りたたむ 状態の表示 状態のオブジェクト

9 Thank you