Data Persistence in Streamlit Cloud
Bonus: I add the search function of longitude and latitude. When I search lon 135, lat 35, tihs location is named 'the belly button of Japan'
Previous BLOG: https://shikuuk.blogspot.com/2026/01/combination-streamlit-and-folium-in-vs.html
I made a Web App that work on Streamlit Cloud. The App draw three concentric circles with the point specified by mouse click as the center and show the name and the address of the center using Python library 'geopy'.
https://2025-draw-circle-on-folium-map.streamlit.app/
Actually, I would like to implement data persistence functionality in a different type of app, but first I will try implementing data persistence in this concentric circle drawing app as practice.
I ask Gemini How implement data persistence functionality. Gemini has three answer.
- To use a Google Spraed Sheet(Gemini is recommended it strongly)
- Streamlit Community Cloud "Secrets" + outside data base
- Automatically Commit to GitHub(Gemini is not recommended this one)
（参考）
1. Google Sheets (Googleスプレッドシート) を使う方法【最も推奨】
スプレッドシートを無料のデータベースとして使う方法です。Streamlitには専用のコネクタ（st.connection）があり、非常に相性が良いです。
仕組み: アプリからGoogle Sheets APIを通じて、直接セルに書き込み・読み込みを行います。
メリット:
Excel感覚でデータの中身を確認・直接編集できる。
無料で、設定も簡単。
スマホのGoogle Sheetsアプリからもデータが見れる。
練習テーマ例: 検索した場所の「緯度・経度・住所」をスプレッドシートに1行ずつ溜めていく「検索履歴機能」。
2. Streamlit Community Cloud "Secrets" + 外部DB
Streamlit Cloudが提供している「Secrets」という管理画面にパスワードなどを保存し、外部のクラウドデータベース（PlanetScale, Supabase, AWS RDSなど）に接続する方法です。
仕組み: 本格的なSQLデータベースに保存します。
メリット:
数万件以上の大量データを高速に扱える。
本格的なWebサービスの開発に近いスキルが身につく。
デメリット:
DBの専門知識（SQLなど）が必要。
無料枠に制限がある場合が多い。
3. GitHubへの自動コミット（非推奨だが練習にはなる）
アプリが自分専用なら、プログラムからGitHubのAPIを使って、CSVファイルを自分自身のリポジトリに「上書きPush」する方法です。
仕組み: アプリが実行されるたびに、GitHub上のファイルを無理やり更新します。
メリット: 外部ツールを一切使わず、GitHubだけで完結する。
デメリット:
PushするたびにStreamlit Cloudが「コードが更新された！」と検知してアプリを再起動させてしまうため、動作が非常に不安定になる。
基本的には「禁じ手」に近い。
I selected the method of 1. to use Google Spread Sheet. Gemini told me the following.
- Create a Google Spread Sheet, and write 'name', 'lat', 'lon' to 1st row
- Set the 'Credantial' for Accessing the Google Spread Sheet in the control of Streamlit Cloud.
- Add 'conn = st.connection("gsheets", type=GSheetsConnection)' to the code and connect.
We may take attantion that Google Spread Sheet create in ourselves Google Drive. In other word, the App in Streamlit Cloud is going to access your Google Drive, and if Spread Sheet's URL( your ID) leak to the others, anyone can rewrite or delete this Spread Sheet. When the App write the Google Spread Sheet from Streamlit Cloud, the Sheet will renew at real time automatically. When proffesional person do like this, they will use a 'service account' in the Google Cloud Console and create an Robot-only account, they will give the editor authority to only its account's e-mail address.
Based on the above, we request Gemini to renew the code. Then Gemini answer me a renew code like below. Additionally to make this App be available oversea, I add the option of selecting the Open Street Map and I add the radius of the three circles as persistence data. Moreover, I add the necessary time and consumption calolie in case of walking and running from the center of circle to circle radius.
import streamlit as st
import folium
from streamlit_folium import st_folium
from folium.features import DivIcon
import math
from geopy.geocoders import Nominatim
from streamlit_gsheets import GSheetsConnection
import datetime
import pandas as pd
# --- ページ設定 ---
st.set_page_config(layout="wide", page_title="同心円エリア描画ツール（試作版）")
st.title("📍 同心円エリア描画ツール（試作版）")
st.markdown("""
### 💡 このツールの活用シーン
* **商圏分析**: 店舗を中心に、徒歩・自転車それぞれの集客範囲を可視化。
* **物件探し・立地評価**: 検討中の物件から駅やスーパーまでの距離感を直感的に把握。
* **防災・避難計画**: 自宅から避難所までの距離や、災害時の影響範囲の目安を確認。
* **健康・ウォーキング**: 指定した範囲の移動による消費カロリーや歩数の目安を把握。
""")
# --- 関数群 ---
def calculate_zoom_level(radius_km):
if radius_km <= 0: return 13
zoom = 14.2 - math.log2(radius_km)
return max(1, min(18, round(zoom)))
@st.cache_data(ttl=3600)
def search_location(query):
try:
geolocator = Nominatim(user_agent="area_analyzer_shikuu_2026_v4")
location = geolocator.geocode(query, language='ja', timeout=10)
if location:
return location.latitude, location.longitude, location.address
return None, None, "地点が見つかりませんでした"
except Exception as e:
return None, None, f"検索エンジン応答エラー: {e}"
@st.cache_data(ttl=3600)
def get_simple_address(lat, lon):
try:
geolocator = Nominatim(user_agent="area_analyzer_shikuu_2026_v4")
location = geolocator.reverse(f"{lat}, {lon}", language='ja')
return location.address if location else "住所が見つかりませんでした"
except:
return "住所取得エラー"
def save_log_to_sheets(user_name, address, lat, lon, r1, r2, r3):
try:
conn = st.connection("gsheets", type=GSheetsConnection)
existing_data = conn.read(ttl=0)
new_row = pd.DataFrame([{
"date": datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
"user_name": user_name,
"address": address,
"lat": lat,
"lon": lon,
"r1": r1,
"r2": r2,
"r3": r3
}])
updated_df = pd.concat([existing_data, new_row], ignore_index=True)
conn.update(data=updated_df)
return True
except:
return False
# --- セッション状態の初期化 ---
if 'clicked_lat' not in st.session_state:
st.session_state.clicked_lat = 35.6812
if 'clicked_lon' not in st.session_state:
st.session_state.clicked_lon = 139.7671
if 'last_search' not in st.session_state:
st.session_state.last_search = ""
if 'r1_val' not in st.session_state: st.session_state.r1_val = 1.0
if 'r2_val' not in st.session_state: st.session_state.r2_val = 2.5
if 'r3_val' not in st.session_state: st.session_state.r3_val = 5.0
# --- サイドバー設定 ---
with st.sidebar:
st.header("👤 ユーザー設定")
# 入力欄
user_name = st.text_input(
"ニックネーム",
value="匿名ユーザー"
)
# 常に表示される注意事項
st.caption("⚠️ プライバシー保護のため本名以外の入力を推奨します。")
st.caption("💡 入力後に下のボタンで前回の設定を復元できます。")
# 復元ボタン
if st.button("前回の続きから再開"):
try:
conn = st.connection("gsheets", type=GSheetsConnection)
df = conn.read(ttl=0)
user_history = df[df['user_name'] == user_name]
if not user_history.empty:
last_record = user_history.iloc[-1]
st.session_state.clicked_lat = float(last_record['lat'])
st.session_state.clicked_lon = float(last_record['lon'])
st.session_state.r1_val = float(last_record['r1'])
st.session_state.r2_val = float(last_record['r2'])
st.session_state.r3_val = float(last_record['r3'])
st.success(f"{user_name}さんの最新データを復元しました")
st.rerun()
else:
st.warning(f"{user_name}さんの履歴が見つかりません")
except:
st.error("履歴の読み込みに失敗しました")
st.markdown("---")
st.header("⚙️ エリア設定")
st.subheader("🔍 キーワード検索")
search_query = st.text_input("地名・住所を入力", placeholder="例：Paris, Tokyo", key="search_input")
search_button = st.button("検索")
# 📜 履歴復元セクション
st.markdown("---")
st.subheader("📜 履歴から復元")
try:
conn = st.connection("gsheets", type=GSheetsConnection)
df_history = conn.read(ttl="5m")
if not df_history.empty:
history_options = df_history.iloc[::-1]['address'].unique()[:10]
selected_h = st.selectbox("過去の地点を選択", ["選択してください"] + list(history_options))
if selected_h != "選択してください":
target = df_history[df_history['address'] == selected_h].iloc[-1]
if st.button("この地点と半径を復元"):
st.session_state.clicked_lat = float(target['lat'])
st.session_state.clicked_lon = float(target['lon'])
st.session_state.r1_val = float(target['r1'])
st.session_state.r2_val = float(target['r2'])
st.session_state.r3_val = float(target['r3'])
st.rerun()
except:
st.caption("履歴の読み込みに失敗しました")
st.markdown("---")
# 半径の設定
sets = []
configs = [
{"id": 1, "key": "r1_val", "def_c": "#FF4B4B", "label": "🔴 円1 (太実線)"},
{"id": 2, "key": "r2_val", "def_c": "#1E90FF", "label": "🔵 円2 (細実線)"},
{"id": 3, "key": "r3_val", "def_c": "#2E8B57", "label": "🟢 円3 (細点線)"}
]
for conf in configs:
st.subheader(conf["label"])
col_r, col_c = st.columns([2, 1])
r = col_r.number_input(f"半径 (km)", min_value=0.0, value=st.session_state[conf["key"]], step=0.5, key=f"r_input_{conf['id']}")
c = col_c.color_picker("色", conf["def_c"], key=f"c{conf['id']}")
st.session_state[conf["key"]] = r
sets.append((r, c))
if (search_query and search_query != st.session_state.last_search) or search_button:
if search_query:
with st.spinner("地点を検索中..."):
res_lat, res_lon, res_address = search_location(search_query)
if res_lat:
st.session_state.clicked_lat = res_lat
st.session_state.clicked_lon = res_lon
st.session_state.last_search = search_query
save_log_to_sheets(user_name, res_address, res_lat, res_lon, sets[0][0], sets[1][0], sets[2][0])
st.rerun()
st.markdown("---")
map_style = st.radio("地図スタイル", ["OpenStreetMap (世界対応)", "地理院 標準地図 (日本)", "地理院 空中写真 (日本)"])
st.markdown("---")
with st.expander("ℹ️ 免責事項・ライセンス"):
st.caption("""
**免責事項**
- 本アプリの計算結果（移動時間、カロリー等）の正確性は保証されません。
- 本アプリの利用により生じた損害について、作者は一切の責任を負いません。
**使用データ・ライセンス**
- **地図データ**:
- [OpenStreetMap](https://www.openstreetmap.org/copyright) (c) OpenStreetMap contributors
- [国土地理院タイル](https://maps.gsi.go.jp/development/ichiran.html)
- **住所検索**: [Nominatim](https://nominatim.org/)
**ライセンス**
MIT License
© 2026 Shikuu Kitashirakawa
""")
# --- 地図表示 ---
current_lat, current_lon = st.session_state.clicked_lat, st.session_state.clicked_lon
focus_r = sets[1][0] if sets[1][0] > 0 else 1.0
zoom_val = calculate_zoom_level(focus_r)
col_map, col_info = st.columns([3, 1])
with col_map:
if map_style == "OpenStreetMap (世界対応)":
m = folium.Map(location=[current_lat, current_lon], zoom_start=zoom_val)
else:
tiles_dict = {
"地理院 標準地図 (日本)": "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
"地理院 空中写真 (日本)": "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg"
}
m = folium.Map(location=[current_lat, current_lon], zoom_start=zoom_val, tiles=tiles_dict[map_style], attr="国土地理院")
folium.Marker([current_lat, current_lon], icon=folium.Icon(color="black", icon="info-sign")).add_to(m)
for i, (r, color) in enumerate(sets):
if r > 0:
weight = 5 if i == 0 else 2
dash = "10, 10" if i == 2 else None
folium.Circle(location=[current_lat, current_lon], radius=r*1000, color=color, weight=weight, dash_array=dash, fill=True, fill_opacity=0.05).add_to(m)
label_lat = current_lat + (r / 111.0)
folium.Marker(location=[label_lat, current_lon], icon=DivIcon(icon_size=(150, 36), icon_anchor=(75, 18),
html=f'<div style="font-size: 9pt; color: {color}; font-weight: bold; text-align: center; background-color: rgba(255,255,255,0.8); border: 1px solid {color}; border-radius: 4px; padding: 1px 4px;">{r} km</div>')).add_to(m)
map_data = st_folium(m, width=None, height=600, key=f"map_{current_lat}_{current_lon}_{zoom_val}", use_container_width=True)
with col_info:
st.subheader("🏠 地点情報")
address = get_simple_address(current_lat, current_lon)
st.info(f"**住所:**\n{address}")
st.markdown("---")
st.subheader("🚶 到達目安・活動量")
st.warning("⚠️ 以下の数値は、地図上の**直線距離**に基づいた理論値です。実際の道路状況により時間はさらに増加します。")
for i, (r, color) in enumerate(sets):
if r > 0:
# --- 到達目安・活動量の計算セクション ---
# 1. 時間計算 (徒歩: 80m/分, 自転車: 250m/分, ランニング: 167m/分)
# ※ランニングは 1km/6分 (時速10km) を想定
walk_time = r * 1000 / 80
bike_time = r * 1000 / 250
run_time = r * 1000 / 167
# 2. 活動量計算 (ランニングの消費カロリーは体重60kgで 1km ≒ 60〜70kcal)
# 徒歩よりも強度が高いため、係数を少し高めに設定することも可能です
steps = r * 1250
calories_walk = r * 60
calories_run = r * 75 # ランニングはエネルギー効率の関係でやや高め
with st.expander(f"円{i+1} ({r} km) の詳細", expanded=True if i==0 else False):
st.markdown(f"""
<div style="border-left: 5px solid {color}; padding-left: 10px;">
<p><b>🏃 徒歩:</b> 約{int(walk_time)}分</p>
<p><b>👟 ランニング:</b> 約{int(run_time)}分 <span style="font-size: 0.8em; color: gray;">(6分/kmペース)</span></p>
<p><b>🚲 自転車:</b> 約{int(bike_time)}分</p>
<hr style="margin: 10px 0;">
<p><b>🔥 消費目安:</b></p>
<ul>
<li>ウォーキング: 約{int(calories_walk)}kcal</li>
<li>ランニング: 約{int(calories_run)}kcal</li>
</ul>
</div>
""", unsafe_allow_html=True)
st.info("🏃 活動量の算出基準")
st.caption("""
- **徒歩**: 分速80m / 消費 60kcal (1km移動時)
- **ランニング**: 分速167m / 消費 75kcal (1km移動時)
- **自転車**: 分速250m
※消費カロリーは体重60kgの標準的な数値を基準に算出しています。
""")
# 地図クリック処理
if map_data and map_data["last_clicked"]:
nl, ng = map_data["last_clicked"]["lat"], map_data["last_clicked"]["lng"]
if abs(nl - st.session_state.clicked_lat) > 0.0001:
st.session_state.clicked_lat, st.session_state.clicked_lon = nl, ng
st.rerun()
OK! I'm just finishing rivicing my code. I run my App. The result of my App become like below. Kuala Lumpur International Airport was designated as the center of the circle and radius was set 10km, 20km, 40km. I think that Kuala Lumpur is far from Kuala Lumpur International Airport than I expected.
But my Google spread sheet has been written anything, when I search some location in my Web App. I try some things which Gemini teach me, but my Web App's data Persistence don't work.
Eventually Gemini said that Google Spread Sheet doesn't work only give the one's URL to Streamlit Cloud seacret setting. Gemini is recommended me that he want me to use Google Cloud for creating Google Spread Sheet API and Google Drive API, but I afraid that my folder and file in my Google Drive is able to see from someone who use my Web APP when I will use Google Drive API.
Therefore I create a new Google Account and Google Drive. But I don't use the new Google Account. I don't know why, but Google suspended my account and I had to re-examine it.
I wait to next step for implement of data persistence with My App until being available my new Google Drive.
Next day, I accept from Google's Authorities that my Google Account is Available. Right away, I try to use my Google Spread Sheet and my Google Drive. As the result, I succeed to use them. the part of its process is like below.
As a result of enabling these APIs, finally I can use my App.
I notice that it's convinient to be able to search by longitude, latitude coordinate. I try to add the function of searching by longitude and latitude. I consult this to GEMINI. He answer the code like below.
import streamlit as st
import folium
from streamlit_folium import st_folium
from folium.features import DivIcon
import math
from geopy.geocoders import Nominatim
from streamlit_gsheets import GSheetsConnection
import datetime
import pandas as pd
# --- ページ設定 ---
st.set_page_config(layout="wide", page_title="同心円エリア描画ツール（統合完成版）")
st.title("📍 同心円エリア描画ツール（統合完成版）")
# --- 関数群 ---
def calculate_zoom_level(radius_km):
if radius_km <= 0: return 13
zoom = 14.2 - math.log2(radius_km)
return max(1, min(18, round(zoom)))
@st.cache_data(ttl=3600)
def search_location(query):
try:
# User-Agentをさらにユニークに
geolocator = Nominatim(user_agent="shikuu_analyzer_2026_final_safe")
location = geolocator.geocode(query, language='ja', timeout=10)
if location:
return location.latitude, location.longitude, location.address
return None, None, "地点が見つかりませんでした"
except Exception as e:
return None, None, f"検索エラー: {e}"
def get_simple_address(lat, lon):
try:
geolocator = Nominatim(user_agent="shikuu_analyzer_2026_final_safe")
location = geolocator.reverse(f"{lat}, {lon}", language='ja', timeout=10)
if location:
return location.address
return "住所が見つかりませんでした"
except Exception as e:
return f"⚠️ サーバー混雑中（時間をおいて再度お試しください）"
def save_log_to_sheets(user_name, address, lat, lon, r1, r2, r3):
try:
conn = st.connection("gsheets", type=GSheetsConnection)
existing_data = conn.read(ttl=0)
new_row = pd.DataFrame([{
"date": datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
"user_name": user_name, "address": address,
"lat": lat, "lon": lon, "r1": r1, "r2": r2, "r3": r3
}])
updated_df = pd.concat([existing_data, new_row], ignore_index=True)
conn.update(data=updated_df)
return True
except Exception as e:
st.error(f"⚠️ 保存エラー: {e}")
return False
# --- セッション状態の初期化 ---
if 'clicked_lat' not in st.session_state: st.session_state.clicked_lat = 35.6812
if 'clicked_lon' not in st.session_state: st.session_state.clicked_lon = 139.7671
if 'last_search' not in st.session_state: st.session_state.last_search = ""
if 'r1_val' not in st.session_state: st.session_state.r1_val = 1.0
if 'r2_val' not in st.session_state: st.session_state.r2_val = 2.5
if 'r3_val' not in st.session_state: st.session_state.r3_val = 5.0
# --- サイドバー設定 ---
with st.sidebar:
st.header("👤 ユーザー設定")
user_name_input = st.text_input("ニックネーム", value="", placeholder="匿名ユーザー")
display_name = user_name_input if user_name_input else "匿名ユーザー"
if st.button("前回の続きから再開"):
try:
conn = st.connection("gsheets", type=GSheetsConnection)
df = conn.read(ttl=0)
user_history = df[df['user_name'] == display_name]
if not user_history.empty:
last_record = user_history.iloc[-1]
st.session_state.clicked_lat = float(last_record['lat'])
st.session_state.clicked_lon = float(last_record['lon'])
st.session_state.r1_val = float(last_record['r1'])
st.session_state.r2_val = float(last_record['r2'])
st.session_state.r3_val = float(last_record['r3'])
st.success(f"{display_name}さんのデータを復元しました")
st.rerun()
else:
st.warning(f"{display_name}さんの履歴が見つかりません")
except:
st.error("履歴の読み込みに失敗しました")
st.markdown("---")
st.header("⚙️ エリア設定")
# 1. まず「空のセット」を用意しておく（NameError対策）
# この後の半径設定ループで中身を埋めますが、先に変数だけ宣言します
sets = []
search_query = st.text_input("地名・住所で検索", placeholder="例：高知城", key="search_input")
search_button = st.button("検索実行")
# 📜 履歴から復元（全ユーザー用）
st.subheader("📜 履歴から復元")
try:
conn = st.connection("gsheets", type=GSheetsConnection)
df_history = conn.read(ttl="1m")
if not df_history.empty:
# 重複を除いた最新10件の住所を表示
history_options = df_history.iloc[::-1]['address'].unique()[:10]
selected_h = st.selectbox("過去の地点を選択", ["選択してください"] + list(history_options))
if selected_h != "選択してください":
target = df_history[df_history['address'] == selected_h].iloc[-1]
if st.button("この地点を復元"):
st.session_state.clicked_lat = float(target['lat'])
st.session_state.clicked_lon = float(target['lon'])
st.session_state.r1_val = float(target['r1'])
st.session_state.r2_val = float(target['r2'])
st.session_state.r3_val = float(target['r3'])
st.rerun()
except:
st.caption("履歴の読み込みに失敗しました")
st.markdown("---")
# --- サイドバー：エリア設定内 ---
st.subheader("📍 座標指定で移動")
col_lat, col_lon = st.columns(2)
input_lat = col_lat.number_input("緯度", value=st.session_state.clicked_lat, format="%.6f", key="coord_lat")
input_lon = col_lon.number_input("経度", value=st.session_state.clicked_lon, format="%.6f", key="coord_lon")
if st.button("座標へ移動"):
st.session_state.clicked_lat = input_lat
st.session_state.clicked_lon = input_lon
# ★修正：setsを使わず、session_stateから直接半径を取得する
save_log_to_sheets(
display_name,
f"座標直接入力({input_lat:.4f}, {input_lon:.4f})",
input_lat, input_lon,
st.session_state.r1_val, # 円1の半径
st.session_state.r2_val, # 円2の半径
st.session_state.r3_val # 円3の半径
)
st.toast(f"📍 座標 {input_lat}, {input_lon} へ移動しました")
st.rerun()
st.markdown("---")
# この後に「半径の設定（configsのループ）」を記述
# 半径の設定
configs = [
{"id": 1, "key": "r1_val", "def_c": "#FF4B4B", "label": "🔴 円1 (太実線)"},
{"id": 2, "key": "r2_val", "def_c": "#1E90FF", "label": "🔵 円2 (細実線)"},
{"id": 3, "key": "r3_val", "def_c": "#2E8B57", "label": "🟢 円3 (細点線)"}
]
for conf in configs:
st.subheader(conf["label"])
col_r, col_c = st.columns([2, 1])
r = col_r.number_input("半径(km)", min_value=0.0, value=st.session_state[conf["key"]], step=0.5, key=f"r_in_{conf['id']}")
c = col_c.color_picker("色", conf["def_c"], key=f"c_{conf['id']}")
st.session_state[conf["key"]] = r
sets.append((r, c))
# --- 検索実行ロジック ---
if search_button or (search_query and search_query != st.session_state.last_search):
if search_query:
with st.spinner("地点を検索中..."):
res_lat, res_lon, res_address = search_location(search_query)
if res_lat:
# 地図の座標と検索履歴を更新
st.session_state.clicked_lat = res_lat
st.session_state.clicked_lon = res_lon
st.session_state.last_search = search_query
# スプレッドシートへ保存
save_log_to_sheets(display_name, res_address, res_lat, res_lon, sets[0][0], sets[1][0], sets[2][0])
# 画面をリフレッシュして地図を移動させる
st.rerun()
else:
st.error("❓ 地点が見つかりませんでした")
st.markdown("---")
map_style = st.radio("地図スタイル", ["OpenStreetMap", "地理院 標準地図", "地理院 空中写真"])
st.markdown("---")
with st.expander("ℹ️ 免責事項・ライセンス"):
st.caption("""
**免責事項**
- 本アプリの計算結果（移動時間、カロリー等）の正確性は保証されません。
- [OpenStreetMap](https://www.openstreetmap.org/copyright) (c) OpenStreetMap contributors
- [国土地理院タイル](https://maps.gsi.go.jp/development/ichiran.html)
- MIT License © 2026 Shikuu Kitashirakawa
""")
# --- メイン表示エリア ---
current_lat, current_lon = st.session_state.clicked_lat, st.session_state.clicked_lon
zoom_val = calculate_zoom_level(sets[1][0] if sets[1][0] > 0 else 1.0)
col_map, col_info = st.columns([3, 1])
with col_map:
# 地図タイルの設定
tiles = "OpenStreetMap"
attr = "OpenStreetMap contributors"
if map_style == "地理院 標準地図":
tiles = "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"
attr = "国土地理院"
elif map_style == "地理院 空中写真":
tiles = "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg"
attr = "国土地理院"
m = folium.Map(location=[current_lat, current_lon], zoom_start=zoom_val, tiles=tiles, attr=attr)
folium.Marker([current_lat, current_lon], icon=folium.Icon(color="red", icon="info-sign")).add_to(m)
for i, (r, color) in enumerate(sets):
if r > 0:
weight = 4 if i == 0 else 2
dash = "10, 10" if i == 2 else None
folium.Circle(location=[current_lat, current_lon], radius=r*1000, color=color, weight=weight, dash_array=dash, fill=True, fill_opacity=0.07).add_to(m)
# 距離ラベル
folium.Marker(location=[current_lat + (r / 111.0), current_lon], icon=DivIcon(icon_size=(150,36), icon_anchor=(75,18),
html=f'<div style="font-size: 9pt; color: {color}; font-weight: bold; text-align: center; background: white; border: 1px solid {color}; border-radius: 4px; padding: 2px;">{r} km</div>')).add_to(m)
map_data = st_folium(m, width=None, height=600, key=f"map_{current_lat}_{current_lon}", use_container_width=True)
with col_info:
st.subheader("🏠 地点情報")
if st.button("🗺️ 住所を表示する"):
with st.spinner("住所を取得中..."):
address = get_simple_address(current_lat, current_lon)
st.info(f"**住所:**\n{address}")
else:
st.caption("※サーバー負荷軽減のため住所はボタン取得式です。")
st.markdown("---")
st.subheader("🚶 到達目安・活動量")
st.warning("⚠️ 直線距離に基づく理論値です。")
for i, (r, color) in enumerate(sets):
if r > 0:
with st.expander(f"円{i+1} ({r} km) の詳細", expanded=True if i==0 else False):
st.markdown(f"""
<div style="border-left: 5px solid {color}; padding-left: 10px;">
<b>🚶 徒歩:</b> 約{int(r*1000/80)}分<br>
<b>👟 ランニング:</b> 約{int(r*1000/167)}分 (6分/km)<br>
<b>🚲 自転車:</b> 約{int(r*1000/250)}分
<hr style="margin: 5px 0;">
<b>🔥 消費目安:</b><br>
- ウォーキング: 約{int(r*60)}kcal<br>
- ランニング: 約{int(r*75)}kcal
</div>
""", unsafe_allow_html=True)
st.info("🏃 活動量の算出基準")
st.caption("徒歩: 80m/分, ラン: 167m/分, 自転車: 250m/分\n(体重60kg基準)")
# 地図クリック処理
if map_data and map_data["last_clicked"]:
nl, ng = map_data["last_clicked"]["lat"], map_data["last_clicked"]["lng"]
if abs(nl - st.session_state.clicked_lat) > 0.0001:
st.session_state.clicked_lat, st.session_state.clicked_lon = nl, ng
# クリック時は住所取得を省き高速化
save_log_to_sheets(display_name, f"地図クリック地点({nl:.4f}, {ng:.4f})", nl, ng, sets[0][0], sets[1][0], sets[2][0])
st.rerun()
First image in this BLOG, is made from this code.
I push this code to my GitHub and upload to Streamlit Cloud(URL is below).
URL: https://2025-draw-circle-on-folium-map.streamlit.app/
I try to search longitude zero and latitude zero point, my result is like below. The point zero and zero is located about 500 km south of Ghana and about 1000km west of Gabon on South Atlantic Ocean
Moreover I try to draw 1000km circle, its center is located Tokyo. I understand that Hokaido, Kagoshima, Titi Island, Haha Island is near this circle.
コメント
コメントを投稿