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

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

問題定義

提案技術

期待される効果 簡易に構築運用可能な地図サービスシステム構築 ●こんなことでお困りではありませんか?  ・モバイル端末等で日々データを収集している。地図に表示させたいが。何とか素早く、確実に、安価にできないものか?  ・自ら(エンドユーザ)で、地図システムの中身を掌握しながら開発を進めたい.従来型システム開発(提案→仕様策定→実装→テスト)では間に合わず、よりクイックに開発したい ●こんなことができる、こんな用途が考えられます  モバイル端末(GPS付きも可能)で集めた緯度・経度付きの情報を、即時に、地図に一括表示.  地図に基づくあらゆる情報で、パーソナル、特定業務用途の性質をもつもの   ・ヒアリハット地図   ・道路等の検査、調査結果(交通状況、道路付帯施設状況など)   ・団体行動などの把握 ●システム構成 ●使用している既存の技術   拡張可能です:密度表示、住所やゲオコードとの変換 簡易なデモページ:

先人に感謝


前準備

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

Python のインストール

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

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

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

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

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

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

    ※ Anaconda 3 を使いたいときは「pip」と入れること.そうでないときは,「pip3」と入れること (間違って,Anaconda 3 内の pip を使ってしまうことが無いように,「pip」でなく「pip3」を入れるようにしている).

    pip3 install -U pandas folium
    
    

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

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

    [image]

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

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

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

    pip show folium
    

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

    conda list folium
    

    [image]

    緯度経度を含むデータファイルの準備

    カレントディレクトリの確認

    1. IPython シェル」を使う.

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

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

      次を実行

      pwd()
      

      [image]

      AjinKuriakose/UK-Road-Accident-Data-Analysis のデータ

      1. GitHub の AjinKuriakose/UK-Road-Accident-Data-Analysis の Web ページを開く

        https://github.com/AjinKuriakose/UK-Road-Accident-Data-Analysis

      2. clean_data.csv」をダウンロードしたいので、クリック.

        [image]
      3. 画面が変わる.「Download」をクリック

        [image]
      4. 先ほど調べた「カレントディレクトリ」に ダウンロードロードしたファイルを置く

        ※ ファイルの先頭部分は次のようになっている

        [image]

        データファイルの緯度経度などを使っての表示

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

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

          import pandas as pd
          import folium
          datafile = "clean_data.csv"
          lat, lon = 53.44, -2.24
          zoom_start = 16
          webfile_name = "d.html"
          
          m = folium.Map(location=[lat, lon], zoom_start=zoom_start)
          X = pd.read_csv(datafile)
          for index, r in X.iterrows(): 
              if index < 100:
                  p = '<a href="http://maps.google.com/maps?q=&layer=c&cbll=%f, %f&cbp=11,0,0,0,0">%s <br/></a>' % (r.latitude, r.longitude, r.date) 
                  folium.Marker([r.latitude, r.longitude], popup=p).add_to(m)
          
          m.save(webfile_name)
          

          [image]
        2. 先ほど調べた「カレントディレクトリ」に d.html ファイルができるので Web ブラウザで開いてみる.地図が表示されれば OK.

          [image]

          ズームアウトして確認

          [image]

          マーカーはクリッカブル

          [image]

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


          本サイトのサイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

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