トップページ -> 実践知識 -> インタラクティブ,ダイナミックな地図(OpenStreetMap を利用) -> マーカーとイメージポップアップ付きの OpenStreetMap 地図(Python + leaflet.js + folium を使用)
[サイトマップへ], サイト内検索:

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

金子邦彦研究室: データベース、人工知能(AI)、データサイエンスの融合により不可能を可能にする
OpenStreetMap (http://www.openstreetmap.org)は, 世界規模の無料で使えるオンラインの地図データベースシステム. leaflet.js は地図表示等の機能を持った JavaScript のライブラリ. folium は leaflet.js の機能を使う JavaScript プログラムの生成などができる Python のパッケージ。

先人に感謝


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

前準備として,Python 処理系のインストールが終わっていること.

Python のインストール

以下,Windows でインストール済みであるものとして説明を続けます.

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

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

  2. pandas, folium のインストール

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

    pip install -U pandas folium 
    
    

    Anaconda を使う場合は、コマンドプロンプトで、次のコマンドを実行.

    conda install -y pandas
    conda install -y -c conda-forge folium
    

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

  3. インストールできたことの確認

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

    pip show folium
    

    Anaconda を使う場合は、コマンドプロンプトで、次のコマンドを実行.

    conda list folium
    

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

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

  1. Google Map を開く

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

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

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

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


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

Python コンソール」を使う.

PyCharmか, Anacondaに入っているspyder を使うのが簡単

  1. Python コンソールで,カレントディレクトリを確認

    次を実行

    import os
    print(os.getcwd())
    

  2. 画像ファイルの準備
    1. Web ブラウザを開き、次の URL を開く

      https://www.kkaneko.jp/dblab/sampledata/photo-2017-12-03

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

      これは、複数の画像ファイルが入った .zip ファイルである

    3. 先ほど調べた「カレントディレクトリ」のに「photo」というサブディレクトリを作る. そのディレクトリに画像ファイルを置く

  3. Python プログラムを動かしたい。 「Python コンソール」を使う.

    PyCharmか, Anacondaに入っているspyder を使うのが簡単

    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. 先ほど調べた「カレントディレクトリ」に HTML ファイルb.htmlができている

  6. できたファイル b.html Web ブラウザで開いてみる.マーカ−付きの地図が表示されれば OK.

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