地図ログをwebで表示する２

地図ログをwebで表示する２(軌跡/メモ/写真の表示)

アンドロイドスマホ用アプリ"地図ログアルバム”で採取した地図ログデータを、ホームページに掲載する事例です。
公開された事例は、高尾山に登りました２でご覧になれます。

1.Androidのデータを取得する？

Android端末とPCを接続し、USB接続モードに設定します。USBストレージをONにし、PCからデータを読めるように設定します。
フォルダーを開いてファイルを表示します。
jp.itanonb.maplogalbum2/logフォルダーから任意の日付のlog(2013-11-18)を選択し、デスクトップにコピーします。
このファイルにはlogのデータ（緯度、経度、時刻、等）がcsv形式で保存されています。
次の手順でkml方式のフォーマットに変換します。KMLフォーマットの列順を(整理番号(0)、場所の名前(連番)、メモ(時刻）、経度、
緯度、高度(0))に整理しなおして、以下の変換ソフトを使用します。
csvファイルに変換の時、完成ファイル名をtakaosan20131118.csvとし、更にtakaosan20131118.txtに変更すると、カンマで区切られた
データが見れます。

2.地図ログデータのデータ形式をkml形式に変換します。

KML方式とは
KMLファイルとは、緯度・経度等の情報をXML形式で記述して地理情報を機械的に伝達出来るファイルです。
KMLとは「Keyhole Markup Language」の略です。「Keyhole」というのはGoogle Earthの旧名だったそうです。
つまり、KMLファイルはGoogle Earth上で展開するためのファイルです。当然Googleによってサポートされています。
拡張子は「.kml」となります。

変換ツール
Webに公開されている、Googleマップ KML/CSV相互変換ソフトを使います。先ほどの、logデータ(csv方式）をkml方式に変換し、takaosan20131118.kmlファイル名で保存します。
以下の.htmlファイルでこの.kmlファイルを参照しています。

3.Android端末のデータからメモと写真データを取り出します。

メモと写真はsqliteデータベースに保存されています。
sqliteデータはjp.itanonb.maplogalbum2/tbl20131118.dbフォルダーに保存されています。
このままでは処理できませんので、変換ツールを使ってcsvデータに変換して使います。

変換ツール
Webに公開されている、SQLite Database Browserを使います。
こちらからダウンロードしてご自分のPCにインストールして下さい。
先ほどの、tbl20131118.dbをこのツールで変換し、takaosan20131118sqlite.csvファイル名で保存します。
中身は、logのid番号、緯度経度データ、時刻、メモ、写真（object_blob)が一覧表に書かれています。
メモの内容をコピーして、それぞれの地点のInfoWindowに貼り付けます。写真のデータはこの一覧には中身がありません。
抽出したスマホデータのギャリーデータフォルダー（DCIM)の中に保存されているはずです。
その中から該当する写真をメモと同様にそれぞれ貼り付けます。
以上のように、web画面のプログラムにメモと写真データを記入して完了です。

4.Webを表示する画面の作成

高尾山メモ写真付き(takaosan_wmp.html)を作成します。

<html>
<head>
<title>高尾山wM&P</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja"></script>
<script type="text/javascript" src="log_data.js"></script>
 
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:600px"></div>
  <h3>高尾山登山のメモ/写真付きのWEBページです。</h3>
  <ol>
    <li>地図上の青いマーカーは、スマホのGPSログ機能で自動取得した行程マップです。一部の箇所で往復データの重なりがあります。<br>
    マーカーをクリックすると時刻データを表示します。</li>
    <li>地図の拡大縮小はマウスでも自由に出来ます。</li>
    <li>赤マーカーをクリックするとそこで撮った写真を表示します。</li>
  </ol>
  <A href="/itakobo">ホームにに戻る</A>
</body>
</html>

5.jsファイルを作ります。

JavaScriptファイル(log_data.js)を作成します。

function initialize() {
    var initPos = new google.maps.LatLng(35.637314, 139.29158);
    var myOptions = {
      noClear : true,
      center : initPos,
      zoom : 10,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var kmlUrl = "http://www.itanonb.mydns.jp/takaosan/takaosan20131118.kml";//ログファイル（kml）を表示
    var kmlLayer = new google.maps.KmlLayer(kmlUrl);
    kmlLayer.setMap(map_canvas);

    
    
    
    var marker1 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.632633, 139.270317)
    });
    
    var marker2 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.631254,139.267867)
    });
     
     var marker3 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.626149,139.257174)
    });
  
     var marker4 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.624734,139.243404)
    });
        
    var marker5 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.626362,139.229429)
    });
    
    var marker6 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.629884,139.2214)
    });
    
    var marker7 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.629621,139.220721)
    });
    
    var marker8 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.614016,139.231143)
    });  
    
     var marker9= new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.605689,139.243455)
    });  
    
     var marker10 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(35.609227,139.268775)
    });  
    
     
    var infoWindow = new google.maps.InfoWindow;//InfoWindowのインスタンス化
    
    var onMarkerClick1 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759718315.jpg" align="left" />高尾山口駅');
      infoWindow.open(map_canvas, marker);
    };
    var onMarkerClick2 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759718461.jpg" align="left" />高尾山');
      infoWindow.open(map_canvas, marker);
    };
    var onMarkerClick3 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759718583.jpg" align="left" />休憩');
      infoWindow.open(map_canvas, marker);
    };
    var onMarkerClick4 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759718714.jpg" align="left" />高尾山山頂');
      infoWindow.open(map_canvas, marker);
    };
    var onMarkerClick5 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759718806.jpg" align="left" />一丁平の秋');
      infoWindow.open(map_canvas, marker);
    };
    
    var onMarkerClick6 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759718942.jpg" align="left" />城山山頂');
      infoWindow.open(map_canvas, marker);
    };
    
    var onMarkerClick7 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759718942.jpg" align="left" />いつもの休憩場');
      infoWindow.open(map_canvas, marker);
    };
    
    var onMarkerClick8 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759719260.jpg" align="left" />おおぼら山');
      infoWindow.open(map_canvas, marker);
    };
    
    var onMarkerClick9 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="" align="left" />見晴らし台');
      infoWindow.open(map_canvas, marker);
    };
    
    var onMarkerClick10 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="1384759719367.jpg" align="left" />松見平休憩場');
      infoWindow.open(map_canvas, marker);
    };
    
   
    
    
    google.maps.event.addListener(map_canvas, 'click', function() {
      infoWindow.close();
    });
 
    google.maps.event.addListener(marker1, 'click', onMarkerClick1);
    google.maps.event.addListener(marker2, 'click', onMarkerClick2);
    google.maps.event.addListener(marker3, 'click', onMarkerClick3);
    google.maps.event.addListener(marker4, 'click', onMarkerClick4);
    google.maps.event.addListener(marker5, 'click', onMarkerClick5);
    google.maps.event.addListener(marker6, 'click', onMarkerClick6);
    google.maps.event.addListener(marker7, 'click', onMarkerClick7);
    google.maps.event.addListener(marker8, 'click', onMarkerClick8);
    google.maps.event.addListener(marker9, 'click', onMarkerClick9);
    google.maps.event.addListener(marker10, 'click', onMarkerClick10);
    
};

5.Webページにアップロードします。

FFFTP等でhtmlファイル,kmlファイル、jsファイルをサーバーに登録します。

Android Tipsに戻る