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

前準備

Python のインストール（Windows 上）

Windows での Python 3.10，関連パッケージ，Python 開発環境のインストール: 別ページ »で説明

【サイト内の関連ページ】

Python のまとめ: 別ページ »にまとめ

【関連する外部ページ】

Python の公式ページ: https://www.python.org/

Python の pandas, folium のインストール

Windows の場合

1. Windows で，コマンドプロンプトを管理者として実行．
2. pandas, folium のインストール

   コマンドプロンプトで、次のコマンドを実行する．

   python -m pip install -U pandas folium
   

Ubuntu の場合

Ubuntu では， 次のコマンドを実行．

sudo apt -y update
sudo apt -y install python3-pandas python3-folium

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

あとで緯度経度を設定するときのために，Google Map を使って緯度・経度を調べてみる

1. Google Map を開く

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

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

Python + leaflet.js + folium を用いて OpenStreetMap 地図表示

1. 次の Python プログラムを実行

   import os
   print(os.getcwd())
   

   

   ※ あとで，ファイルを作成する．ファイルはカレントディレクトリに作成される． （カレントディレクトリが分からないと，あとで，ファイルがどこにあるか分からなくなる）．

2. 「OpenStreetMapのタイル地図をダウンロードして表示する leaflet.js プログラム」の作成

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

   • 緯度経度： 34.4461, 133.2315
   • レイヤ番号： 12

   OpenStreetMap を使い，緯度経度が34.4461, 133.2315 のところを含むタイル地図で，レイヤ番号12のものを表示したい．そんな表示を行うHTML + JavaScript (leaflet.js を使用) のファイル a.html が生成される．

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

   
3. 先ほど調べた「カレントディレクトリ」に HTML ファイルa.htmlができている
   
4. a.html をウェブブラウザで開いてみる
   

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

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

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

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

• OpenStreetMap ※ 既定（デフォルト）
• Stamen Terrain
• Stamen Toner

など

先ほどは，「OpenStreetMapのタイル地図をダウンロードして表示する leaflet.js プログラム」の作成だった． 他の地図も試してみる．

Stamen Terrain

1. 次の Python プログラムを実行

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

   
2. 先ほど調べた「カレントディレクトリ」に HTML ファイル a2.html ができている
   
3. a2.html をウェブブラウザで開いてみる
   

Stamen Toner

1. 次の Python プログラムを実行

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

   
2. 先ほど調べた「カレントディレクトリ」に HTML ファイル a3.html ができている
   
3. a3.html をウェブブラウザで開いてみる
   

Python + leaflet.js + folium を用いて OpenStreetMap 地図表示

• マーカーは，プログラムを使って，自動で配置できる
• マーカーをクリックするとポップアップ表示のようなことも簡単にできる．

手順

1. 次の Python プログラムを実行

   https://media.readthedocs.org/pdf/folium/latest/folium.pdf に記載のサンプルプログラム（下に引用）を，spyder のコンソールで動かしてみる

   map_1 = folium.Map(location=[45.372, -121.6972],
   zoom_start=12,
   tiles='Stamen Terrain')
   folium.Marker([45.3288, -121.6625], popup='Mt. Hood Meadows').add_to(map_1)
   folium.Marker([45.3311, -121.7113], popup='Timberline Lodge').add_to(map_1)
   map_1   
   

   
2. 引き続いて，次の Python プログラムを実行

   map_1.save("b.html")
   

   
3. 先ほど調べた「カレントディレクトリ」に HTML ファイル b.html ができている
   
4. できたファイル b.html をウェブブラウザで開いてみる．マーカーが２個あることを確認．
   
5. マーカーをクリックするとポップアップ表示が出る