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

【Streamlit】より高度な地図表示：streamlit-folium連携

JS2IIU

こんにちは、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 — Folium 0.19.5 documentation
python-visualization.github.io

Foliumでできること

など、地図に関するさまざまなことが簡単にできるのが特徴です！

Folium単体での簡単な地図表示例

まずはFolium単体で地図を表示するコードを見てみましょう。

Python
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. パッケージのインストール

ターミナル（コマンドプロンプト）で、以下のコマンドを実行します。

Bash
pip install streamlit folium streamlit-folium

これで、Streamlit本体、Folium、streamlit-foliumがまとめてインストールできます。

手順2. インストール確認

インストールが完了したら、次のコードで動作確認してみましょう！

Python
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)

このコードを保存して、以下のコマンドで起動してみてください。

Bash
streamlit run ファイル名.py

うまくいけば、Streamlitアプリの中に地図が表示されます！

5. 実践：StreamlitアプリでFolium地図を表示する

5.1. 基本の地図表示

まずは、最もシンプルな地図を表示してみましょう。

Python
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. マーカーを追加する

次に、特定の地点にマーカーを追加してみましょう。

Python
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)

が設定できます！

5.3. 複数マーカーやレイヤーコントロール

さらに、複数のマーカーを追加して、レイヤーコントロール（表示のON/OFF切り替え）も試してみましょう。

Python
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. 現在地取得とマッピング（簡単版）

簡単な現在地のマッピングも可能です。たとえば、緯度・経度を入力してその場所にマーカーを置くアプリも作れます！

Python
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ファイルを読み込んでエリアを表示することもできます！

Python
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を使って、
「より高度な地図表示」を簡単に作成する方法を紹介しました！

ポイントを振り返ると…

地図アプリを作るハードルがぐっと下がりますね！

ぜひあなたも、オリジナルの地図アプリにチャレンジしてみてください！

8. 参考リンク

最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。

最後まで読んでいただきありがとうございます。

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