前回のブログ記事「地図上でお花見しませんか？」では、桜の標本木とソーシャル メディアを組み合わせた桜マップを公開しました。この桜マップは、開発者でなくても簡単に作成が可能な ArcGIS Online で用意されているソーシャル メディア テンプレートを使用して作成された Web アプリケーションでした。
今回は桜マップ第２弾ということで、ArcGIS API for JavaScript を使用して作成した「桜前線マップ」のご紹介です。気象庁が発表している桜の開花時期（2012年）をもとに、日本各地の桜の開花状況を時系列で表示するためのデータを作成して、アプリケーション上で表示できるようにしました。さらに、前回の記事で紹介した4月の平均気温分布データも重ねて表示することができます。
桜の開花時期と満開時期を時系列で地図上に表示することで、「桜前線」がどのような動きをしているのかを目にすることができます。本格的なお花見シーズンに入る前に昨年の桜前線を振り返ってみましょう。ぜひ、以下の URL にアクセスして「桜前線マップ」をご覧ください。
桜前線マップ：http://s3-ap-northeast-1.amazonaws.com/sakura-map/index.html
■開発の概要
詳細な開発方法は割愛しますが、「桜前線マップ」で利用できる機能の実装方法を簡単にご紹介していきます。
・ArcGIS Online の Web マップを参照
「桜前線マップ」は ArcGIS Online の Web マップを参照してアプリケーション上に表示します。そして、ArcGIS API for JavaScript の esri.arcgis.utils クラスを使用することで、ArcGIS Online の Web マップを容易に Web アプリケーション上で表示することができます。
・レイヤ表示/非表示の切り替えボタン
「桜前線マップ」には①、②というボタンが用意されており、このボタンをクリックすることで、桜前線のレイヤと4月の平均気温分布レイヤの表示/非表示を切り替えることができます。また、レイヤだけでなく、アプリケーションの画面左側のマップの説明やボタンの色も同時に切り替えています。これらの切り替え機能は、jQuery という JavaScript ライブラリを利用して実現しています。もちろん、ボタンでのレイヤの表示/非表示等は ArcGIS API for JavaScript のみでも実現可能ですが、DOM の操作が容易な jQuery を使用することでより直感的なコーディングが可能です。
ArcGIS API for JavaScript のウィジェット等は dojo をベースに構成されていますが、この「桜前線マップ」のように jQuery と連携させたアプリケーションの開発が可能です。
・時系列データを表示するためのタイムスライダの設定
ArcGIS API for JavaScript には時系列データを表示するためのタイムスライダ（TimeSlider ウィジェット）が用意されています。TimeSlider ウィジェットでは、スライダの移動速度や開始/終了日時、ループの有無等の設定を行うことができます。こちらもヘルプ（英語）にサンプルが用意されていますので、ご参照ください。
ちなみに、桜の開花時期と満開時期の時系列データは ArcMap で作成します。時系列データの作成方法等については時系列データとは（ArcGIS ヘルプ 10.1）をご覧ください。
「桜前線マップ」には、以上のような ArcGIS API for JavaScript によって実現している機能が散りばめられています。開発者の方はもちろん、これから開発を始められる方も、テンプレートやサンプルを駆使してオリジナルの Web アプリケーションを作成してみてください。
■関連リンク
ESRIジャパン Web サイト
・ArcGIS Online
・ArcGIS API for JavaScript
Esri 社（米国）Web サイト
・ArcGIS Online 製品ページ
・ArcGIS API for JavaScript
・ArcGIS Online
・ArcGIS ヘルプ 10.1「時系列データとは」