こんにちは、写真保存プロジェクトのうちやまです。
前回の記事に引き続き、写真保存プロジェクトについてご紹介いたします。今回は、写真保存プロジェクトで使用されている被災後の航空写真（サンプル）についてご紹介させていただきます。
はじめに
写真保存プロジェクトで使用されている被災後の航空写真は、国土地理院が公開している「東北地方太平洋沖地震による被災地の空中写真」を使用しています。2011年3月から4月にかけて撮影された航空写真で、被災地の状況を記録・把握するひとつの有効なものです。
実は、このデータは、Yahoo!デベロッパーネットワークで公開されているYahoo! Open Local Platform の JavaScriptマップAPIを使用して簡単に利用できるようになっており、写真保存プロジェクトでもこの機能を使って実装しています。より多くの方に、利用方法を公開することで、被災地の復興支援、災害の分析に活用していただければと思い、今回、記事を書かせていただきました。
JavaScriptマップで被災後航空写真を使う方法
それでは、具体的なJavaScriptマップの使用方法を説明します。
元々、JavaScriptマップAPIでは「標準地図」、「航空写真」、「地下街」の3種類の地図が利用可能でした。今回、そこに国土地理院撮影空中写真を使用した「被災後の航空写真」が追加されました。
この被災後の航空写真はデベロッパーの皆様も簡単に使用することができますので、実装方法をご紹介いたします。
実装例
シンプルな地図をもとにして、被災後の航空写真を実装してみます。
まずは、シンプルな地図を表示してみます。
<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:400px; height:300px"></div>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
// mapに表示する地図
var ymap = new Y.Map("map");
// 縦式スライドズームボタンの追加
ymap.addControl(new Y.SliderZoomControlVertical());
// 地図、写真の切り替えのボタン追加
ymap.addControl(new Y.LayerSetControl(), new Y.ControlPosition(Y.ControlPosition.TOP_RIGHT));
// 地図を描画
ymap.drawMap(new Y.LatLng(38.13715301025136, 140.9293483870756), 17, Y.LayerSetId.NORMAL);
}
</script>
</body>
</html>上のHTMLをテキストエディタでsample.htmlという名前で保存してブラウザで見てみると、シンプルな地図が表示されます。
（実際にサンプルページで表示を確認することができます。）
しかし、このままでは右上に表示されている地図の種類を切り替えるボタンの中に「被災後の航空写真」は表示されていません。
次に、上記のコードをもとに数行追加、変更を行い「地下街」のボタンを「被災後写真」に変更します。
<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:400px; height:300px"></div>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
// 【追加・変更部分】使用する地図の種類をセット
layerset = {};
layerset[Y.LayerSetId.NORMAL] = new Y.LayerSet('地図', [new Y.NormalLayer()])
layerset[Y.LayerSetId.PHOTO] = new Y.LayerSet('写真', [new Y.PhotoLayer()]);
layerset[Y.LayerSetId.EARTHQUAKEPHOTO] = new Y.LayerSet('被災後写真', [new Y.EarthQuakePhotoLayer()]);
// 【追加・変更部分】mapに表示する地図に上記でセットした3種類を使う
var ymap = new Y.Map('map', {layerSets : layerset});
// 縦式スライドズームボタンの追加
ymap.addControl(new Y.SliderZoomControlVertical());
// 地図、写真、被災後写真の切り替えのボタン追加
ymap.addControl(new Y.LayerSetControl(), new Y.ControlPosition(Y.ControlPosition.TOP_RIGHT));
// 【追加・変更部分】地図を描画
ymap.drawMap(new Y.LatLng(38.13715301025136, 140.9293483870756), 17, Y.LayerSetId.EARTHQUAKEPHOTO);
}
</script>
</body>
</html>上のHTMLの中で【追加・変更部分】というコメントが書かれている部分が追加、変更をした箇所です。
これで右上の地図の種類を切り替えるボタンの「地下街」が「被災後写真」に変わりました。
（実際にサンプルページで表示を確認することができます。）
また、「被災後写真」のボタンは地図の中心点に被災後の写真データがある場合のみ押せるようになり、それ以外の場所では押せないようになっています。
終わりに
上記のように、数行のコードを追加することで簡単に被災後の航空写真を使用することが可能です。震災の復興支援、記録、研究などでJavaScriptマップAPIを使用する際には、被災後の航空写真の活用をご検討ください。
こちらの記事のご感想を聞かせください。
- 学びがある
- わかりやすい
- 新しい視点
ご感想ありがとうございました
