緯度経度などのデータファイルから，マーカーとイメージポップアップ付きの OpenStreetMap 地図プログラムを生成

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

本記事では，緯度経度を含む CSV データファイルと画像ファイルをもとに，Python の folium ライブラリで OpenStreetMap 上にマーカーとイメージポップアップを配置する地図を生成する手順を説明する．マーカーをクリックすると，画像や Google マップストリートビューへのリンクを含むポップアップが表示される．

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_gen.py として保存する（文字コード：UTF-8）．

3.2 実行コマンド

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

python map_gen.py

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

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

4.1 使用するファイル

次のような緯度経度を含むデータファイルと画像ファイルを使う（ここではダウンロードして使う）．

4.2 緯度経度を含むデータファイルの準備

1. Web ブラウザで次の URL からデータファイルをダウンロードする．

   https://www.kkaneko.jp/sample/photo-2017-12-03/hoge.csv

2. カレントディレクトリにこのファイルを置く．
   
   * 自前でデータファイルを準備するときは，文字コードを UTF-8 にしておくこと．

4.3 画像ファイルの準備

1. Web ブラウザで次の URL を開く．

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

2. このディレクトリにある .zip ファイルをダウンロードして展開（解凍）する．これは複数の画像ファイルが入った .zip ファイルである．
   
3. カレントディレクトリの下に「photo」というサブディレクトリを作成し，そこに画像ファイルを置く．
   

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

次のプログラムを実行すると，カレントディレクトリのパスが表示される．データファイルや画像ファイルは，このディレクトリを基準に配置する．

import os
print(os.getcwd())

4.5 地図表示の確認

まず地図表示のみを確認する．以下のプログラムを実行する．

import folium

lat, lon = 34.4586, 133.2295
m = folium.Map(location=[lat, lon], zoom_start=18)
m.save("c.html")

カレントディレクトリに c.html ができる．

c.html を Web ブラウザで開く．地図が表示されれば OK である．

4.6 データファイルを使ったマーカー付き地図の生成

次に，データファイルの緯度経度を使った表示を行う．以下のプログラムを実行する．

import pandas as pd
import folium

datafile = "hoge.csv"
lat, lon = 34.4586, 133.2295
m = folium.Map(location=[lat, lon], zoom_start=18)
X = pd.read_csv(datafile)
for _, r in X.iterrows():
    html = '<a href="https://maps.google.com/maps?q=&layer=c&cbll=%f,%f&cbp=11,0,0,0,0">%s<br/><img width="60" src="%s"></a>' % (r.lat, r.lon, r.building, r.imfile)
    folium.Marker([r.lat, r.lon], popup=folium.Popup(html, max_width=200), tooltip=r.building).add_to(m)

m.save("c2.html")

カレントディレクトリに c2.html ができるので，Web ブラウザで開く．マーカー付きの地図が表示されれば OK である．マーカーをクリックすると情報が表示される．

5. ソースコード

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

現在の作業ディレクトリを確認する．データファイルや画像ファイルの配置先を特定するために使用する．

import os
print(os.getcwd())

5.2 地図表示の確認用プログラム

folium で OpenStreetMap の地図を生成し，HTML ファイルとして保存する．マーカーなしで地図のみを表示する．

import folium

lat, lon = 34.4586, 133.2295
m = folium.Map(location=[lat, lon], zoom_start=18)
m.save("c.html")

5.3 データファイルを使ったマーカー付き地図生成プログラム

CSV データファイルから緯度・経度・建物名・画像ファイルパスを読み込み，各地点にマーカーとポップアップを配置した地図を生成する．

import pandas as pd
import folium

datafile = "hoge.csv"
lat, lon = 34.4586, 133.2295
m = folium.Map(location=[lat, lon], zoom_start=18)
X = pd.read_csv(datafile)
for _, r in X.iterrows():
    html = '<a href="https://maps.google.com/maps?q=&layer=c&cbll=%f,%f&cbp=11,0,0,0,0">%s<br/><img width="60" src="%s"></a>' % (r.lat, r.lon, r.building, r.imfile)
    folium.Marker([r.lat, r.lon], popup=folium.Popup(html, max_width=200), tooltip=r.building).add_to(m)

m.save("c2.html")

6. まとめ

6.1 folium による地図生成

Python の folium ライブラリを使い，緯度・経度を指定して OpenStreetMap の地図を生成し，HTML ファイルとして保存できる．生成された HTML は Web ブラウザで直接閲覧できる．

6.2 CSV データからのマーカー自動配置

緯度経度を含む CSV データファイルを pandas で読み込み，各行のデータをもとに地図上にマーカーを自動配置できる．データファイルには lat，lon，building，imfile の列が含まれる．

6.3 ポップアップとツールチップ

マーカーをクリックすると，建物名・画像・Google マップストリートビューへのリンクを含むポップアップが表示される．マーカーにマウスホバーすると建物名がツールチップとして表示される．

6.4 データファイルの文字コード

自前でデータファイルを準備するときは，文字コードを UTF-8 にしておく必要がある．

6.5 ファイル配置

データファイルはカレントディレクトリに，画像ファイルはカレントディレクトリ下の「photo」サブディレクトリに配置する．カレントディレクトリは os.getcwd() で確認できる．