トップページ -> 最新情報技術の実習と研究ツール -> インタラクティブ,ダイナミックな地図(OpenStreetMap を利用) -> マーカーとイメージポップアップ付きの OpenStreetMap 地図(Python + leaflet.js + folium を使用)
[サイトマップへ]  

マーカーとイメージポップアップ付きの OpenStreetMap 地図(Python + leaflet.js + folium を使用)

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

先人に感謝


前もって準備しておくこと

前準備として,Anaconda のインストールが終わっていること. 手順を下に説明しています.

Anaconda のインストール

Python 3 の開発環境である Anacondaをおすすめ.Window でのインストール手順は次の通りです(Linuxでも同様の手順です).

  1. https://www.anaconda.com/downloadを開く

  2. Download」をクリックする.

  3. ダウンロードが始まるので確認する.

  4. ダウンロードした .exe ファイルを実行して,Anacondaをインストール.

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

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

  2. 次のコマンドを実行.
    conda install -y pandas
    conda install -y -c conda-forge folium
    

    ※ 「Proceed ([y]/n)?」と表示されたら, y + Enter で続行する.「反応が遅いなあ」と思ったら、Enter キーを押してみる.


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

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

  1. Google Map を開く

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

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

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

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


Leaflet を用いたマーカー付き地図の例

IPython シェル」を使う.

Anacondaに入っている開発環境 spyder を実行し,右下の ipython コンソールを使うのが簡単.

  1. IPython シェルで,pwd() を実行して,カレントディレクトリを確認

    次を実行

    pwd()
    

  2. 画像ファイルの準備
    1. Web ブラウザを開き、次の URL から画像ファイルをダウンロード

      http://www.kunihikokaneko.com/dblab/sampledata/photo-2017-12-03

      ※ このディレクトリに .zip ファイルがある..zip ファイルをダウンロードして展開(解凍)

    2. pwd() で調べたディレクトリに「photo」というサブディレクトリを作る. そのディレクトリに画像ファイルを置く

  3. IPython シェル」で次を実行
    import folium
    m = folium.Map(location=[34.4586, 133.2295],
    zoom_start=18)
    
    folium.Marker([34.4579, 133.2295], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4579, 133.2295&cbp=11,0,0,0,0">1号館 <br/><img width="60" src="photo/1.jpg"></a>').add_to(m)
    folium.Marker([34.4571, 133.2305], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4571, 133.2305&cbp=11,0,0,0,0">2号館 <br/><img width="60" src="photo/2.jpg"></a>').add_to(m)
    folium.Marker([34.4570, 133.2310], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4570, 133.2310&cbp=11,0,0,0,0">3号館 <br/><img width="60" src="photo/3.jpg"></a>').add_to(m)
    folium.Marker([34.4593, 133.2303], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4593, 133.2303&cbp=11,0,0,0,0">6号館 <br/><img width="60" src="photo/6.jpg"></a>').add_to(m)
    folium.Marker([34.4574, 133.2282], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4574, 133.2282&cbp=11,0,0,0,0">8号館 <br/><img width="60" src="photo/8.jpg"></a>').add_to(m)
    folium.Marker([34.4569, 133.2291], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4569, 133.2291&cbp=11,0,0,0,0">9号館 <br/><img width="60" src="photo/9_a.jpg"></a>').add_to(m)
    folium.Marker([34.4567, 133.2292], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4567, 133.2292&cbp=11,0,0,0,0">9号館 <br/><img width="60" src="photo/9_b.jpg"></a>').add_to(m)
    folium.Marker([34.4569, 133.2291], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4569, 133.2291&cbp=11,0,0,0,0">9号館 <br/><img width="60" src="photo/9_c.jpg"></a>').add_to(m)
    folium.Marker([34.4585, 133.2273], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4585, 133.2273&cbp=11,0,0,0,0">10号館 <br/><img width="60" src="photo/10.jpg"></a>').add_to(m)
    folium.Marker([34.4590, 133.2274], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4590, 133.2274&cbp=11,0,0,0,0">11号館 <br/><img width="60" src="photo/11.jpg"></a>').add_to(m)
    folium.Marker([34.4589, 133.2271], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4589, 133.2271&cbp=11,0,0,0,0">12号館 <br/><img width="60" src="photo/12.jpg"></a>').add_to(m)
    folium.Marker([34.4595, 133.2274], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4595, 133.2274&cbp=11,0,0,0,0">13号館 <br/><img width="60" src="photo/13.jpg"></a>').add_to(m)
    folium.Marker([34.4594, 133.2299], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4594, 133.2299&cbp=11,0,0,0,0">14-1号館 <br/><img width="60" src="photo/14-1.jpg"></a>').add_to(m)
    folium.Marker([34.4587, 133.2301], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4587, 133.2301&cbp=11,0,0,0,0">14-2号館 <br/><img width="60" src="photo/14-2.jpg"></a>').add_to(m)
    folium.Marker([34.4575, 133.2320], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4575, 133.2320&cbp=11,0,0,0,0">15号館 <br/><img width="60" src="photo/15.jpg"></a>').add_to(m)
    folium.Marker([34.4573, 133.2331], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4573, 133.2331&cbp=11,0,0,0,0">16号館 <br/><img width="60" src="photo/16.jpg"></a>').add_to(m)
    folium.Marker([34.4570, 133.2331], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4570, 133.2331&cbp=11,0,0,0,0">17号館 <br/><img width="60" src="photo/17.jpg"></a>').add_to(m)
    folium.Marker([34.4568, 133.2333], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4568, 133.2333&cbp=11,0,0,0,0">18号館 <br/><img width="60" src="photo/18.jpg"></a>').add_to(m)
    folium.Marker([34.4584, 133.2327], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4584, 133.2327&cbp=11,0,0,0,0">19号館 <br/><img width="60" src="photo/19.jpg"></a>').add_to(m)
    folium.Marker([34.4571, 133.2300], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4571, 133.2300&cbp=11,0,0,0,0">20号館 <br/><img width="60" src="photo/20.jpg"></a>').add_to(m)
    folium.Marker([34.4566, 133.2307], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4566, 133.2307&cbp=11,0,0,0,0">21号館 <br/><img width="60" src="photo/21.jpg"></a>').add_to(m)
    folium.Marker([34.4566, 133.2309], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4566, 133.2309&cbp=11,0,0,0,0">22号館 <br/><img width="60" src="photo/22.jpg"></a>').add_to(m)
    folium.Marker([34.4562, 133.2307], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4562, 133.2307&cbp=11,0,0,0,0">23号館 <br/><img width="60" src="photo/23.jpg"></a>').add_to(m)
    folium.Marker([34.4578, 133.2330], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4578, 133.2330&cbp=11,0,0,0,0">24号館 <br/><img width="60" src="photo/24.jpg"></a>').add_to(m)
    folium.Marker([34.4563, 133.2323], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4563, 133.2323&cbp=11,0,0,0,0">25号館 <br/><img width="60" src="photo/25.jpg"></a>').add_to(m)
    folium.Marker([34.4584, 133.2318], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4584, 133.2318&cbp=11,0,0,0,0">27号館 <br/><img width="60" src="photo/27.jpg"></a>').add_to(m)
    folium.Marker([34.4571, 133.2336], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4571, 133.2336&cbp=11,0,0,0,0">28号館 <br/><img width="60" src="photo/28.jpg"></a>').add_to(m)
    folium.Marker([34.4559, 133.2307], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4559, 133.2307&cbp=11,0,0,0,0">29号館 <br/><img width="60" src="photo/29.jpg"></a>').add_to(m)
    folium.Marker([34.4579, 133.2284], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4579, 133.2284&cbp=11,0,0,0,0">30号館 <br/><img width="60" src="photo/30.jpg"></a>').add_to(m)
    folium.Marker([34.4590, 133.2267], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4590, 133.2267&cbp=11,0,0,0,0">31号館 <br/><img width="60" src="photo/31.jpg"></a>').add_to(m)
    folium.Marker([34.4580, 133.2334], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4580, 133.2334&cbp=11,0,0,0,0">32号館 <br/><img width="60" src="photo/32.jpg"></a>').add_to(m)
    folium.Marker([34.4573, 133.2328], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4573, 133.2328&cbp=11,0,0,0,0">33号館 <br/><img width="60" src="photo/33.jpg"></a>').add_to(m)
    folium.Marker([34.4571, 133.2329], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4571, 133.2329&cbp=11,0,0,0,0">33号館 <br/><img width="60" src="photo/33-2.jpg"></a>').add_to(m)
    folium.Marker([34.4589, 133.2281], popup='<a href="http://maps.google.com/maps?q=&layer=c&cbll=34.4589, 133.2281&cbp=11,0,0,0,0">34号館 <br/><img width="60" src="photo/34.jpg"></a>').add_to(m)
    m
    

  4. 引き続いて,次の Python プログラムを実行
    m.save("b.html")
    

  5. 先ほど pwd() で調べた「カレントディレクトリ」に HTML ファイル b.html ができている

  6. できたファイル b.html をウェブブラウザで開いてみる.

  7. マーカーをクリックするとポップアップ表示が出る