Ver0.4

folium で作る地図に、画像の入ったポップアップマーカーを入れる方法

串団子

#!/usr/bin/env python3
#foliumでのpopupに画像を表示する方法
import folium
from folium.features import DivIcon
#==============================
webfile_name = 'image_popup_sample_Ver0.8.html'

#始めに表示される地図の中心点の緯度、経度
center_location=[34.02147576216051,130.9209636693177]

# 地図オブジェクトを作成_デフォルト_この行無くても走る
m = folium.Map(tiles='OpenStreetMap')

# 「center_location」中心ではじめの地図を作る。
m = folium.Map(location=center_location, zoom_start=11)

#　この地図にマーカーや線を書き加えていく
lon=34.02147576216051
lat=130.9209636693177

#====　ここからポップアップの細工を始める ====
#「folium」でのマーカー内外のテキストはすべて
# MarkDown形式が基本
# 改行やリンク、イメージ挿入もMarkDown形式になる。

#==「icon=folium.Icon(」はマーカー内設定======
popup_1 ='<a href = "http://koufuku.visithp.com/" target="_blank" rel="noopener noreferrer"><img width="600" src="kusidanngo.jpg"><br>ここ</a>'

folium.Marker([lon,lat],popup=popup_1 ,icon=folium.Icon(color='green',icon_color='white',icon='info-sign')).add_to(m) 

#======マーカー下の地図上テキスト表示は
#「icon=DivIcon(」で、内部オプション「html=」で
# イメージ差し込みやリンク作成をMarkDounで指定できる==
html_2='<div style="font-size: 9pt; color : green"><a href = "http://koufuku.visithp.com/" target="_blank" rel="noopener noreferrer"> 幸ふく<br>よもぎ串団子<img width="60" height="60" src="kusidanngo.jpg"></div></a>'

folium.Marker(location=[lon,lat],icon=DivIcon(icon_size=(150, 36),icon_anchor=(-20, 0),html=html_2)).add_to(m) 

#=====最後にHTMLファイルで書き出す==========
m.save(webfile_name)