【foliumのPlugins】地図上の定位置に画像を貼り付けるFloatImage

今回は、地図作成ライブラリfoliumの大量にあるPluginsの一つ、FloatImageの使い方。地図画面の定位置に画像を貼り付けます。

• 完成した地図のキャプチャ ( htmlファイルをPCのブラウザで開いた)

• 地図作成コードを実行してJupyter Notebookに表示させたキャプチャ

マーカーなどは地図上の座標に設置しますので、地図を動かすとマーカーも一緒に動いてしまいます。
しかしFloatImageで貼り付けた画像は地図を動かしても位置は固定されたまま動きません。
地図の隅にロゴマークを貼って表示させたいような時に使えそうです。

地図作図

地図の右上にコンパスの画像を貼り付けてみます。(ネットにあったサンプルの真似)

貼り付ける画像は↓から拝借しました。
Compass - Compass Bearing On Map Transparent PNG - 626x624 - Free Download on NicePNG

ダウンロードしたpngファイルをはてなフォトに保存し、画像編集機能でサイズを100px程度に下げております。

import folium
from folium import plugins

# 貼り付ける画像
url = "https://cdn-ak.f.st-hatena.com/images/fotolife/c/chayarokurokuro/20210807/20210807120306.png"

# ベースとなる地図作成
m = folium.Map([33, 132], zoom_start=10)

# 地図に画像を追加
plugins.FloatImage(
    url, 
    bottom=45, # 数値を上げると上がる  ベストは bottom=65
    left=65,  # 数値を上げると右に移動  ベストは left=82
).add_to(m)


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

# htmlファイルに保存
m.save("float_image.html")

# 表示
m

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

地図の画面を動かしても右上のコンパスは動きません。
スマホなどの小さな画面だと上手く表示されないかも…。

ヴィンテージ風の海賊地図とか作れそう。古びた紙が丸まった見出しとか髑髏のマークやら変な怪獣みたいなイラストを散りばめたりして。

plugins.FloatImageのヘルプ

# 使い方
help(plugins.FloatImage)

# または (jupyterで
?plugins.FloatImage

FloatImageの難点

上のヘルプを表示させると、

class FloatImage(branca.element.MacroElement)
FloatImage(image, bottom=75, left=75)

と書かれています。引数は３つだけ。

• 画像のサイズを変えることができない ： url保存先の画像サイズがそのまま使われる。
  
• 画像貼り付け位置の設定・調整が難しい

地図画面の表示の具合が、

1. PC上のJupyterでコードを実行して地図を表示させた場合
2. PC上でその地図をhtmlファイルに保存したものをブラウザで開いた場合
3. スマホ（等）のJupyterでコードを実行した場合
4. スマホ（等）に保存したhtmlファイル地図を開いた場合

と、環境によって異なる。そしてFloatImageの位置も地図画面からはみ出したりする。

Webフレームワークを使ってレスポンシブ対応で良い感じに表示させるなどすればいいのかもしれないが、そこまでの確認はしませんでした。

あとは宜しくお願い致します。

以上です。