MAP上に表示しているGeoJSONデータをダウンロード可能にする

コミットしました。
geojson_anime_button.html

大きな修正内容は以下の通りです。
ダウンロード用のボタンを追加しました。他のボタンと同じく、データがインポートされた状態で表示されます。

<input onclick="downloadGeoJson();" type=button value="Download GeoJSON">

インポートしたGeoJSONデータの"feature"自体を配列に保存するようにしました。同じ意味のデータを重複して持つことになってしまいましたが、データをダウンロードする時の処理を複雑にしないためにこのような形となりました。

function geoPoint(marker, feature) {
  this.marker = marker;
  this.feature = feature;
  this.timestamp = convetStringToDate(feature.properties.time);
  this.event = (feature.properties.event != null)?feature.properties.event:"NULL";
};

geoPoints.push(new geoPoint(marker, feature));

ダウンロードボタンをクリックした時に呼び出される処理です。
Blobなどまだ理解しきれていないので詳細は割愛します。
ダウンロードファイル名は、先頭データと終端データのタイムスタンンプを結合したものです。
各featureのidもこの時に設定しなおされます。
JSON出力については昨日の記事を参照して下さい。

function downloadGeoJson() {
  var features = [];
  for(var i = 0; i < geoPoints.length; i++){
    var feature = geoPoints[i].feature;
    feature.id = i;
    features.push(feature);
  }
  var data = JSON.stringify({"type": "FeatureCollection", "features": features}, null, 2);
  var link = document.createElement("a");
  link.download = convetDateToStr(geoPoints[0].timestamp) + "-" + convetDateToStr(geoPoints[geoPoints.length-1].timestamp) + ".geojson"
  link.href = URL.createObjectURL(new Blob([data], {type: "text.plain"}));
  link.dataset.downloadurl = ["text/plain", link.download, link.href].join(":");
  link.click();
}

"Download GeoJSON"ボタンをクリックすると自動にGeoJSONフォーマットのファイルがダウンロードされます。