目次

  1. 1. エグゼクティブサマリー
  2. 2. Python 3.12 のインストール
  3. 3. Python の開発環境 Visual Studio Code のインストールと Python 用の設定
  4. 4. Python プログラム実行手順
  5. 5. 必要なライブラリのインストール
  6. 6. 実行のための準備とその確認手順(Windows 前提)
  7. 7. 概要・使い方・実行上の注意
  8. 8. ソースコード
  9. 9. 演習
  10. 10. まとめ

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

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

問題定義

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

提案技術

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

期待される効果

簡易に構築・運用できる地図サービスシステムの構築。

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

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

システム構成

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:インストーラーによるインストール

  1. Python公式サイト(https://www.python.org/downloads/)にアクセスし、「Download Python 3.x.x」ボタンからWindows用インストーラーをダウンロードする。
  2. ダウンロードしたインストーラーを実行する。
  3. 初期画面の下部に表示される「Add python.exe to PATH」にチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
  4. 「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 プログラムを解釈・実行するソフトウェア)を選択する必要がある.

  1. コマンドパレット(コマンド名で機能を呼び出す VS Code の入力欄)を開く(Ctrl+Shift+P
  2. Python: Select Interpreter と入力する
  3. 表示される一覧から,使用する Python(例:C:\Program Files\Python312\python.exe)を選択する.

4. Python プログラム実行手順

[Windows での Python プログラム実行手順を見るには、ここをクリック]

Windows での Python 実行手順(Visual Studio Codeを使用)

プログラムファイルの作成と保存

  1. 左サイドバーの「エクスプローラー」アイコン(Ctrl+Shift+E)をクリックする
  2. 「NO FOLDER OPENED」(作業対象フォルダが未選択の状態)と表示される場合は,「Open Folder」をクリックし,プログラムを保存するフォルダを選択する

    続いて「フォルダを信用するか」を確認する画面(フォルダ内のコードを実行してよいか確認する VS Code の仕組み)が表示されるので,チェックして Yes を選択する

  3. フォルダ名の右側に表示される「新しいファイル」アイコンをクリックする
  4. ファイル名(例:aitask.py.ファイル名は何でも良い)を入力し Enter を押す.拡張子は .py(Python ファイルを示す拡張子)とする
  5. 実行したいコードを選択し,Ctrl+C でコピーする.VS Code のエディタ領域に Ctrl+V で貼り付ける
  6. Ctrl+S で保存する

プログラムの実行

  1. エディタ右上の三角形「▷」アイコン(Run Python File:現在開いている Python ファイルを実行するボタン)をクリックする.または,エディタ上で右クリックし「ターミナルで Python ファイルを実行」を選択する
  2. VS Code 下部のターミナル(コマンドの入出力を表示する画面)に,実行結果(print 関数の出力等)が表示される
  3. tkinter(Python 標準の GUI ライブラリ)のファイル選択ダイアログを使うプログラムを実行した場合は,ダイアログが開くので対象画像を選択する
  4. 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 データファイルの準備

  1. GitHub の AjinKuriakose/UK-Road-Accident-Data-Analysis の Web ページを開く。

    https://github.com/AjinKuriakose/UK-Road-Accident-Data-Analysis

  2. clean_data.csv」をクリックする。
  3. 画面が変わる。「Download」をクリックする。
  4. ダウンロードしたファイルを,先ほど確認した「カレントディレクトリ」に置く。

    * ファイルの先頭部分は次のようになっている。

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 地図を生成する

手順

  1. 第6章の手順に従い,clean_data.csv をカレントディレクトリに置く。
  2. 次のコードを実行する(メモ帳を用いる場合は 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)
  1. 生成された d.html を Web ブラウザで開く。

ヒント

考察ポイント

10. まとめ

OpenStreetMap と folium による地図生成

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

CSV データからの一括表示

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

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

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

簡易な構築と運用

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

多様な用途への応用

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