トップページ -> データベース研究スタート -> インタラクティブ,ダイナミックな地図(OpenStreetMap を利用) -> Python + leaflet.js + folium を用いて OpenStreetMap 地図表示、マーカーのオーバーレイ表示
[サイトマップへ]  

Python + leaflet.js + folium を用いて OpenStreetMap 地図表示、マーカーのオーバーレイ表示

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.continuum.io/downloads#windowsを開く

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

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

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

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

Anaconda プロンプトを管理者として開き,次のコマンドを実行.

conda install pandas
conda install -c conda-forge 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. マーカーをクリックするとポップアップ表示が出る