金子邦彦研究室プログラミングPythonマーカー付きの 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 のインストール(Windows 上)

サイト内の関連ページ

関連する外部ページ

Python の公式ページ: https://www.python.org/

Python の pandas, folium のインストール

Windows の場合

  1. Windows で,コマンドプロンプト管理者として実行
  2. pandas, folium のインストール

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

    python -m pip install -U pandas folium
    

Ubuntu の場合

Ubuntu では, 次のコマンドを実行.

sudo apt -y update
sudo apt -y install python3-pandas python3-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 地図表示

Python プログラムの実行

Python 開発環境(Jupyter Qt Console, Jupyter ノートブック (Jupyter Notebook), Jupyter Lab, Nteract, Spyder, PyCharm, PyScripterなど)も便利である.

Python のまとめ: 別ページ »にまとめ

  1. 次の Python プログラムを実行
    import os
    print(os.getcwd())
    

    [image]

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

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

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

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

    [image]

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

    [image]
  5. 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]