今回は、foliumで作成した地図のマーカーをクリックした時に出るpopup(吹き出し)にWebページのリンク、Twitterのツイート、YouTubeなとを埋め込んだり貼り付けたりする方法です。

folium以外にbrancaというライブラリも使います。pip install 等でインストール。

↓のようなものが出来上がります。

f:id:chayarokurokuro:20210802161847j:plain — popupのパターン

これは使えそう！ (*σ´ｪ｀)σ。

【実行環境】

Windows10 WSL：Ubuntu
Anaconda
Python3.8
Jupyter Notebook
folium、branca

Android
Termux
Python3.9
Jupyter Notebook

マーカーのpopupにWebページのリンクを貼り付ける

マーカーをクリックするとpopupが出ますが、そこにWebページのリンクを貼り付けます。クリックするとpopupにページが表示されます。

座標を適当に決めた所が兵庫県だったので、気象庁の兵庫県の天気予報ページを貼り付けました。

import folium
from folium import plugins
import branca

# 地図作成
center=[35,135]
m= folium.Map(center,zoom_start=8)

# ポップアップの設置
url="https://www.jma.go.jp/bosai/#pattern=forecast&area_type=offices&area_code=280000"
html=f'<a href={url}> 🌞気象庁☔ 兵庫県の天気予報 </a>'
iframe = branca.element.IFrame(html=html, width=300, height=500)
popup = folium.Popup(iframe, max_width=300)


# 地図にマーカー追加
folium.Marker(center, popup=popup).add_to(m)

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

# 表示
m

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

コード中に「# ポップアップの設置」と書いた部分があります。

# ポップアップの設置
url="https://www.jma.go.jp/bosai/#pattern=forecast&area_type=offices&area_code=280000"
html=f'<a href={url}> 🌞気象庁☔ 兵庫県の天気予報 </a>'
iframe = branca.element.IFrame(html=html, width=300, height=500)
popup = folium.Popup(iframe, max_width=300)

これを↓のように、3行目を削除して、４行目のiframeをhtmlに書き換えると、popupのリンクをクリックすると同時に地図が丸ごとWebページに変わってしまう。

# ポップアップの設置
url="https://www.jma.go.jp/bosai/#pattern=forecast&area_type=offices&area_code=280000"
html=f'<a href={url}> 🌞気象庁☔ 兵庫県の天気予報 </a>'
popup = folium.Popup(html, max_width=300)

で、これだと上手く行かないので、３行目のiframe = branca.element.IFrame()は必須です。

popupにTwitterを埋め込む

popupにTwitterのツイートを埋め込むには、単にブラウザに表示されたURLを貼り付けるだけでは「接続が拒否されました」などと出る。

にはどうすれば良いかというと、Twitterの各ツイートの「ツイートを埋め込む」ボタンをクリックすると、publish.twitter.comというところに飛ばされて、埋め込み用のタグをコピーできる。そこでコードをコピーして、下記のようにhtmlをIframeに渡す。

適当に決めた中心座標がたまたま兵庫県西脇市でしたので出身有名人を検索して出てきた人物のTwitterを埋め込んでみた。

import folium
from folium import plugins
import branca

# 地図作成
center=[35,135]
m= folium.Map(center,zoom_start=8)

# Twitterの埋め込み用
html='<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/iWHt6bhLq9">https://t.co/iWHt6bhLq9</a> <a href="https://t.co/3pdcbwAhlr">pic.twitter.com/3pdcbwAhlr</a></p>&mdash; 横尾忠則 (@tadanoriyokoo) <a href="https://twitter.com/tadanoriyokoo/status/1422008486284513282?ref_src=twsrc%5Etfw">August 2, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>'

# ポップアップの設定・設置
iframe = branca.element.IFrame(html=html, width=300, height=500)
popup = folium.Popup(iframe, max_width=300)
# 地図にマーカー追加
folium.Marker(center, popup=popup).add_to(m)

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

# 表示
m

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

popupにYouTube動画を埋め込む

これもTwitterのツイート埋め込みと同様に、ただURLを貼り付けただけでは「接続が拒否されました」みたいなことになる。

PCで貼り付け用のタグを取得するには、「共有」ボタン → 「埋め込む」ボタンを押して表示されるタグをコピーする。

スマホで埋め込み用のタグを取得する場合は、アプリでは無理っぽい。
ブラウザのPC版で動画のページを開き、同じように「共有」ボタン → 「埋め込む」ボタンで出たタグをコピーする。

あとは上のTwitterの貼り付けでやったのと同じようにする。

ついでに河北新報のWebページのリンクも貼り付けてみた。

import folium
from folium import plugins
import branca

# 地図作成
center=[40.810593, 140.696726]
m= folium.Map(center,zoom_start=8)

# YouTubeの埋め込み用
html = '<a href="https://kahoku.news/articles/20210527khn000005.html">【河北新報】<br> 三内丸山、世界遺産へ　北海道・北東北の縄文遺跡群 </a><br><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/3A6JY4nuaNE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'

# ポップアップの設定・設置
iframe = branca.element.IFrame(html=html, width=300, height=500)
popup = folium.Popup(iframe, max_width=300)
# 地図にマーカー追加
folium.Marker(center, popup=popup).add_to(m)

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

# 表示
m

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

遺跡群なのに三内丸山遺跡だけにマーカー差してすみませんｗ。

popupにWebページのリンクと画像を貼り付ける

鳥取県の有名な弥生時代の遺跡の史跡公園サイトと画像をポップアップに貼り付けてみる。

import folium
from folium import plugins
import branca

center=[35.463399, 133.454749]
m = folium.Map(center,zoom_start=8)

# ポップアップの設定と設置 (リンクと画像の貼り付け
html='<h3><a href="https://www.pref.tottori.lg.jp/mukibanda/">【鳥取県立むきばんだ史跡公園】リンク<br></a></h3><br><p><legend>妻木晩田遺跡(むきばんだいせき) 弥生時代</legend><img src="http://db.pref.tottori.jp/movement_2019.nsf/webview_forNewCms/45397D6FA7CD5705492584C10012C218/$FILE/im1.jpg" width="300" height="200" alt="妻木晩田遺跡(むきばんだいせき)"></p>'
iframe = branca.element.IFrame(html=html, width=300, height=500)
popup = folium.Popup(iframe, max_width=300)
folium.Marker(center, popup=popup).add_to(m)

# フルスクリーンボタンの設置
plugins.Fullscreen(
    position="topright",  # bottomleft 
    title="拡大する",      
    title_cancel="元に戻す",
    force_separate_button=True,
).add_to(m)

m

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

おわりに

だいぶんイケてますね。(^O^)/
popupのサイズをもう少し調節したりすれば見やすくできる。htmlやcssがわかる方なら画像を貼り付けたりもっと凝ったことが出来るんじゃないでしょうか。

SNSが貼り付けられるので、タグさえ取得できればリアルタイムで更新できるようになるのかも。
参考リンクとして【Python】python-twitterモジュールを使って埋め込みコードを取得する | ぱいそん日記ではPythonを使ってTwitter埋め込み用のコードを取得する方法が書かれてあります。この方法ではTwitterのユーザー登録とTwitterAPIのディベロッパー登録が必要。

Popupは他にもいろいろ表示出来そうですので、次も続きをやります。

その続きがこちら→

以上です。

よちよちpython

独習 python/Qpython/Pydroid3/termux/Linux

【folium】マーカーのPopupにWebページのリンクの貼り付け、TwitterやYouTubeなどを埋め込む

目次

マーカーのpopupにWebページのリンクを貼り付ける

popupにTwitterを埋め込む

popupにYouTube動画を埋め込む

popupにWebページのリンクと画像を貼り付ける

おわりに