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の技術発表資料です
January 05, 2024
1
190
streamlit-foliumで地図系APIをインタラクティブに可視化する
NearMeの技術発表資料です
January 05, 2024
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
OR-Toolsの中⾝ -VRPの解法について-
nearme_tech
0
34
GTFSのデータを Streamlitで可視化してみた
nearme_tech
0
36
Offset / Cursor Paginationについて
nearme_tech
2
72
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
VRPを深層強化学習で解く
nearme_tech
0
67
Let’s go monorepo - intro to Nx.dev
nearme_tech
0
21
Dynamic Vehicle Routing のシミュレーションを Streamlitで作ってみた
nearme_tech
0
63
ログ監視ツールについて調べてみた
nearme_tech
0
58
(インターン生が大学院で行なっている)研究紹介
nearme_tech
0
47
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
Git: the NoSQL Database
bkeepers
PRO
423
63k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Designing for Performance
lara
602
67k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Designing with Data
zakiwarfel
96
4.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Navigating Team Friction
lara
179
13k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
YesSQL, Process and Tooling at Scale
rocio
165
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
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