Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
streamlit-foliumで地図系APIをインタラクティブに可視化する
Search
NearMeの技術発表資料です
PRO
January 05, 2024
1
580
streamlit-foliumで地図系APIをインタラクティブに可視化する
NearMeの技術発表資料です
PRO
January 05, 2024
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
確率的プログラミング入門
nearme_tech
PRO
0
8
Observability and OpenTelemetry
nearme_tech
PRO
2
19
観察研究における因果推論
nearme_tech
PRO
1
59
React
nearme_tech
PRO
2
27
Architecture Decision Record (ADR)
nearme_tech
PRO
1
790
遺伝的アルゴリズムを実装する
nearme_tech
PRO
1
34
Fractional Derivative!
nearme_tech
PRO
1
28
GitHub Projectsにおける チケットの ステータス更新自動化について
nearme_tech
PRO
1
46
2つの曲線を比較する方法ってあるの? 〜フレシェ距離を試してみた〜 with Python
nearme_tech
PRO
1
240
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
39
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Producing Creativity
orderedlist
PRO
341
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Making Projects Easy
brettharned
115
5.9k
Faster Mobile Websites
deanohume
304
30k
Automating Front-end Workflow
addyosmani
1365
200k
Transcript
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