こんにちは、JS2IIUです。
データ分析において、位置情報を含むデータを扱うことはよくあります。例えば、顧客の住所、店舗の場所、交通機関のルートなど、様々なデータが位置情報と関連しています。これらのデータを効果的に可視化するために、地図上にプロットすることは非常に有効です。
Pythonでは、folium というライブラリを使うことで、インタラクティブな地図を簡単に作成できます。foliumは、OpenStreetMapをベースマップとして、マーカーやヒートマップ、ポリゴンなど、様々な方法でデータを可視化できる便利なツールです。foliumのマップオブジェクトをStreamlit上に表示する方法を見ていきましょう。今回もよろしくお願いします。
streamlit-foliumとは？
streamlit-foliumは、Streamlitでfoliumの地図を簡単に表示するためのライブラリです。foliumで作成した地図オブジェクトをstreamlit-foliumの関数に渡すだけで、Streamlitアプリケーションにインタラクティブな地図を埋め込むことができます。これにより、Streamlitアプリケーション上で、地図の拡大・縮小、ドラッグ、マーカーのクリックなど、foliumのインタラクティブな機能をそのまま利用することができます。
インストール方法
streamlit-foliumとfoliumをインストールするには、以下のコマンドをターミナルで実行します。
pip install streamlit-folium foliumstreamlit-foliumの使い方
streamlit-foliumを使うのは非常に簡単です。以下の手順に従ってください。
- foliumで地図オブジェクトを作成する
folium.Map()関数を使って、地図の中心座標、ズームレベルなどを設定します。folium.Marker()関数やfolium.CircleMarker()関数などを使って、地図上にマーカーや円などを追加します。
- streamlit-foliumの
st_folium関数に地図オブジェクトを渡すst_folium(m)のように、作成した地図オブジェクトmをst_folium()関数に渡します。
サンプルプログラム
それでは、実際にstreamlit-foliumを使って、駅とその利用者数を地図上にプロットしてみましょう。
駅の位置データ、利用者データは、JS2IIU-MHのGitHubにあげたものを読み込ませています。なお、こちらの読み込ませるデータは生成AIで作成しているため、必ずしも正確ではありません。ご注意ください。
import streamlit as st
import folium
from streamlit_folium import st_folium
import pandas as pd
# データの読み込み
# 今回はサンプルデータとして、駅名、緯度、経度、1日の利用者数のデータを使います。
df = pd.read_csv('https://raw.githubusercontent.com/JS2IIU-MH/Streamlit_sample_data/refs/heads/main/data/yamanote_line.csv')
# 地図オブジェクトを作成
# 地図の中心は皇居付近に設定し、ズームレベルは11に設定しています。
m = folium.Map(location=[35.6863581,139.7502537], zoom_start=11.5)
# 各駅にマーカーを追加
# `CircleMarker`を使って、駅の位置に円形のマーカーを配置します。
# 円の半径は、駅の利用者数に比例するように設定しています。
for i in range(len(df)):
folium.CircleMarker(
location=[df.iloc[i]['latitude'], df.iloc[i]['longitude']], # マーカーの緯度経度を設定
radius=df.iloc[i]['daily_users'] / 10000, # 利用者数に応じて円の大きさを変える
popup=f"{df.iloc[i]['station_name']}: {df.iloc[i]['daily_users']}", # マーカーをクリックしたときに表示されるポップアップを設定
tooltip=df.iloc[i]['station_name'], # マーカーにマウスオーバーしたときに表示されるツールチップを設定
color="blue", # マーカーの枠線の色を設定
fill=True, # マーカーを塗りつぶすかどうかを設定
fill_color="blue" # マーカーの塗りつぶしの色を設定
).add_to(m) # 作成したマーカーを地図に追加
# Streamlitに地図を表示
st.title("Yamanote Line Stations")
st_folium(m)このプログラムを実行すると、Streamlitアプリケーションに東京の駅とその利用者数を示すインタラクティブな地図が表示されます。円の大きさは駅の利用者数に対応しており、円をクリックすると駅名と利用者数が表示されます。
では、コードを詳しく見ていきましょう。
1. ライブラリのインポート
import streamlit as st
import folium
from streamlit_folium import st_folium
import pandas as pdstreamlit: Streamlitの機能を使うために必要なライブラリです。folium: 地図を作成するためのライブラリです。streamlit_folium: Streamlitでfoliumの地図を表示するためのライブラリです。pandas: データを扱うためのライブラリです。CSVファイルの読み込みなどに使用します。
2. データの読み込み
df = pd.read_csv('https://raw.githubusercontent.com/JS2IIU-MH/Streamlit_sample_data/refs/heads/main/data/yamanote_line.csv')pd.read_csv()関数を使って、指定されたURLからCSVファイルを読み込み、dfという名前のDataFrameに格納しています。- このCSVファイルには、山手線の駅名、緯度、経度、1日の利用者数のデータが含まれています。
3. 地図オブジェクトの作成
m = folium.Map(location=[35.689722, 139.700556], zoom_start=12)folium.Map()関数を使って、地図オブジェクトを作成し、mという変数に格納しています。location引数で地図の中心座標を指定しています。ここでは、新宿駅の緯度経度を指定しています。zoom_start引数で地図の初期ズームレベルを指定しています。ここでは、12に設定しています。
4. 各駅にマーカーを追加
for i in range(len(df)):
folium.CircleMarker(
location=[df.iloc[i]['latitude'], df.iloc[i]['longitude']], # マーカーの緯度経度を設定
radius=df.iloc[i]['daily_users'] / 10000, # 利用者数に応じて円の大きさを変える
popup=f"{df.iloc[i]['station_name']}: {df.iloc[i]['daily_users']}", # マーカーをクリックしたときに表示されるポップアップを設定
tooltip=df.iloc[i]['station_name'], # マーカーにマウスオーバーしたときに表示されるツールチップを設定
color="blue", # マーカーの枠線の色を設定
fill=True, # マーカーを塗りつぶすかどうかを設定
fill_color="blue" # マーカーの塗りつぶしの色を設定
).add_to(m) # 作成したマーカーを地図に追加forループを使って、DataFrameの各行（各駅）に対して処理を繰り返しています。folium.CircleMarker()関数を使って、円形のマーカーを作成しています。location引数でマーカーの緯度経度を指定しています。DataFrameから各駅の緯度経度を取得して設定しています。radius引数で円の半径を指定しています。ここでは、各駅の利用者数を10000で割った値を半径に設定することで、利用者数が多い駅ほど大きな円になるようにしています。popup引数でマーカーをクリックしたときに表示されるポップアップの内容を指定しています。ここでは、駅名と利用者数を表示するように設定しています。tooltip引数でマーカーにマウスオーバーしたときに表示されるツールチップの内容を指定しています。ここでは、駅名を表示するように設定しています。color引数でマーカーの枠線の色を指定しています。ここでは、青色に設定しています。fill引数でマーカーを塗りつぶすかどうかを指定しています。ここでは、Trueに設定して塗りつぶしています。fill_color引数でマーカーの塗りつぶしの色を指定しています。ここでは、青色に設定しています。
.add_to(m)で作成したマーカーを地図オブジェクトmに追加しています。
5. Streamlitに地図を表示
st.title("Yamanote Line Stations")
st_folium(m)st.title()関数でStreamlitアプリケーションのタイトルを設定しています。st_folium(m)関数でfoliumで作成した地図オブジェクトmをStreamlitアプリケーションに表示しています。
このプログラムを実行すると、Streamlitアプリケーションが起動し、ブラウザに山手線の駅とその利用者数を示すインタラクティブな地図が表示されます。地図を拡大・縮小したり、ドラッグしたり、マーカーをクリックして駅名と利用者数を確認したりすることができます。
まとめ
streamlit-foliumは、Streamlitでfoliumの地図を簡単に表示できる便利なライブラリです。Streamlitで位置情報を含むデータを扱う際には、ぜひstreamlit-foliumを活用して、インタラクティブな地図を作成してみてください。
コメント