トップページ -> データベース関連技術 -> インタラクティブ,ダイナミックな地図(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 のインストール,pip と setuptools の更新,Python 開発環境のインストール

Windows の場合

  1. Python のインストール

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

    インストール手順の詳細は: 別ページで説明している.

  2. pip と setuptools の更新Python 開発環境(JupyterLab, spyder)のインストール

    コマンドプロンプトを管理者として実行し,次のコマンドを実行.

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

Ubuntu の場合

システム Python を使用(インストール操作は不要)

  1. pip と setuptools の更新Python 開発環境(JupyterLab, spyder)のインストール

    次のコマンドを実行.

    sudo apt -yV install python3-dev python3-pip python3-setuptools
    sudo apt -yV install jupyter-qtconsole jupyter-notebook python3-jupyter-client python3-jupyter-console python3-spyder spyder3
    

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

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

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

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

    pip3 install -U pandas folium
    
    

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

    python -m pip install -U pandas folium
    

    [image]

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

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

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

    pip show folium
    

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

    pip show folium
    

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

    1. Jupyter Qt Console を起動

      jupyter qtconsole
      

      [image]

      Python プログラムを動かして,結果を見たい.

      Jupyter Qt ConsolespyderPyCharmPyScripter が便利である. Windows では,スタートメニューの「IDLE (Python ...)」も便利である.

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

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

    2. 次を実行
      import os
      print(os.getcwd())
      

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

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

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

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

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

        [image]
    4. 次を実行
      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
      

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

      [image]
    6. 先ほど調べた「カレントディレクトリ」に HTML ファイルb.htmlができている

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

      [image]
    8. マーカーをクリックするとポップアップ表示が出る

      [image]

本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]