トップページ人工知能,実世界DBインタラクティブ,ダイナミックな地図(OpenStreetMap を利用)マーカー付きの OpenStreetMap 地図(Python + leaflet.js + folium を使用)

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

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

先人に感謝

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

前準備

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

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

【Python, pip の使い方】

Python, pip は,次のコマンドで起動できる.

Python 開発環境のインストール】

(Windowsの場合のみ)マイクロソフト C++ ビルドツール (Build Tools) のインストール

Windows での マイクロソフト 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 コマンドプロンプト (x64 Native Tools Command Prompt)」を選ぶ.「x64」は,64ビット版の意味である.

    ※ 「x64 Native Tools コマンドプロンプト (x64 Native Tools Command Prompt)」がないとき:

    Visual Studio Community のインストールを行うことで, 「x64 Native Tools コマンドプロンプト (x64 Native Tools Command Prompt)」もインストールされる.その手順は,別ページで説明している.

    .
  2. x64 Native Tools コマンドプロンプトで,次のコマンドを実行
    python -m pip install -U 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]
    ->

    Iris データセットの準備

    Python プログラムを動かす

    • Windows では,「python」コマンドやPython ランチャーである「py」コマンド
    • Ubuntu では,「python3」コマンド

    開発環境や Python コンソール(Jupyter Qt ConsoleSpyderPyCharmPyScripter など)の利用も便利である.

    ※ 「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]