こんにちは、JS2IIUです。
前回の記事ではst.mapを使って地図上に地点をプロットする方法を見てきました。今回はstreamlit-foliumを使ってさらに高度な地図プロットを試していきます。今回もよろしくお願いします。
1. はじめに
Streamlitには、簡単に地図を表示できるst.mapという便利な機能があります。
しかし、「もっと細かく地図をカスタマイズしたい」「マーカーをたくさん置きたい」「レイヤーを切り替えたい」など、より高度な地図表示をしたいと感じることはありませんか？
そんなときに活躍するのが、Foliumライブラリと、それをStreamlitで使いやすくするstreamlit-foliumパッケージです！
この記事では、FoliumとStreamlitを組み合わせて、インタラクティブな地図を作成する方法を、わかりやすくステップバイステップで解説していきます！
2. Foliumとは？
Foliumの特徴
Folium（フォリウム）は、Pythonから簡単に美しい地図を作成できるライブラリです。
JavaScriptライブラリのLeaflet.jsをPython用にラップしており、コード数行で地図にマーカーや図形を描画することができます。
Folium — Folium 0.19.5 documentation
Foliumでできること
- 地図を表示する
- マーカーを置く
- 線やポリゴンを描く
- 地図のレイヤーを切り替える
- GeoJSONファイルを読み込んでエリアを表示する
- 地図のスタイル（ズームレベルや初期位置）を自由に設定できる
など、地図に関するさまざまなことが簡単にできるのが特徴です！
Folium単体での簡単な地図表示例
まずはFolium単体で地図を表示するコードを見てみましょう。
import folium
# 地図オブジェクトを作成
m = folium.Map(location=[35.6812, 139.7671], zoom_start=12) # 東京駅周辺
# 地図をHTMLファイルに保存
m.save('map.html')このコードを実行すると、map.htmlというファイルができ、ブラウザで地図を見ることができます！
3. streamlit-foliumとは？
通常、FoliumはHTMLファイルを作成してブラウザで見るスタイルですが、
Streamlit上で直接表示できるようにするのが、streamlit-foliumです！
使い方はとても簡単で、folium_static関数を使うだけでOKです。
4. セットアップ方法
まずは必要なパッケージをインストールしましょう！
手順1. パッケージのインストール
ターミナル（コマンドプロンプト）で、以下のコマンドを実行します。
pip install streamlit folium streamlit-foliumこれで、Streamlit本体、Folium、streamlit-foliumがまとめてインストールできます。
手順2. インストール確認
インストールが完了したら、次のコードで動作確認してみましょう！
import streamlit as st
import folium
from streamlit_folium import folium_static
# Foliumで地図を作成
m = folium.Map(location=[35.6812, 139.7671], zoom_start=12)
# Streamlit上に地図を表示
folium_static(m)このコードを保存して、以下のコマンドで起動してみてください。
streamlit run ファイル名.pyうまくいけば、Streamlitアプリの中に地図が表示されます！
5. 実践：StreamlitアプリでFolium地図を表示する
5.1. 基本の地図表示
まずは、最もシンプルな地図を表示してみましょう。
import streamlit as st
import folium
from streamlit_folium import folium_static
# ページタイトル
st.title("Streamlit × Folium 地図表示デモ")
# 地図作成
m = folium.Map(location=[35.6812, 139.7671], zoom_start=12)
# 地図を表示
folium_static(m)これだけで、Streamlitアプリにインタラクティブな地図が表示されます！
5.2. マーカーを追加する
次に、特定の地点にマーカーを追加してみましょう。
import streamlit as st
import folium
from streamlit_folium import folium_static
st.title("Streamlit × Folium マーカー追加")
# 地図作成
m = folium.Map(location=[35.6812, 139.7671], zoom_start=12)
# マーカー追加
folium.Marker(
location=[35.6812, 139.7671],
popup="東京駅",
tooltip="クリックしてね"
).add_to(m)
# 地図を表示
folium_static(m)popup：マーカーをクリックしたときに表示される吹き出しtooltip：マウスオーバーしたときに表示されるヒント
が設定できます！
5.3. 複数マーカーやレイヤーコントロール
さらに、複数のマーカーを追加して、レイヤーコントロール（表示のON/OFF切り替え）も試してみましょう。
import streamlit as st
import folium
from streamlit_folium import folium_static
from folium import FeatureGroup, LayerControl
st.title("Streamlit × Folium 複数マーカーとレイヤー")
# 地図作成
m = folium.Map(location=[35.6812, 139.7671], zoom_start=10)
# レイヤーグループを作成
group1 = FeatureGroup(name="主要駅")
group2 = FeatureGroup(name="観光地")
# 主要駅のマーカー
group1.add_child(folium.Marker(location=[35.6812, 139.7671], popup="東京駅"))
group1.add_child(folium.Marker(location=[35.6895, 139.6917], popup="新宿駅"))
# 観光地のマーカー
group2.add_child(folium.Marker(location=[35.7100, 139.8107], popup="浅草寺"))
group2.add_child(folium.Marker(location=[35.6586, 139.7454], popup="東京タワー"))
# 地図にグループを追加
m.add_child(group1)
m.add_child(group2)
# レイヤーコントロールを追加
m.add_child(LayerControl())
# 地図を表示
folium_static(m)このように、カテゴリごとにマーカーをグループ化して、チェックボックスで切り替えることもできます！
6. 応用例紹介
6.1. 現在地取得とマッピング（簡単版）
簡単な現在地のマッピングも可能です。たとえば、緯度・経度を入力してその場所にマーカーを置くアプリも作れます！
import streamlit as st
import folium
from streamlit_folium import folium_static
st.title("Streamlit × Folium 現在地マッピング")
# 緯度と経度を入力
lat = st.number_input('緯度を入力', value=35.6812)
lon = st.number_input('経度を入力', value=139.7671)
# 地図作成
m = folium.Map(location=[lat, lon], zoom_start=12)
folium.Marker(location=[lat, lon], popup="ここです！").add_to(m)
# 地図を表示
folium_static(m)
6.2. GeoJSONデータを使ったエリア表示
さらにレベルアップすると、GeoJSONファイルを読み込んでエリアを表示することもできます！
import streamlit as st
import folium
from streamlit_folium import folium_static
st.title("Streamlit × Folium GeoJSON表示")
# 地図作成
m = folium.Map(location=[35.6812, 139.7671], zoom_start=10)
# サンプルのGeoJSON（東京都の簡単な範囲）
geojson_data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "Tokyo"},
"geometry": {
"type": "Polygon",
"coordinates": [[[139.5, 35.5], [139.9, 35.5], [139.9, 35.9], [139.5, 35.9], [139.5, 35.5]]]
}
}
]
}
# GeoJSONを地図に追加
folium.GeoJson(geojson_data, name="Tokyo Area").add_to(m)
# 地図を表示
folium_static(m)
7. まとめ
今回は、StreamlitとFolium、そしてstreamlit-foliumを使って、
「より高度な地図表示」を簡単に作成する方法を紹介しました！
ポイントを振り返ると…
streamlit-foliumを使えば、Foliumの機能をそのままStreamlit上で使える- マーカー、レイヤー、GeoJSONなど、細かいカスタマイズができる
- しかも、数十行のPythonコードだけで実現できる！
地図アプリを作るハードルがぐっと下がりますね！
ぜひあなたも、オリジナルの地図アプリにチャレンジしてみてください！
8. 参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント