トップページ -> データベース研究スタート -> インタラクティブ,ダイナミックな地図(OpenStreetMap を利用) -> 緯度経度などのデータファイルから,マーカーとイメージポップアップ付きの OpenStreetMap 地図プログラムを生成
[サイトマップへ]  

緯度経度などのデータファイルから,マーカーとイメージポップアップ付きの OpenStreetMap 地図プログラムを生成

緯度経度の入ったデータファイル (CSVファイル形式)と folium を使って、OpenStreetMap 地図プログラムを生成します

先人に感謝


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

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

Anaconda のインストール

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

  1. https://www.continuum.io/downloads#windowsを開く

  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 キーを押してみる.


手順

次のような,緯度経度を含むデータファイルがあるとする

  1. IPython シェル」を使う.

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

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

    次を実行

    pwd()
    

  3. 緯度経度を含むデータファイルの準備
    1. Web ブラウザを開き、次の URL からデータファイルをダウンロード

      http://www.kkaneko.jp/dblab/sampledata/photo-2017-12-03/hoge.csv

    2. pwd() で調べたカレントディレクトリに、このファイルを置く

      ※ 上のようにダウンロードするのではなくて、他のデータファイルを用いるときは、文字コードを UTF-8 に変換しておくこと

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

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

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

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

  5. 確認のため、地図表示だけを行ってみる

    IPython シェル」で次を実行

    import pandas as pd
    import folium
    datafile = "hoge.csv"
    lat, lon = 34.4586, 133.2295 
    zoom_start = 18
    webfile_name = "c.html"
    
    m = folium.Map(location=[lat, lon], zoom_start=zoom_start)
    m.save(webfile_name)
    

    c.html ファイルができるので Web ブラウザで開いてみる.地図が表示されれば OK.

  6. 次は、データファイルの緯度経度などを使っての表示

    IPython シェル」で次を実行

    import pandas as pd
    import folium
    datafile = "hoge.csv"
    lat, lon = 34.4586, 133.2295 
    zoom_start = 18
    webfile_name = "c.html"
    
    m = folium.Map(location=[lat, lon], zoom_start=zoom_start)
    X = pd.read_csv(datafile)
    for index, r in X.iterrows(): 
        p = '<a href="http://maps.google.com/maps?q=&layer=c&cbll=%f, %f&cbp=11,0,0,0,0">%s <br/><img width="60" src="%s"></a>' % (r.lat, r.lon, r.building, r.imfile) 
        folium.Marker([r.lat, r.lon], popup=p).add_to(m)
    
    m.save(webfile_name)
    

    c.html ファイルができるので Web ブラウザで開いてみる.地図が表示されれば OK.

    マーカーをクリックすると、情報が表示される

    以上の操作でできたファイルは、こちらで確認できます: c.html をクリック