トップページ -> データベース関連技術 -> インタラクティブ,ダイナミックな地図(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, タイル地図, マーカー


前準備

Python のインストール,pip と setuptools の更新,Python 開発環境のインストール

Windows の場合

  1. Python のインストール

    Python の URL: http://www.python.org/

    インストール手順の詳細は: 別ページで説明している.

  2. pip と setuptools の更新Python 開発環境(JupyterLab, spyder)のインストール

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

    python -m pip install -U pip setuptools
    python -m pip install -U jupyterlab jupyter jupyter-console jupytext spyder
    

Ubuntu の場合

システム Python を使用(インストール操作は不要)

  1. pip と setuptools の更新Python 開発環境(JupyterLab, spyder)のインストール

    次のコマンドを実行.

    sudo apt -yV install python3-dev python3-pip python3-setuptools
    sudo apt -yV install jupyter-qtconsole jupyter-notebook python3-jupyter-client python3-jupyter-console python3-spyder spyder3
    

(Windowsの場合のみ)Visual C++ ビルドツール (Build Tools) のインストール

Windows での Visual C++ ビルドツール (Build Tools) のインストール手順: 別ページで説明している.

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

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

    [image]
  2. pandas, folium のインストール

    コマンドプロンプトで、次のコマンドを実行.

    python -m pip install -U pandas folium
    

    次のコマンドを実行.

    python -m pip install U pandas folium
    

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

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

    pip show folium
    

    [image]

※ GitHub からソースコードをダウンロードしてインストールしたい場合

  1. Visual Studio の x64 Native Tools コマンドプロンプト管理者として起動する

    ※ 起動は,Windows のメニューで「Visual Studio 20..」の下の「x64 Native Tools コマンドプロンプト (Command Prompt)」(あるいは類似名のもの)を選ぶ

    ※ 「x64 Native Tools コマンドプロンプト (Command Prompt)」がないときは, Visual C++ ビルドツールのインストールを行う. Visual C++ ビルドツールのインストール手順は,別ページで説明している.
    .
  2. x64 Native Tools コマンドプロンプトで,次のコマンドを実行
    python -m pip instal --upgrade pip
    pip install git+https://github.com/python-visualization/folium
    

    [image]
  3. 終了の確認

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

    [image]
  4. インストールできたことの確認

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

    pip show folium
    

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

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

  1. Google Map を開く

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

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

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

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

    [image]

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

  1. Jupyter Qt Console を起動

    jupyter qtconsole
    

    [image]

    Python プログラムを動かして,結果を見たい.

    Jupyter Qt ConsolespyderPyCharmPyScripter が便利である. Windows では,スタートメニューの「IDLE (Python ...)」も便利である.

    ※ 「jupyter qtconsole」を入れたのに,jupyter qtconsole起動しない という場合には,次の操作で,インストールを行ってから,もう一度試してみる.

    python -m pip install -U jupyterlab jupyter jupyter-console jupytext spyder
    
  2. 次を実行
    import os
    print(os.getcwd())
    

    [image]

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

  3. 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")
    

    [image]
  4. 先ほど調べた「カレントディレクトリ」に HTML ファイルa.htmlができている

    [image]
  5. a.html をウェブブラウザで開いてみる

    [image]

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

    [image]
  6. a.html の中身は次のようになっている

    [image]

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

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

など

先ほどは,「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")
    

    [image]
  2. 先ほど調べた「カレントディレクトリ」に HTML ファイル a2.html ができている

    [image]
  3. a2.html をウェブブラウザで開いてみる

    [image]

Stamen Toner

  1. 次の Python プログラムを実行
    import folium
    m = folium.Map(location=[34.4461, 133.2315], zoom_start=12, tiles='Stamen Toner')
    m.save("a3.html")
    

    [image]
  2. 先ほど調べた「カレントディレクトリ」に HTML ファイル a3.html ができている

    [image]
  3. a3.html をウェブブラウザで開いてみる

    [image]

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   
    

    [image]
  2. 引き続いて,次の Python プログラムを実行
    map_1.save("b.html")
    

    [image]
  3. 先ほど調べた「カレントディレクトリ」に HTML ファイル b.html ができている

    [image]
  4. できたファイル b.html をウェブブラウザで開いてみる.マーカーが2個あることを確認.

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

    [image]

本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]