マーカーとイメージポップアップ付きの OpenStreetMap 地図（Python + leaflet.js + folium を使用）

1. エグゼクティブサマリー

本記事では，Python パッケージ folium を使用し，OpenStreetMap 上にマーカーとイメージポップアップを配置した地図を生成する方法を扱う．マーカーをクリックするとポップアップで建物名と画像が表示される．マーカーにマウスカーソルを重ねると建物名がツールチップとして表示される．

2. 前準備（必要ソフトウェアの入手）

ここでは、最低限の事前準備について説明する。機械学習や深層学習を行う場合は、NVIDIA CUDA、Visual Studio、Cursorなどを追加でインストールすると便利である。これらについては別ページ https://www.kkaneko.jp/cc/dev/aiassist.htmlで詳しく解説しているので、必要に応じて参照してください。

winget install --scope machine --id Python.Python.3.12 -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_pip=1 Include_test=0 Include_launcher=1 InstallLauncherAllUsers=1"

python --version

winget install --scope machine --id Codeium.Windsurf -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --custom "/SP- /SUPPRESSMSGBOXES /NORESTART /CLOSEAPPLICATIONS /DIR=""C:\Program Files\Windsurf"" /MERGETASKS=!runcode,addtopath,associatewithfiles,!desktopicon"
powershell -Command "$env:Path=[System.Environment]::GetEnvironmentVariable('Path','Machine')+';'+[System.Environment]::GetEnvironmentVariable('Path','User'); windsurf --install-extension MS-CEINTL.vscode-language-pack-ja --force; windsurf --install-extension ms-python.python --force; windsurf --install-extension Codeium.windsurfPyright --force"

pip install -U pandas folium

3. 実行のための準備とその確認手順（Windows 前提）

3.1 プログラムファイルの準備

第5章に掲載するソースコードをテキストエディタ（メモ帳，Windsurf 等）に貼り付け，map_markers.py として保存する（文字コード：UTF-8）．

3.2 実行コマンド

コマンドプロンプトでファイルの保存先ディレクトリに移動し，以下を実行する．

python map_markers.py

実行が完了すると，カレントディレクトリに HTML ファイル b.html が生成される．

3.3 動作確認チェックリスト

4. 概要・使い方・実行上の注意

4.1 画像ファイルの準備

カレントディレクトリは，次の Python プログラムで確認できる．

import os
print(os.getcwd())

1. Web ブラウザを開き，次の URL を開く

   https://www.kkaneko.jp/sample/photo-2017-12-03/index.html

2. このディレクトリに .zip ファイルがある．.zip ファイルをダウンロードして展開（解凍）する

   これは，複数の画像ファイルが入った .zip ファイルである

   
3. カレントディレクトリの下に「photo」というサブディレクトリを作成し，そこに画像ファイルを置く
   

4.2 地図の操作方法

プログラムを実行すると，カレントディレクトリに HTML ファイル b.html が生成される．

b.html を Web ブラウザで開く．マーカー付きの地図が表示されれば成功である．マーカーにマウスカーソルを重ねると建物名がツールチップとして表示される．

マーカーをクリックするとポップアップで建物名と画像が表示される．

5. ソースコード

5.1 カレントディレクトリの確認

import os
print(os.getcwd())

5.2 マーカー付き地図の生成

import folium

markers = [
    ([34.4579, 133.2295], '１号館', 'photo/1.jpg'),
    ([34.4571, 133.2305], '２号館', 'photo/2.jpg'),
    ([34.4570, 133.2310], '３号館', 'photo/3.jpg'),
    ([34.4593, 133.2303], '６号館', 'photo/6.jpg'),
    ([34.4574, 133.2282], '８号館', 'photo/8.jpg'),
    ([34.4569, 133.2291], '９号館', 'photo/9_a.jpg'),
    ([34.4567, 133.2292], '９号館', 'photo/9_b.jpg'),
    ([34.4569, 133.2291], '９号館', 'photo/9_c.jpg'),
    ([34.4585, 133.2273], '１０号館', 'photo/10.jpg'),
    ([34.4590, 133.2274], '１１号館', 'photo/11.jpg'),
    ([34.4589, 133.2271], '１２号館', 'photo/12.jpg'),
    ([34.4595, 133.2274], '１３号館', 'photo/13.jpg'),
    ([34.4594, 133.2299], '１４-１号館', 'photo/14-1.jpg'),
    ([34.4587, 133.2301], '１４-２号館', 'photo/14-2.jpg'),
    ([34.4575, 133.2320], '１５号館', 'photo/15.jpg'),
    ([34.4573, 133.2331], '１６号館', 'photo/16.jpg'),
    ([34.4570, 133.2331], '１７号館', 'photo/17.jpg'),
    ([34.4568, 133.2333], '１８号館', 'photo/18.jpg'),
    ([34.4584, 133.2327], '１９号館', 'photo/19.jpg'),
    ([34.4571, 133.2300], '２０号館', 'photo/20.jpg'),
    ([34.4566, 133.2307], '２１号館', 'photo/21.jpg'),
    ([34.4566, 133.2309], '２２号館', 'photo/22.jpg'),
    ([34.4562, 133.2307], '２３号館', 'photo/23.jpg'),
    ([34.4578, 133.2330], '２４号館', 'photo/24.jpg'),
    ([34.4563, 133.2323], '２５号館', 'photo/25.jpg'),
    ([34.4584, 133.2318], '２７号館', 'photo/27.jpg'),
    ([34.4571, 133.2336], '２８号館', 'photo/28.jpg'),
    ([34.4559, 133.2307], '２９号館', 'photo/29.jpg'),
    ([34.4579, 133.2284], '３０号館', 'photo/30.jpg'),
    ([34.4590, 133.2267], '３１号館', 'photo/31.jpg'),
    ([34.4580, 133.2334], '３２号館', 'photo/32.jpg'),
    ([34.4573, 133.2328], '３３号館', 'photo/33.jpg'),
    ([34.4571, 133.2329], '３３号館', 'photo/33-2.jpg'),
    ([34.4589, 133.2281], '３４号館', 'photo/34.jpg'),
]

m = folium.Map(location=[34.4586, 133.2295], zoom_start=18, control_scale=True)

for coords, name, img in markers:
    popup_html = (
        '<a href="https://maps.google.com/maps?q=&layer=c&cbll='
        + str(coords[0]) + ', ' + str(coords[1])
        + '&cbp=11,0,0,0,0">'
        + name
        + ' <br/><img width="60" src="' + img + '"></a>'
    )
    folium.Marker(coords, popup=popup_html, tooltip=name).add_to(m)

m

5.3 HTML ファイルへの保存

m.save("b.html")

6. まとめ

OpenStreetMap

OpenStreetMap は，世界規模の無料のオンライン地図データベースシステムである．本記事では，この地図データを基盤として利用した．

folium と leaflet.js

folium は leaflet.js を利用した JavaScript プログラムを生成できる Python パッケージである．Python から対話的な地図を含む HTML ファイルを生成できる．

マーカーとポップアップ

folium.Marker を使用して地図上に複数のマーカーを配置した．マーカーをクリックするとポップアップで建物名と画像が表示される．

ツールチップとスケールバー

各マーカーに tooltip パラメータを指定することで，マウスカーソルを重ねると建物名がツールチップとして表示される．folium.Map に control_scale=True を指定することで，地図上にスケールバーが表示される．

HTML ファイルの生成

m.save() を使用して，生成した地図を HTML ファイルとして保存できる．保存した HTML ファイルは Web ブラウザで開いて確認する．