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
910
streamlit-foliumで地図系APIをインタラクティブに可視化する
NearMeの技術発表資料です
PRO
January 05, 2024
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
220
ReactNative のアップグレード作業が (意外に)楽しかった話
nearme_tech
PRO
2
76
強化学習アルゴリズムPPOの改善案を考えてみた
nearme_tech
PRO
0
8
Apple Containerについて調べて触ってみた
nearme_tech
PRO
0
130
Rust 並列強化学習
nearme_tech
PRO
0
23
並列で⽣成AIにコーディングをやらせる
nearme_tech
PRO
1
150
希望休勤務を考慮したシフト作成
nearme_tech
PRO
0
40
Hub Labeling による高速経路探索
nearme_tech
PRO
0
100
Build an AI agent with Mastra
nearme_tech
PRO
0
83
Featured
See All Featured
Balancing Empowerment & Direction
lara
3
620
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Scaling GitHub
holman
463
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Practical Orchestrator
shlominoach
190
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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