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

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

先人に感謝

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

前準備

Python のインストールと必要なPythonライブラリのインストール（Windows上）

  1. Python のインストール

    注：既にPython（バージョン3.12を推奨）がインストール済みの場合は，この手順は不要である．

    winget（Windowsパッケージマネージャー）を使用してインストールを行う

    1. Windowsで，コマンドプロンプトを管理者権限で起動する（例：Windowsキーを押し，「cmd」と入力し，「管理者として実行」を選択）
    2. winget（Windowsパッケージマネージャー）が利用可能か確認する： 
      winget --version
    3. Pythonのインストール（下のコマンドにより Python 3.12 がインストールされる）． 
      winget install --scope machine Python.Launcher
winget install --scope machine Python.Python.3.12
  2. 必要なPythonライブラリのインストール
    1. Windowsで，コマンドプロンプトを管理者権限で起動する（例：Windowsキーを押し，「cmd」と入力し，「管理者として実行」を選択）
    2. 以下のコマンドを実行し，必要なライブラリをインストールする． 
      pip install -U pandas folium

【関連する外部ページ】

【サイト内の関連ページ】

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

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

  1. Google Map を開く

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

  2. Google Map で好きな場所に移動する
  3. 右クリックして，「この場所について」を選ぶ
  4. 緯度，経度が表示されるので，メモしておく

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

Python プログラムの実行

【サイト内の関連ページ】 Python のまとめ: 別ページ »

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

    * あとで，ファイルを作成する．ファイルはカレントディレクトリに作成される． （カレントディレクトリが分からないと，あとで，ファイルがどこにあるか分からなくなる）．

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

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

    • 緯度経度： 34.4461, 133.2315
    • レイヤ番号： 12

    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

  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

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

手順

  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 をウェブブラウザで開いてみる．マーカーが２個あることを確認．
  5. マーカーをクリックするとポップアップ表示が出る