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

目次

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

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

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

OpenStreetMap (https://www.openstreetmap.org)は， 世界規模の無料のオンライン地図データベースシステムである． leaflet.js は地図表示等の機能を持つ JavaScript ライブラリである． folium は leaflet.js を利用する JavaScript プログラムを生成できる Python パッケージである．

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\""
if not "%ERRORLEVEL%"=="0" ( color 0c & echo Python 3.12 のインストールに失敗しました & ping 127.0.0.1 -n 6 >nul & color )

REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; if(Test-Path $p){$k=[Microsoft.Win32.Registry]::LocalMachine.OpenSubKey('SYSTEM\CurrentControlSet\Control\Session Manager\Environment',$true); $c=$k.GetValue('Path','',[Microsoft.Win32.RegistryValueOptions]::DoNotExpandEnvironmentNames); $t=$k.GetValueKind('Path'); $new=$c; if((';'+$new+';') -notlike \"*;$p;*\"){$new=$p+';'+$new}; if((';'+$new+';') -notlike \"*;$s;*\"){$new=$s+';'+$new}; if($new -ne $c){$k.SetValue('Path',$new,$t)}; $k.Close()}"

REM 現在のセッションにも反映（システムPATHを再取得して連結）
for /f "usebackq tokens=2,*" %A in (`reg query "HKLM\SYSTEM\CurrentControlSet\Control\Session Manager\Environment" /v Path`) do set "PATH=%B"

REM pip / wheel の更新
python -m pip install --no-user -U pip wheel
if not "%ERRORLEVEL%"=="0" ( color 0c & echo pip / wheel の更新に失敗しました & ping 127.0.0.1 -n 6 >nul & color )

方法 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 ============================================================
REM Build Tools + Desktop development with C++（VCTools）+ 追加コンポーネント（一括）
REM 未インストール時: winget で新規インストール
REM インストール済み時: setup.exe modify でコンポーネント追加（バージョンは変更しない）
winget list --id Microsoft.VisualStudio.BuildTools 2>nul | findstr /i "BuildTools" >nul 2>&1
if %ERRORLEVEL% EQU 0 (
    for /f "usebackq delims=" %P in (`"C:\Program Files (x86)\Microsoft Visual Studio\Installer\vswhere.exe" -products Microsoft.VisualStudio.Product.BuildTools -property installationPath`) do start /wait "" "C:\Program Files (x86)\Microsoft Visual Studio\Installer\setup.exe" modify --installPath "%P" --add Microsoft.VisualStudio.Workload.VCTools --add Microsoft.VisualStudio.Workload.MSBuildTools --add Microsoft.VisualStudio.Component.VC.CMake.Project --add Microsoft.VisualStudio.Component.VC.Llvm.Clang --add Microsoft.VisualStudio.Component.VC.Llvm.ClangToolset --add Microsoft.VisualStudio.Component.Windows11SDK.26100 --add Microsoft.VisualStudio.Component.VC.v143.x86.x64 --includeRecommended --quiet --norestart --nocache
    if not "%ERRORLEVEL%"=="0" ( color 0c & echo Build Tools のコンポーネント追加に失敗しました & ping 127.0.0.1 -n 6 >nul & color )
) else (
    winget install --scope machine --id Microsoft.VisualStudio.BuildTools -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --override "--quiet --wait --norestart --nocache --add Microsoft.VisualStudio.Workload.VCTools --includeRecommended --add Microsoft.VisualStudio.Workload.MSBuildTools --add Microsoft.VisualStudio.Component.VC.CMake.Project --add Microsoft.VisualStudio.Component.VC.Llvm.Clang --add Microsoft.VisualStudio.Component.VC.Llvm.ClangToolset --add Microsoft.VisualStudio.Component.Windows11SDK.26100 --add Microsoft.VisualStudio.Component.VC.v143.x86.x64"
    if not "%ERRORLEVEL%"=="0" ( color 0c & echo Build Tools のインストールに失敗しました & ping 127.0.0.1 -n 6 >nul & color )
)

REM 全ユーザー共有の拡張機能フォルダ
if not exist "C:\ProgramData\vscode-extensions" mkdir "C:\ProgramData\vscode-extensions"
icacls "C:\ProgramData\vscode-extensions" /grant "Everyone:(OI)(CI)M" /T

REM スタートメニューのショートカットを --extensions-dir 付きで再作成
if exist "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code" rmdir /s /q "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code"
if exist "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk" del "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk"
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

REM settings.json を作成（自動更新オフ、Python、Claude Code 設定）
if not exist "%APPDATA%\Code\User" mkdir "%APPDATA%\Code\User"
python -c "import json,os;data={'update.mode':'none','update.enableWindowsBackgroundUpdates':False,'extensions.autoUpdate':False,'python.defaultInterpreterPath':r'C:\Program Files\Python312\python.exe','claudeCode.environmentVariables':[{'name':'ANTHROPIC_API_KEY','value':'not-needed'},{'name':'ANTHROPIC_AUTH_TOKEN','value':'ollama'},{'name':'ANTHROPIC_BASE_URL','value':'http://localhost:11434'},{'name':'ANTHROPIC_MODEL','value':'glm-4.7-flash'},{'name':'CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC','value':'1'}]};p=os.path.join(os.environ['APPDATA'],'Code','User','settings.json');open(p,'w',encoding='utf-8').write(json.dumps(data,indent=4));print('Done:',p)"

REM 自動更新の抑止ポリシー（settings.json に加えて、レジストリ側でも明示的にオフ）
reg add "HKLM\SOFTWARE\Policies\Microsoft\VSCode" /v "UpdateMode" /t REG_SZ /d "none" /f
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 folium

6. 基礎知識と準備（緯度経度の調べ方・地図の種類）

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

プログラムが生成する HTML ファイルは，プログラムを実行したときのカレントディレクトリ（現在の作業フォルダ）に作られる．カレントディレクトリが分からないと，生成したファイルの場所が分からなくなる．次の Python プログラムで，カレントディレクトリのパスを確認できる． 

import os
print(os.getcwd())

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

地図に表示する地点を決めるために，Google Map で緯度・経度を調べる．

  1. Google Map を開く

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

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

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

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

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

7. 演習1：基本的な地図表示（OpenStreetMap）

テーマ：OpenStreetMap のタイル地図を表示する．

手順：

  1. 次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．緯度経度 34.4461, 133.2315 の地点を，ズームレベル 12 で表示する．
import folium
m = folium.Map(location=[34.4461, 133.2315], zoom_start=12)
m.save("a.html")
  1. 実行すると，カレントディレクトリに HTML ファイル a.html が生成される．
  2. a.html をウェブブラウザで開くと，OpenStreetMap の地図が表示される．
  3. 地図をマウスで拡大縮小，移動できることを確認する．

ヒント：緯度経度は location に [緯度, 経度] の順で指定する．ズームの初期値は zoom_start で指定する．

考察ポイント：生成された a.html は HTML + JavaScript（leaflet.js 使用）で書かれている．ブラウザだけで地図の拡大縮小や移動ができるのはなぜかを，ファイルの中身（上の画像）と照らして考える．

8. 演習2：CartoDB Positron タイルの地図表示

テーマ：明るい配色の CartoDB Positron タイルで地図を表示する．

手順：

  1. 次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．
import folium
m = folium.Map(location=[34.4461, 133.2315], zoom_start=12, tiles="Cartodb Positron")
m.save("a2.html")
  1. カレントディレクトリに HTML ファイル a2.html が生成される．
  2. a2.html をウェブブラウザで開くと，明るい配色のシンプルな地図が表示される．

ヒント：タイルの種類は tiles で指定する．既定は OpenStreetMap である．

考察ポイント：演習1の OpenStreetMap と見比べて，表示される地物（道路・建物・ラベルなど）の描き方がどう違うかを読み取る．

9. 演習3：CartoDB dark_matter タイルの地図表示

テーマ：暗い配色の CartoDB dark_matter タイルで地図を表示する．

手順：

  1. 次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．
import folium
m = folium.Map(location=[34.4461, 133.2315], zoom_start=12, tiles="Cartodb dark_matter")
m.save("a3.html")
  1. カレントディレクトリに HTML ファイル a3.html が生成される．
  2. a3.html をウェブブラウザで開くと，暗い配色の地図が表示される．

ヒント：演習2との違いは tiles に渡す文字列だけである．

考察ポイント：同じ緯度経度・ズームでも配色が変わると地図の見え方がどう変わるか，用途（夜間表示・データの重ね合わせなど）と結びつけて考える．

10. 演習4：マーカー付き地図の表示

テーマ：地図上にマーカーを自動配置し，クリックでポップアップを表示する．

手順：

  1. 次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．
import folium
m = folium.Map(location=[45.3288, -121.6625], zoom_start=12)
folium.Marker(location=[45.3288, -121.6625], popup="Mt. Hood Meadows").add_to(m)
folium.Marker(location=[45.3311, -121.7113], popup="Timberline Lodge").add_to(m)
m.save("b.html")
  1. カレントディレクトリに HTML ファイル b.html が生成される．
  2. b.html をウェブブラウザで開き，マーカーが2個あることを確認する．
  3. マーカーをクリックするとポップアップ（例：Mt. Hood Meadows）が表示される．

ヒント：folium.Marker に位置と popup テキストを指定し，.add_to(m) で地図に追加する．マーカーは必要な数だけ追加できる．

考察ポイント：2つのマーカーの座標と地図上の位置の対応を確認し，ポップアップに表示される文字列がコードのどの部分で決まっているかを読み取る．

11. 演習5：マーカーのカスタマイズ（アイコンと色の変更）

テーマ：マーカーの色とアイコンを変更する．

手順：

  1. 次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．
import folium
m = folium.Map(location=[45.3288, -121.6625], zoom_start=12)
folium.Marker(location=[45.3288, -121.6625], popup="Mt. Hood Meadows", icon=folium.Icon(color="red", icon="cloud")).add_to(m)
folium.Marker(location=[45.3311, -121.7113], popup="Timberline Lodge", icon=folium.Icon(color="green", icon="tree-conifer")).add_to(m)
m.save("c.html")
  1. カレントディレクトリに HTML ファイル c.html が生成される．
  2. c.html をウェブブラウザで開くと，赤色の雲アイコンと緑色の木アイコンのマーカーが表示される．

ヒント：folium.Icon の color で色を，icon でアイコンの種類を指定する．アイコン名は既定で Bootstrap の glyphicon（例：cloud，tree-conifer）を使う．

考察ポイント：演習4のマーカーと見比べて，icon 引数を追加したことで見た目がどう変わったかを確認する．

12. 演習6：CircleMarker による円形マーカーの表示

テーマ：円形のマーカー（CircleMarker）を表示する．

手順：

  1. 次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．
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")
  1. カレントディレクトリに HTML ファイル d.html が生成される．
  2. d.html をウェブブラウザで開くと，青い円形のマーカーが表示される．クリックするとポップアップも表示される．

ヒント：radius はピクセル単位で半径を指定する（地図を拡大縮小しても画面上の大きさは変わらない）．color は円の線の色，fill_color は塗りつぶしの色である．

考察ポイント：演習4の Marker（ピン型）と CircleMarker（円形）の違いを確認し，ズームを変えても円の大きさが画面上で変わらないことを観察する．

13. ソースコード

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

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.3288, -121.6625], zoom_start=12)
folium.Marker(location=[45.3288, -121.6625], popup="Mt. Hood Meadows").add_to(m)
folium.Marker(location=[45.3311, -121.7113], popup="Timberline Lodge").add_to(m)
m.save("b.html")

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

import folium
m = folium.Map(location=[45.3288, -121.6625], zoom_start=12)
folium.Marker(location=[45.3288, -121.6625], popup="Mt. Hood Meadows", icon=folium.Icon(color="red", icon="cloud")).add_to(m)
folium.Marker(location=[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")

14. まとめ

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 で場所に移動し，右クリックして「この場所について」を選ぶと緯度，経度が表示される．