データフレームをpopupに載せる

folium.Popup()の引数にdf.to_html()を渡す。

import folium
from folium import plugins
import branca
import pandas as pd

# データフレーム生成
df = pd.DataFrame(
    [
        ["☀️","☀️","0","35"],
        ["☀️","[emoji:003]","30","34"],
        ["🌤️","☔","60","32"]
    ],
    columns=["午前","午後","降水確率","平均気温"],
    index=[pd.date_range(start="2035/8/6",freq="d",periods=3)]
)



# ベースの地図を作成
center = [34.391503, 132.453158] # 中心座標
m = folium.Map(center, zoom_start=14)

# ポップアップ生成
popup = folium.Popup(
    df.to_html(), 
    width=300, 
    height=400
)

# ポップアップを地図に追加
folium.Marker(location=center,
              popup=popup,
              max_width=500,
              icon=folium.Icon(color="orange")
).add_to(m)


# 地図をフルスクリーンにするボタンを地図に追加
plugins.Fullscreen(
    position="topright",
    title="拡大する",
    title_cancel="元に戻す",
    force_separate_button=True,
).add_to(m)



# 地図を表示
m

Make this Notebook Trusted to load map: File -> Trust Notebook

画像入りデータフレーム

import folium
from folium import plugins
import branca
import pandas as pd


# 画像のリンク リスト型
img_list = [
    ["カール・ツンベルク",'<img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Carl_Peter_Thunberg.jpg", width="50" height="50" >'],
    ["フィリップ・フランツ・フォン・シーボルト", '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/%E3%82%B7%E3%83%BC%E3%83%9C%E3%83%AB%E3%83%88_%E5%B7%9D%E5%8E%9F%E6%85%B6%E8%B3%80%E7%AD%86.jpg/250px-%E3%82%B7%E3%83%BC%E3%83%9C%E3%83%AB%E3%83%88_%E5%B7%9D%E5%8E%9F%E6%85%B6%E8%B3%80%E7%AD%86.jpg" width="50" height="50">'],
    ["エンゲルベルト・ケンペル", '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Engelbert_Kaempfer.jpg/115px-Engelbert_Kaempfer.jpg" width="50" height="50">']
]


# データフレーム生成
df = pd.DataFrame(
    img_list,
    columns=["商館員名","画像"]
)



# ベースの地図を作成
center = [32.743503, 129.872952]  # 中心座標
m = folium.Map(center, zoom_start=15)


# テーブルhtml作成
table_html = branca.element.IFrame(html=df.to_html(escape=False), width=300, height=250)



# ポップアップ生成
popup = folium.Popup(
    html=table_html
)

# ポップアップを地図に追加
folium.Marker(location=center,
              popup=popup,
              max_width=300,
              icon=folium.Icon(color="blue")
).add_to(m)



# 地図をフルスクリーンにするボタンを地図に追加
plugins.Fullscreen(
    position="topright",
    title="拡大する",
    title_cancel="元に戻す",
    force_separate_button=True,
).add_to(m)



# 地図を表示
m

Make this Notebook Trusted to load map: File -> Trust Notebook

※ 画像はWikipediaから拝借いたしました。

ポイント！

データフレームの画像は、テーブルhtml作成のコメント行のbranca.element.IFrame()の引数df.to_html()にescape=Falseを書くことにより、文字列として処理されるのを回避し画像で表示させている。

画像のサイズは、<img src="画像のurl">の部分で指定する。今回のは全てwidth=50, height=50で統一した。

テーブルにリンクを表示したい場合は、たぶん同じやり方でできる。