マーカー付きの OpenStreetMap 地図（Python + leaflet.js + folium を使用）

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

本記事では，Python の folium パッケージを使い，OpenStreetMap のタイル地図を表示する leaflet.js プログラムを作成する方法を扱う．地図の表示，マーカーの自動配置とポップアップ表示，マーカーのカスタマイズ（アイコンと色の変更），CircleMarker による円形マーカーの表示までを段階的に説明する．

folium の組み込みタイルセットとして，OpenStreetMap（既定），CartoDB Positron，CartoDB dark_matter があり，それぞれの使用例も示す．

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章に掲載する各 Python ソースコードをテキストエディタ（メモ帳，Windsurf 等）に貼り付け，それぞれ対応するファイル名（map_basic.py，map_cartodb_positron.py，map_cartodb_dark.py，map_marker.py，map_icon.py，map_circle.py）で保存する（文字コード：UTF-8）．

ファイルはカレントディレクトリに作成される．カレントディレクトリを確認するには，次の Python プログラムを実行する． カレントディレクトリが不明だと，生成ファイルの所在が分からなくなる．

import os
print(os.getcwd())

3.2 実行コマンド

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

python map_basic.py

実行すると，カレントディレクトリに HTML ファイル（例：a.html）が生成される．生成された HTML ファイルをウェブブラウザで開くと地図が表示される．

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

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

Google Map を用いて緯度経度を調べる

緯度経度を設定するために，Google Map で緯度・経度を調べる．

1. Google Map を開く

   https://www.google.co.jp/maps

2. Google Map で好きな場所に移動する
   
3. 右クリックして，「この場所について」を選ぶ
   
4. 緯度，経度が表示されるので，メモしておく
   

folium による基本的な地図表示

Python の folium パッケージを使い，プログラムを簡単なコマンドで作成できる．

• 緯度経度： 34.4461, 133.2315
• ズームレベル： 12

OpenStreetMap を使い，緯度経度 34.4461, 133.2315 の地点を含むタイル地図を，ズームレベル 12 で表示する．HTML + JavaScript（leaflet.js 使用）のファイル a.html が生成される．

先ほど調べた「カレントディレクトリ」に a.html が作成される．

a.html をウェブブラウザで開く．

マウスで拡大縮小，移動できるので確認しておく．

a.html の中身は次のようになっている．

folium パッケージが扱える地図の種類（データソースの種類）

folium の組み込みタイルセット（データソースの種類）は次の通りである．

• OpenStreetMap ※ 既定（デフォルト）
• CartoDB Positron
• CartoDB dark_matter

このほかにも，タイルプロバイダの URL とアトリビューション（帰属表示）を指定することで，さまざまなタイルセットを利用できる．詳細は folium 公式ドキュメントを参照のこと．

CartoDB Positron

1. 次の Python プログラムを実行する（ソースコードは第5章に掲載）．
   
2. 「カレントディレクトリ」に HTML ファイル a2.html ができている
   
3. a2.html をウェブブラウザで開くと，明るい配色のシンプルな地図が表示される
   

CartoDB dark_matter

1. 次の Python プログラムを実行する（ソースコードは第5章に掲載）．
   
2. 「カレントディレクトリ」に HTML ファイル a3.html ができている
   
3. a3.html をウェブブラウザで開くと，暗い配色の地図が表示される
   

マーカー付き地図の表示

マーカーはプログラムで自動配置できる． マーカーをクリックするとポップアップ表示も簡単に実現できる．

folium 公式ドキュメント（Getting started）に記載のサンプルプログラム（https://media.readthedocs.org/pdf/folium/latest/folium.pdf にも掲載）を実行する．

1. 「カレントディレクトリ」に HTML ファイル b.html ができている
   
2. b.html をウェブブラウザで開く．マーカーが2個あることを確認する．
   
3. マーカーをクリックするとポップアップ表示が出る
   

マーカーのカスタマイズ（アイコンと色の変更）

folium.Icon を使うと，マーカーの色やアイコンを変更できる．以下の例では，2つのマーカーにそれぞれ異なる色とアイコンを設定している．

1. c.html をウェブブラウザで開くと，赤色の雲アイコンと緑色の木アイコンのマーカーが表示される

CircleMarker による円形マーカーの表示

folium.CircleMarker を使うと，指定した位置に円形のマーカーを表示できる．半径，色，塗りつぶしの有無などを指定する．

1. d.html をウェブブラウザで開くと，青い円形のマーカーが表示される．クリックするとポップアップも表示される

5. ソースコード

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

import os
print(os.getcwd())

基本的な地図表示（OpenStreetMap，ズームレベル 12）

import folium
m = folium.Map(location=[34.4461, 133.2315], zoom_start=12)
m.save("a.html")

CartoDB Positron タイルの地図表示

import folium
m = folium.Map(location=[34.4461, 133.2315], zoom_start=12, tiles='CartoDB Positron')
m.save("a2.html")

CartoDB dark_matter タイルの地図表示

import folium
m = folium.Map(location=[34.4461, 133.2315], zoom_start=12, tiles='CartoDB dark_matter')
m.save("a3.html")

マーカー付き地図の表示

import folium
m = folium.Map(location=[45.372, -121.6972], zoom_start=12)
folium.Marker([45.3288, -121.6625], popup='Mt. Hood Meadows').add_to(m)
folium.Marker([45.3311, -121.7113], popup='Timberline Lodge').add_to(m)
m.save("b.html")

マーカーのカスタマイズ（アイコンと色の変更）

import folium
m = folium.Map(location=[45.372, -121.6972], zoom_start=12)
folium.Marker([45.3288, -121.6625], popup='Mt. Hood Meadows', icon=folium.Icon(color='red', icon='cloud')).add_to(m)
folium.Marker([45.3311, -121.7113], popup='Timberline Lodge', icon=folium.Icon(color='green', icon='tree-conifer')).add_to(m)
m.save("c.html")

CircleMarker による円形マーカーの表示

import folium
m = folium.Map(location=[34.4461, 133.2315], zoom_start=12)
folium.CircleMarker(location=[34.4461, 133.2315], radius=30, color='blue', fill=True, fill_color='cyan', popup='Circle Marker').add_to(m)
m.save("d.html")

6. まとめ

OpenStreetMap とタイル地図

OpenStreetMap は世界規模の無料のオンライン地図データベースシステムである．folium パッケージを使うことで，OpenStreetMap のタイル地図を表示する HTML + JavaScript（leaflet.js 使用）ファイルを簡単に生成できる．

folium の組み込みタイルセット

folium の組み込みタイルセットとして，OpenStreetMap（既定），CartoDB Positron，CartoDB dark_matter がある．タイルプロバイダの URL とアトリビューションを指定すれば，他のタイルセットも利用できる．

マーカーの自動配置とポップアップ表示

マーカーはプログラムで自動配置できる．マーカーをクリックするとポップアップ表示を行うことも簡単に実現できる．folium.Marker で位置と popup テキストを指定するだけでよい．

マーカーのカスタマイズ

folium.Icon を使うとマーカーの色やアイコンを変更できる．folium.CircleMarker を使うと円形のマーカーを表示でき，半径，色，塗りつぶしの有無などを指定できる．

緯度経度の調べ方

緯度経度の設定のために，Google Map を使って緯度・経度を調べることができる．Google Map で場所に移動し，右クリックして「この場所について」を選ぶと緯度，経度が表示される．