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

サイトマップ

サイト内検索

用語集

アクセスログ

金子邦彦研究室

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

前準備

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

• Windows での Python のインストール，pip と setuptools の更新: 別ページで説明している．（あとのトラブルが起きにくいような手順を定めている）
• Ubuntu の場合:

  システム Python を使うことができる（その場合，Python のインストールは行わない）

  システム Python を用いるときは，pip, setuptools の更新は次のコマンドで行う．

  sudo apt -y update
  sudo apt -y install python3-pip python3-setuptools
  

  Ubuntu で，システム Python 以外の Python をインストールしたい場合は pyenv が便利である: 別ページで説明している．

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

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

Windows での マイクロソフト C++ ビルドツール (Build Tools) のインストール手順: 別ページで説明している．

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

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

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

   python -m pip install -U pandas folium
   

   端末で，次のコマンドを実行．

   python -m pip install U pandas folium
   
3. インストールできたことの確認

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

   pip show folium
   

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

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

1. Google Map を開く

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

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

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

1. Jupyter Qt Console を起動

   jupyter qtconsole
   

   ->

   Iris データセットの準備

   Python プログラムを動かす

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

   開発環境や Python コンソール（Jupyter Qt Console，Spyder，PyCharm，PyScripter など）の利用も便利である．

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

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

2. 次を実行

   import os
   print(os.getcwd())
   

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

3. 「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")
   
4. 先ほど調べた「カレントディレクトリ」に HTML ファイルa.htmlができている
5. a.html をウェブブラウザで開いてみる

   マウスで拡大縮小、移動できるので確認しておく
6. a.html の中身は次のようになっている

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

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

• OpenStreetMap ※ 既定（デフォルト）
• Stamen Terrain
• Stamen Toner

など

先ほどは，「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. マーカーをクリックするとポップアップ表示が出る