Folium を使って 地図を表示する の続きです。
Folium にてマーカーのポップアップ を表示するには
folium: Marker の popup パラメータを設定する。
popup パラメータには 下記のものが設定できる。
- 文字列,
- HTML 文字列,
- folium.Popup
文字列
文字列を表示する
name = 'Yokohama Station' folium.Marker(location=[lat, lon], popup=name).add_to(map)
HTML 文字列
(1) 文字列を赤く表示する
FORMAT_HTML ='<b><font color="{color}">{name}</font></b>' html =FORMAT_HTML.format(color='red', name=name) folium.Marker(location=[lat, lon], popup=html).add_to(map)
(2) リンクを表示して クリックするとWEBページを開く
name = 'Yokohama Station' href= 'https://en.wikipedia.org/wiki/Yokohama_Station' FORMAT_A_TAG = '<a href="{href}" target="_blank">{name}</a>' html =FORMAT_A_TAG.format(href=href, name=name) folium.Marker(location=[lat, lon], popup=html).add_to(map)
(3) 画像を表示する
url_img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Yokohama_sta._2022.jpg/320px-Yokohama_sta._2022.jpg' FORMAT_IMG = '<img src="{src}" />' html =FORMAT_IMG.format(src=url_img) folium.Marker(location=[lat, lon], popup=html).add_to(map)
folium.Popup
リンクを表示して クリックすると ポップアップの中で WEBページを開く
branca library が必要
import branca name = 'Yokohama Station' href= 'https://en.wikipedia.org/wiki/Yokohama_Station' html =FORMAT_A_TAG.format(href=href, name=name) iframe = branca.element.IFrame(html=html, width=300, height=500) popup = folium.Popup(iframe, max_width=300) folium.Marker(location=[lat, lon], popup=popup).add_to(map)
日本語
単に日本語の文字列を設定すると、
縦長に表示される。
name_ja = '横浜駅' folium.Marker(location=[lat, lon], popup=name_ja).add_to(map)
folium.Popup の max_width を設定すると良い。
name_ja = '横浜駅' WIDTH = 100 popup = folium.Popup(name_ja, max_width=WIDTH) folium.Marker(location=[lat, lon], popup=popup).add_to(map)
folium.Vega
下記の例題と同じ
Vincent/Vega and Altair/VegaLite Markers
folium: Vega でグラフを作成し ポップアップに表示する
プログラムはGitHubに公開した。
https://github.com/ohwada/World_Countries/tree/main/folium/custom_popup