目次
- 1. エグゼクティブサマリー
- 2. Python 3.12 のインストール
- 3. Python の開発環境 Visual Studio Code のインストールと Python 用の設定
- 4. Python プログラム実行手順
- 5. 必要なライブラリのインストール
- 6. 実行のための準備とその確認手順(Windows 前提)
- 7. 概要・使い方・実行上の注意
- 8. ソースコード
- 9. 演習
- 10. まとめ
緯度経度などのデータファイルから,マーカーとイメージポップアップ付きの OpenStreetMap 地図を生成
1. エグゼクティブサマリー
問題定義
緯度経度を含むデータを地図上に可視化する簡易な手段が求められている。
提案技術
Python の pandas と folium を用い,CSV データから OpenStreetMap 上にマーカー付き地図を HTML として生成する。
期待される効果
簡易に構築・運用できる地図サービスシステムの構築。
こんなことでお困りではありませんか。
- モバイル端末などで日々データを収集している。地図に表示させたいが,素早く,確実に,安価にできないか。
- エンドユーザ自身で,地図システムの中身を把握しながら開発を進めたい。従来型システム開発(提案→仕様策定→実装→テスト)では間に合わず,よりクイックに開発したい。
こんなことができる,こんな用途が考えられます。
- モバイル端末(GPS 付きも可能)で集めた緯度・経度付きの情報を,即時に,地図に一括表示する。
- 地図に基づくあらゆる情報で,パーソナルな用途や特定業務用途の性質をもつもの。
- ヒヤリハット地図(事故には至らなかったが危険を感じた事例を地図化したもの)
- 道路などの検査・調査結果(交通状況,道路付帯施設の状況など)
- 団体行動などの把握
システム構成
CSV データ → Python(pandas, folium)→ HTML ファイル → Web ブラウザで地図表示
使用している既存の技術
Python,pandas,folium,OpenStreetMap,Leaflet.js(folium が内部で利用する地図表示用の JavaScript ライブラリ)
拡張可能である。例えば,マーカーの密度表示や,住所とジオコード(緯度・経度)の相互変換などである。
2. Python 3.12 のインストール
Pythonのインストールを行い、Pythonのプログラムを実行する環境を整える。扱う環境は、Windows搭載パソコンである。金子研究室では、Python 3.12.10を推奨する。
[Windows での Python 3.12 のインストール手順を見るには、ここをクリック]
Windows での Python 3.12 のインストール
以下のいずれかの方法でPython 3.12をインストールする。Pythonがインストール済みの場合、この手順は不要である。
方法 1:winget によるインストール
【インストールコマンドの実行方法】
管理者権限でコマンドプロンプトを起動する(手順:Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」)。そして、コマンド全体をコマンドプロンプトにコピー&ペーストする。
--scope machine を指定することで、システム全体(全ユーザー向け)にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。
REM Python 3.12 をシステム領域にインストール
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\""
REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; $c=[Environment]::GetEnvironmentVariable('Path','Machine'); if((Test-Path $p) -and (';'+$c+';' -notlike \"*;$p;*\") -and (';'+$c+';' -notlike \"*;$s;*\")){[Environment]::SetEnvironmentVariable('Path',\"$p;$s;$c\",'Machine')}"
方法 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' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。
3. Python の開発環境 Visual Studio Code のインストールと Python 用の設定
Python の開発環境Visual Studio Code(プログラムを編集するソフトウェア。以下、VS Code)を整える。
[Windows での Visual Studio Code のインストールと Python 用の設定手順を見るには、ここをクリック]
Windows での Visual Studio Code のインストールと Python 用の設定手順
1. VS Code と拡張機能のインストール
以下のコマンドにより,既存の VS Code を削除し,全ユーザー共有の設定で再インストールしたうえで,拡張機能(VS Code に機能を追加するソフトウェア)をまとめて導入する.
【インストールコマンドの実行方法】
管理者権限でコマンドプロンプトを起動する(手順:Windows キーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」)。そして,コマンド全体をコマンドプロンプトにコピー&ペーストする。
インストールコマンド
REM ============================================================
REM Microsoft Visual Studio Code
REM ============================================================
winget uninstall -e --id Microsoft.VisualStudioCode --silent --disable-interactivity --accept-source-agreements
rmdir /s /q C:\ProgramData\vscode-extensions 2>nul
rmdir /s /q "%APPDATA%\Code" 2>nul
rmdir /s /q "%USERPROFILE%\.vscode" 2>nul
rmdir /s /q "%LOCALAPPDATA%\Microsoft\vscode-update" 2>nul
REM VS Code をシステム領域に新規インストール
winget install --scope machine --id Microsoft.VisualStudioCode -e --silent --accept-source-agreements --accept-package-agreements
REM 全ユーザー共有の拡張機能フォルダ
mkdir C:\ProgramData\vscode-extensions 2>nul
icacls "C:\ProgramData\vscode-extensions" /grant "Everyone:(OI)(CI)M" /T
REM スタートメニューのショートカットを --extensions-dir 付きで再作成
rmdir /s /q "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code" 2>nul
del "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk" 2>nul
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); $lnk.TargetPath='C:\Program Files\Microsoft VS Code\Code.exe'; $lnk.Arguments='--extensions-dir \"C:\ProgramData\vscode-extensions\"'; $lnk.Save()"
REM ショートカットの検証
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); Write-Host 'TargetPath:' $lnk.TargetPath; Write-Host 'Arguments:' $lnk.Arguments"
REM ファイル / フォルダ右クリックの「Code で開く」を登録
reg add "HKLM\SOFTWARE\Classes\*\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\Background\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%V\"" /f
REM --extensions-dir 付きで起動する code.cmd ラッパを作成
REM (%* を echo で書くと対話的 cmd で失われるため、PowerShell で [char]37+'*' を書き出す)
powershell -NoProfile -Command "$pct=[char]37; $q=[char]34; $c='@echo off'+[char]13+[char]10+$q+'C:\Program Files\Microsoft VS Code\bin\code.cmd'+$q+' --extensions-dir '+$q+'C:\ProgramData\vscode-extensions'+$q+' '+$pct+'*'+[char]13+[char]10; [IO.File]::WriteAllText('C:\ProgramData\vscode-extensions\vscode.cmd',$c,[Text.Encoding]::ASCII)"
REM 拡張機能のインストール
set "CODE=C:\Program Files\Microsoft VS Code\bin\code.cmd"
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot-chat
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.python
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.vscode-pylance
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.debugpy
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension MS-CEINTL.vscode-language-pack-ja
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension saoudrizwan.claude-dev
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension rust-lang.rust-analyzer
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension tamasfe.even-better-toml
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension anthropic.claude-code
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension almenon.arepl
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --list-extensions --show-versions
echo === セットアップ完了 ===
2. Python インタプリタの選択
同一マシンに複数の Python がインストールされている場合,VS Code で使用する Python 本体(インタプリタ:Python プログラムを解釈・実行するソフトウェア)を選択する必要がある.
- コマンドパレット(コマンド名で機能を呼び出す VS Code の入力欄)を開く(
Ctrl+Shift+P) Python: Select Interpreterと入力する
- 表示される一覧から,使用する Python(例:
C:\Program Files\Python312\python.exe)を選択する.
4. Python プログラム実行手順
[Windows での Python プログラム実行手順を見るには、ここをクリック]
Windows での Python 実行手順(Visual Studio Codeを使用)
プログラムファイルの作成と保存
- 左サイドバーの「エクスプローラー」アイコン(
Ctrl+Shift+E)をクリックする
- 「NO FOLDER OPENED」(作業対象フォルダが未選択の状態)と表示される場合は,「Open Folder」をクリックし,プログラムを保存するフォルダを選択する
続いて「フォルダを信用するか」を確認する画面(フォルダ内のコードを実行してよいか確認する VS Code の仕組み)が表示されるので,チェックして Yes を選択する
- フォルダ名の右側に表示される「新しいファイル」アイコンをクリックする
- ファイル名(例:
aitask.py.ファイル名は何でも良い)を入力しEnterを押す.拡張子は.py(Python ファイルを示す拡張子)とする
- 実行したいコードを選択し,
Ctrl+Cでコピーする.VS Code のエディタ領域にCtrl+Vで貼り付ける Ctrl+Sで保存する
プログラムの実行
- エディタ右上の三角形「▷」アイコン(Run Python File:現在開いている Python ファイルを実行するボタン)をクリックする.または,エディタ上で右クリックし「ターミナルで Python ファイルを実行」を選択する
- VS Code 下部のターミナル(コマンドの入出力を表示する画面)に,実行結果(
print関数の出力等)が表示される
- tkinter(Python 標準の GUI ライブラリ)のファイル選択ダイアログを使うプログラムを実行した場合は,ダイアログが開くので対象画像を選択する
- VS Code 下部のターミナルで実行結果を確認する.OpenCV ウィンドウ(OpenCV が画像を表示するために開く専用ウィンドウ)が開いた場合はそちらも確認する.OpenCV ウィンドウは,マウスクリックでウィンドウをアクティブ(操作対象の状態)にしてからキーを押すと終了する
5. 必要なライブラリのインストール
管理者権限でコマンドプロンプトを起動する
(手順:Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」)。
起動したコマンドプロンプトで以下を実行する。
pip install -U --no-user pandas folium
6. 実行のための準備とその確認手順(Windows 前提)
6.1 カレントディレクトリの確認
次の Python プログラムを実行する。カレントディレクトリ(プログラムを実行する際の作業フォルダ)のパスが表示される。
import os
print(os.getcwd())
6.2 データファイルの準備
- GitHub の AjinKuriakose/UK-Road-Accident-Data-Analysis の Web ページを開く。
https://github.com/AjinKuriakose/UK-Road-Accident-Data-Analysis
- 「clean_data.csv」をクリックする。
- 画面が変わる。「Download」をクリックする。
- ダウンロードしたファイルを,先ほど確認した「カレントディレクトリ」に置く。
* ファイルの先頭部分は次のようになっている。
6.3 プログラムファイルの準備
第8章に掲載するソースコードをテキストエディタ(Visual Studio Code やメモ帳など)に貼り付け,保存する(文字コード:UTF-8)。
6.4 実行コマンド
コマンドプロンプトでファイルの保存先ディレクトリに移動し,保存したプログラムを実行する。
6.5 動作確認チェックリスト
| 確認項目 | 期待される結果 |
|---|---|
| カレントディレクトリの確認 | 現在の作業ディレクトリのパスが表示される |
| clean_data.csv の配置 | カレントディレクトリにファイルが存在する |
| プログラム実行後 | カレントディレクトリに d.html が生成される |
| d.html を Web ブラウザで開く | OpenStreetMap の地図が表示される |
| マーカーの表示 | データの先頭100件分のマーカーが地図上に表示される |
| マーカーにマウスカーソルを合わせる | 日付がツールチップとして表示される |
| マーカーをクリック | 日付と Google マップストリートビューへのリンクがポップアップ表示される |
| ズームアウト | マーカーの分布を広域で確認できる |
| スケールバー | 地図左下に距離の目盛りが表示される |
7. 概要・使い方・実行上の注意
プログラムの動作
CSV 形式のデータファイル(clean_data.csv)から緯度・経度・日付を読み取り,OpenStreetMap 上にマーカーを配置した HTML ファイル(d.html)を生成する。
マーカーの操作
マーカーをクリックするとポップアップが開き,日付と Google マップのストリートビューへのリンクが表示される。マーカーにマウスカーソルを合わせると,日付がツールチップ(マウスを重ねたときに現れる小さな説明)として表示される。
表示範囲とデータ件数
地図の初期表示位置は緯度 53.44,経度 -2.24,ズームレベル 16 である。データファイルの先頭100件がマーカーとして表示される。
ズームアウトして確認する。
8. ソースコード
カレントディレクトリの確認
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)
9. 演習
演習1
テーマ名:CSV データからマーカー付き OpenStreetMap 地図を生成する
手順
- 第6章の手順に従い,clean_data.csv をカレントディレクトリに置く。
- 次のコードを実行する(メモ帳を用いる場合は a.py のようなファイル名で保存して実行)。
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)
- 生成された d.html を Web ブラウザで開く。
ヒント
- マーカーにマウスカーソルを合わせるとツールチップが,クリックするとポップアップが表示される。
- 地図をズームアウトすると,マーカーの分布を広域で確認できる。
考察ポイント
- 先頭100件のマーカーが地図上のどの範囲に分布しているかを読み取る。
- ポップアップ内のリンクをたどり,地図上の位置と Google マップストリートビューの風景が対応していることを確認する。
10. まとめ
OpenStreetMap と folium による地図生成
Python の folium ライブラリにより,OpenStreetMap 上にマーカーとポップアップ付きの地図を HTML ファイルとして生成できる。生成された HTML は Web ブラウザで表示でき,サーバー環境を必要としない。
CSV データからの一括表示
緯度・経度を含む CSV ファイルを pandas で読み込み,各行をマーカーとして地図上に一括表示する。モバイル端末(GPS 付きも可能)で集めた情報を即時に地図へ反映できる。
ポップアップとツールチップ
各マーカーには,クリック時のポップアップとマウスホバー時のツールチップが設定されている。ポップアップには日付と Google マップストリートビューへのリンクが含まれる。
簡易な構築と運用
Python と pip によるライブラリインストールのみで環境構築が完了する。従来型システム開発と比較して,クイックに地図サービスを構築・運用できる。
多様な用途への応用
ヒヤリハット地図,道路などの検査・調査結果,団体行動の把握など,地図に基づくパーソナル・特定業務用途の情報表示に応用できる。密度表示や住所・ジオコードとの変換への拡張も可能である。