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

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

サイト構成 連絡先,業績 実践知識 コンピュータ 教材 サポートページ
OpenStreetMap (http://www.openstreetmap.org)は, 世界規模の無料で使えるオンラインの地図データベースシステム. leaflet.js は地図表示等の機能を持った JavaScript のライブラリ. folium は leaflet.js の機能を使う JavaScript プログラムの生成などができる Python のパッケージ。

先人に感謝


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

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

Python のインストール

※ Python のプログラム作成には、PyCharmなどが便利である.

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

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
    


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