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

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

問題定義

緯度経度を含むデータを地図上に可視化する簡易な手段が求められている。

提案技術

Python の pandas と folium を用い，CSV データから OpenStreetMap 上にマーカー付き地図を HTML として生成する。

期待される効果

簡易に構築運用可能な地図サービスシステム構築

こんなことでお困りではありませんか

モバイル端末等で日々データを収集している。地図に表示させたいが，素早く，確実に，安価にできないか
自ら（エンドユーザ）で，地図システムの中身を掌握しながら開発を進めたい。従来型システム開発（提案→仕様策定→実装→テスト）では間に合わず，よりクイックに開発したい

こんなことができる，こんな用途が考えられます

モバイル端末（GPS 付きも可能）で集めた緯度・経度付きの情報を，即時に，地図に一括表示
地図に基づくあらゆる情報で，パーソナル，特定業務用途の性質をもつもの
- ヒヤリハット地図
- 道路等の検査，調査結果（交通状況，道路付帯施設状況など）
- 団体行動などの把握

システム構成

CSV データ → Python（pandas, folium）→ HTML ファイル → Web ブラウザで地図表示

使用している既存の技術

Python，pandas，folium，OpenStreetMap，Leaflet.js

拡張可能である：密度表示，住所やジオコードとの変換

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

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

Python 3.12 のインストール（Windows 上） [クリックして展開]

以下のいずれかの方法で Python 3.12 をインストールする。Python がインストール済みの場合、この手順は不要である。

方法1：winget によるインストール

管理者権限のコマンドプロンプトで以下を実行する。管理者権限のコマンドプロンプトを起動するには、Windows キーまたはスタートメニューから「cmd」と入力し、表示された「コマンドプロンプト」を右クリックして「管理者として実行」を選択する。

winget install --id Python.Python.3.12 -e --scope machine --silent --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_test=0 Include_pip=1 Include_launcher=1 InstallLauncherAllUsers=1 TargetDir=\"C:\Program Files\Python312\""
powershell -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; $m=[Environment]::GetEnvironmentVariable('Path','Machine'); if($m -notlike \"*$s*\") { [Environment]::SetEnvironmentVariable('Path', \"$p;$s;$m\", 'Machine') }"

--scope machine を指定することで、システム全体（全ユーザー向け）にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動すると PATH が自動的に設定される。

方法2：インストーラーによるインストール

Python 公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンから Windows 用インストーラーをダウンロードする。
ダウンロードしたインストーラーを実行する。
初期画面の下部に表示される「Add python.exe to PATH」に必ずチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
「Install Python 3.xx for all users」にチェックを入れ、「Install」をクリックする。

インストールの確認

コマンドプロンプトで以下を実行する。

python --version

バージョン番号（例：Python 3.12.x）が表示されればインストール成功である。「'python' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。

AIエディタ Windsurf のインストール（Windows 上） [クリックして展開]

Pythonプログラムの編集・実行には、AIエディタの利用を推奨する。ここでは、Windsurfのインストールを説明する。Windsurf がインストール済みの場合、この手順は不要である。

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"

【関連する外部ページ】

Windsurf の公式ページ: https://windsurf.com/

必要なライブラリのインストール [クリックして展開]

pip install -U pandas folium

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

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

次の Python プログラムを実行する。

import os
print(os.getcwd())

3.2 データファイルの準備

GitHub の AjinKuriakose/UK-Road-Accident-Data-Analysis の Web ページを開く。
https://github.com/AjinKuriakose/UK-Road-Accident-Data-Analysis
「clean_data.csv」をクリックする。
画面が変わる。「Download」をクリックする。
ダウンロードしたファイルを，先ほど確認した「カレントディレクトリ」に置く。
* ファイルの先頭部分は次のようになっている。

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

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

3.4 実行コマンド

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

python map_view.py

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

確認項目	期待される結果
カレントディレクトリの確認	現在の作業ディレクトリのパスが表示される
clean_data.csv の配置	カレントディレクトリにファイルが存在する
プログラム実行後	カレントディレクトリに d.html が生成される
d.html を Web ブラウザで開く	OpenStreetMap の地図が表示される
マーカーの表示	データの先頭100件分のマーカーが地図上に表示される
マーカーにマウスカーソルを合わせる	日付がツールチップとして表示される
マーカーをクリック	日付と Google マップストリートビューへのリンクがポップアップ表示される
ズームアウト	マーカーの分布を広域で確認できる
スケールバー	地図左下に距離の目盛りが表示される

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

プログラムの動作

CSV 形式のデータファイル（clean_data.csv）から緯度・経度・日付を読み取り，OpenStreetMap 上にマーカーを配置した HTML ファイル（d.html）を生成する。

マーカーの操作

マーカーをクリックするとポップアップが開き，日付と Google マップのストリートビューへのリンクが表示される。マーカーにマウスカーソルを合わせると，日付がツールチップとして表示される。

表示範囲とデータ件数

地図の初期表示位置は緯度 53.44，経度 -2.24，ズームレベル 16 である。データファイルの先頭100件がマーカーとして表示される。

ズームアウトして確認する。

5. ソースコード

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

import os
print(os.getcwd())

地図生成プログラム

import pandas as pd
import folium

datafile = "clean_data.csv"
lat, lon = 53.44, -2.24
zoom_start = 16
webfile_name = "d.html"

m = folium.Map(location=[lat, lon], zoom_start=zoom_start, control_scale=True)
X = pd.read_csv(datafile)
for i, r in X.head(100).iterrows():
    p = f'<a href="https://maps.google.com/maps?q=&layer=c&cbll={r.latitude},{r.longitude}&cbp=11,0,0,0,0">{r.date}</a>'
    folium.Marker([r.latitude, r.longitude], popup=p, tooltip=r.date).add_to(m)

m.save(webfile_name)

6. まとめ

OpenStreetMap と folium による地図生成

Python の folium ライブラリにより，OpenStreetMap 上にマーカーとポップアップ付きの地図を HTML ファイルとして生成できる。生成された HTML は Web ブラウザで表示でき，サーバー環境を必要としない。

CSV データからの一括表示

緯度・経度を含む CSV ファイルを pandas で読み込み，各行をマーカーとして地図上に一括表示する。モバイル端末（GPS 付きも可能）で集めた情報を即時に地図へ反映できる。

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

各マーカーには，クリック時のポップアップとマウスホバー時のツールチップが設定されている。ポップアップには日付と Google マップストリートビューへのリンクが含まれる。

簡易な構築と運用

Python と pip によるライブラリインストールのみで環境構築が完了する。従来型システム開発と比較して，クイックに地図サービスを構築・運用できる。

多様な用途への応用

ヒヤリハット地図，道路等の検査・調査結果，団体行動の把握など，地図に基づくパーソナル・特定業務用途の情報表示に応用できる。密度表示や住所・ジオコードとの変換への拡張も可能である。