[サイトマップへ]

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

OpenStreetMap (http://www.openstreetmap.org)は，世界規模の無料で使えるオンラインの地図データベースシステム． leaflet.js は地図表示等の機能を持った JavaScript のライブラリ. folium は leaflet.js の機能を使う JavaScript プログラムの生成などができる Python のパッケージ。

先人に感謝

キーワード: OpenStreetMap, Python, leaflet.js, folium, タイル地図, マーカー

前もって準備しておくこと

前準備として，Anaconda のインストールが終わっていること．手順を下に説明しています．

Anaconda のインストール

Python 3 の開発環境である Anacondaをおすすめ．Window でのインストール手順は次の通りです（Linuxでも同様の手順です）．

https://www.anaconda.com/downloadを開く
「Download」をクリックする．
ダウンロードが始まるので確認する．
ダウンロードした .exe ファイルを実行して，Anacondaをインストール．

Windows でPython のパッケージ pandas, folium のインストール

Windows で，コマンドプロンプトを管理者として実行
次のコマンドを実行．
```
conda install -y pandas
conda install -y -c conda-forge folium
```
※ 「Proceed ([y]/n)?」と表示されたら， y + Enter で続行する．「反応が遅いなあ」と思ったら、Enter キーを押してみる．
インストールできたことの確認
バージョン番号が表示されれば OK
```
conda list folium
```

※ 「conda install -y -c conda-forge folium」ではなくて， GitHub からソースコードをダウンロードしてインストールしたい場合

Microsoft Build Tools か Visual Studio 2017 をインストールする
VS 2017 用 x64 Native Tools コマンドプロンプトを管理者として起動する
起動は，Windows のメニューで「Visual Studio 2017」の下の「VS 2017用 x64 Native Tools コマンドプロンプト」のように操作する.

VS 2017 用 x64 Native Tools コマンドプロンプトで，次のコマンドを実行

python -m pip instal --upgrade pip
pip install git+https://github.com/python-visualization/folium

終了の確認
エラーメッセージが出ていないことを確認
インストールできたことの確認
バージョン番号が表示されれば OK
```
conda list folium
```

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

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

Google Map を開く
https://www.google.co.jp/maps
Google Map で好きな場所に移動する
右クリックして，「この場所について」を選ぶ
緯度，経度が表示されるので，メモしておく

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

「IPython シェル」を使う．

※ Anacondaに入っている開発環境 spyder を実行し，右下の ipython コンソールを使うのが簡単．

IPython シェルで，pwd() を実行して，カレントディレクトリを確認
次を実行
```
pwd()
```
※ あとで，ファイルを作成する．ファイルはカレントディレクトリに作成される．（カレントディレクトリが分からないと，あとで，ファイルがどこにあるか分からなくなる）．
「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")
```
先ほど調べた「カレントディレクトリ」に HTML ファイルa.htmlができている
a.html をウェブブラウザで開いてみる
マウスで拡大縮小、移動できるので確認しておく
a.html の中身は次のようになっている

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

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

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

など

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

Stamen Terrain

「IPython シェル」を使う．

※ Anacondaに入っている開発環境 spyder を実行し，右下の ipython コンソールを使うのが簡単．

次の Python プログラムを実行

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

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

Stamen Toner

「IPython シェル」を使う．

※ Anacondaに入っている開発環境 spyder を実行し，右下の ipython コンソールを使うのが簡単．

次の Python プログラムを実行

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

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

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

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

手順

「IPython シェル」を使う．

※ Anacondaに入っている開発環境 spyder を実行し，右下の ipython コンソールを使うのが簡単．

次の 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

引き続いて，次の Python プログラムを実行
```
map_1.save("b.html")
```
先ほど調べた「カレントディレクトリ」に HTML ファイル b.html ができている
できたファイル b.html をウェブブラウザで開いてみる．マーカーが２個あることを確認．
マーカーをクリックするとポップアップ表示が出る