サイトアイコン アマチュア無線局JS2IIU

【Streamlit】foliumの地図をインタラクティブに表示する

JS2IIU

こんにちは、JS2IIUです。
データ分析において、位置情報を含むデータを扱うことはよくあります。例えば、顧客の住所、店舗の場所、交通機関のルートなど、様々なデータが位置情報と関連しています。これらのデータを効果的に可視化するために、地図上にプロットすることは非常に有効です。

Pythonでは、folium というライブラリを使うことで、インタラクティブな地図を簡単に作成できます。foliumは、OpenStreetMapをベースマップとして、マーカーやヒートマップ、ポリゴンなど、様々な方法でデータを可視化できる便利なツールです。foliumのマップオブジェクトをStreamlit上に表示する方法を見ていきましょう。今回もよろしくお願いします。

streamlit-foliumとは？

streamlit-foliumは、Streamlitでfoliumの地図を簡単に表示するためのライブラリです。foliumで作成した地図オブジェクトをstreamlit-foliumの関数に渡すだけで、Streamlitアプリケーションにインタラクティブな地図を埋め込むことができます。これにより、Streamlitアプリケーション上で、地図の拡大・縮小、ドラッグ、マーカーのクリックなど、foliumのインタラクティブな機能をそのまま利用することができます。

Folium — Folium 0.20.0 documentation
python-visualization.github.io
streamlit folium documentation
Run tests each PR
folium.streamlit.app

インストール方法

streamlit-foliumとfoliumをインストールするには、以下のコマンドをターミナルで実行します。

Bash
pip install streamlit-folium folium

streamlit-foliumの使い方

streamlit-foliumを使うのは非常に簡単です。以下の手順に従ってください。

  1. foliumで地図オブジェクトを作成する
    • folium.Map()関数を使って、地図の中心座標、ズームレベルなどを設定します。
    • folium.Marker()関数やfolium.CircleMarker()関数などを使って、地図上にマーカーや円などを追加します。
  2. streamlit-foliumのst_folium関数に地図オブジェクトを渡す
    • st_folium(m)のように、作成した地図オブジェクト m を st_folium() 関数に渡します。

サンプルプログラム

それでは、実際にstreamlit-foliumを使って、駅とその利用者数を地図上にプロットしてみましょう。

駅の位置データ、利用者データは、JS2IIU-MHのGitHubにあげたものを読み込ませています。なお、こちらの読み込ませるデータは生成AIで作成しているため、必ずしも正確ではありません。ご注意ください。

Python
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. ライブラリのインポート

Python
import streamlit as st
import folium
from streamlit_folium import st_folium
import pandas as pd

2. データの読み込み

Python
df = pd.read_csv('https://raw.githubusercontent.com/JS2IIU-MH/Streamlit_sample_data/refs/heads/main/data/yamanote_line.csv')

3. 地図オブジェクトの作成

Python
m = folium.Map(location=[35.689722, 139.700556], zoom_start=12)

4. 各駅にマーカーを追加

Python
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)  # 作成したマーカーを地図に追加

5. Streamlitに地図を表示

Python
st.title("Yamanote Line Stations")
st_folium(m)

このプログラムを実行すると、Streamlitアプリケーションが起動し、ブラウザに山手線の駅とその利用者数を示すインタラクティブな地図が表示されます。地図を拡大・縮小したり、ドラッグしたり、マーカーをクリックして駅名と利用者数を確認したりすることができます。

まとめ

streamlit-foliumは、Streamlitでfoliumの地図を簡単に表示できる便利なライブラリです。Streamlitで位置情報を含むデータを扱う際には、ぜひstreamlit-foliumを活用して、インタラクティブな地図を作成してみてください。

参考情報

モバイルバージョンを終了