地図ログを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相互変換ソフトhttp://tool.stabucky.com/gmap_kml2csv.htmを使います。
先ほどの、logデータ(csv方式）をkml方式に変換し、takaosan20131118.kmlファイル名で保存します。
以下の.htmlファイルでこの.kmlファイルを参照しています。

3.IE等のブラウザに表示するプログラムの作成

高尾山(takaosan20131118.html)を作成します。
以下のプログラムをコピーして、同名でファイルを作成し、保存します。

<html>
<head>
<title>高尾山</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" </script>
  function initialize() {
    var initPos = new google.maps.LatLng(35.127152, 138.910627);
    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";
    var kmlLayer = new google.maps.KmlLayer(kmlUrl);
    kmlLayer.setMap(map_canvas);
   
  }
</script>
  
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:600px"></div>
  高尾山南周回コースを縦走しました。
</body>
</html>

4.ご自分のHP等に公開する場合は、Webページにアップロードします。

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

5.jsファイルを使った事例です。(工事中）

JavaScriptファイル(takaosan20131118_js.html)を作成します。
以下のプログラムをコピーして、同名でファイルを作成し、保存します。

<html>
<head>
<title>高尾山log_js</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:100%; height:600px"></div>
  <h3>2013年11月18日高尾山に行ってきました。</h3>
  <ol>
    <li>地図上の青いマーカーは、スマホのGPSログ機能で自動取得した行程マップです。一部の箇所で往復データの重なりがあります。<br>
    マーカーをクリックすると時刻データを表示します。</li>
    <li>地図の拡大縮小はマウスでも自由に出来ます。</li>
    <li>赤マーカーをクリックするとそこで撮った写真を表示します。</li>
  </ol>
  <A href="/itakobo">ホームにに戻る</A>
</body>
</html>

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(36.18976774930737, 137.8218557739258)
    });
    
    var marker2 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(36.12192640724847, 137.62497626781464)
    });
     var marker3 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(36.12442228249292, 137.55358659267426)
    });
     var marker4 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(36.121857076247956, 137.55708419322968)
    });
     var marker5 = new google.maps.Marker({
      map: map_canvas,
      position: new google.maps.LatLng(36.1272300472935, 137.55985223293305)
    });
   
    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="CIMG1890.JPG" align="left" />新島々で2時間休憩（バス時刻が秋用に変わっていた。');
      infoWindow.open(map_canvas, marker);
    };
    var onMarkerClick2 = function() {
      var marker = this;
      var latLng = marker.getPosition();
            infoWindow.setContent('<img width="240" height="180" src="CIMG1892.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="CIMG1898.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="CIMG1907.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="CIMG1909.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);
    
};

Android Tipsに戻る