トップページ -> 最新情報技術の実習と研究ツール -> インタラクティブ,ダイナミックな地図(OpenStreetMap を利用) -> マーカー付きの OpenStreetMap 地図(Python + leaflet.js + folium を使用)
[サイトマップへ]  

マーカー付きの 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でも同様の手順です).

  1. https://www.anaconda.com/downloadを開く

  2. Download」をクリックする.

  3. ダウンロードが始まるので確認する.

  4. ダウンロードした .exe ファイルを実行して,Anacondaをインストール.

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

  1. Windows で,コマンドプロンプトを管理者として実行

  2. 次のコマンドを実行.
    conda install -y pandas
    conda install -y -c conda-forge folium
    

    ※ 「Proceed ([y]/n)?」と表示されたら, y + Enter で続行する.「反応が遅いなあ」と思ったら、Enter キーを押してみる.

  3. インストールできたことの確認

    バージョン番号が表示されれば OK

    conda list folium
    

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

  1. Microsoft Build ToolsVisual Studio 2017 をインストールする

  2. VS 2017 用 x64 Native Tools コマンドプロンプト管理者として起動する

    起動は,Windows のメニューで「Visual Studio 2017」の下の「VS 2017用 x64 Native Tools コマンドプロンプト」のように操作する.

  3. VS 2017 用 x64 Native Tools コマンドプロンプトで,次のコマンドを実行
    python -m pip instal --upgrade pip
    pip install git+https://github.com/python-visualization/folium
    

  4. 終了の確認

    エラーメッセージが出ていないことを確認

  5. インストールできたことの確認

    バージョン番号が表示されれば OK

    conda list folium
    

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

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

  1. Google Map を開く

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

  2. Google Map で好きな場所に移動する

  3. 右クリックして,「この場所について」を選ぶ

  4. 緯度,経度が表示されるので,メモしておく


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

IPython シェル」を使う.

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

  1. IPython シェルで,pwd() を実行して,カレントディレクトリを確認

    次を実行

    pwd()
    

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

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

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

    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のタイル地図をダウンロードして表示する leaflet.js プログラム」の作成だった. 他の地図も試してみる.

Stamen Terrain

IPython シェル」を使う.

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

  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

IPython シェル」を使う.

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

  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 地図表示

手順

IPython シェル」を使う.

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

  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 をウェブブラウザで開いてみる.マーカーが2個あることを確認.

  5. マーカーをクリックするとポップアップ表示が出る