streamlitでfoliumの地図を表示したい

はじめに

streamlitでは緯度と経度のリストを渡すだけで地図を表示できるメソッドが用意されており、かんたんに綺麗な地図をつくれますが、ポップアップを表示したり、地図やマーカーの色を変えたりなどより機能の多いfoliumを使いたい場合の話です

streamlit==0.76.0
folium==0.11.0

streamlit-foliumモジュール

このモジュールを用いて、Example通り、folium_staticというメソッドにfoium.Mapのオブジェクトを渡せば表示ができます

ですがこの関数、widthとheightを固定値で指定する必要があります

# https://github.com/randyzwitch/streamlit-folium/blob/master/streamlit_folium/__init__.py#L79

def folium_static(fig, width=700, height=500):
    # if Map, wrap in Figure
    if isinstance(fig, folium.Map):
        fig = folium.Figure().add_child(fig)
        return components.html(
            fig.render(), height=(fig.height or height) + 10, width=width
            )

    # if DualMap, get HTML representation
    elif isinstance(fig, plugins.DualMap):
        return components.html(
            fig._repr_html_(), height=height + 10, width=width
        )

MapのHTMLを直接渡して、widthを可変にする

heightならまだしも、あらゆる画面幅が考えられる状況でwidthをピクセルで固定するのはちょっと...ということで、この関数の中身をそのまま実装して、widthを指定しなければいい感じに可変になるので次のように書けます

st.components.v1.html(folium.Figure().add_child(map_).render(), height=500)

参考

• https://discuss.streamlit.io/t/ann-streamlit-folium-a-component-for-rendering-folium-maps/4367