マップチャートの動的更新

5. Webアプリケーションの作成

ここまでに作成してきたファイルをもとにWebアプリケーションを作成します。ディレクトリの構成は以下のようになります。

画像「ディレクトリ構成」

ファイル名 説明
WEB-INF/classes/SampleServlet.class 「サーブレットの修正」で作成したSampleServletのクラスファイル
WEB-INF/classes/SampleModel.class 「サーブレットの修正」で作成したSampleModelのクラスファイル
WEB-INF/classes/DataAccessBean.class 「サーブレットの修正」で作成したDataAccessBeanのクラスファイル
WEB-INF/lib/wcruntime.jar WebCharts3DのランタイムJARファイル
WEB-INF/web.xml SampleServletのクラス情報とマッピング情報を定義
xml/sample.map 「2.外観の修正(1)」で保存したマップデータファイル
xml/sample_style.xml 「スタイルの設定」で保存したスタイルファイル
getImage.jsp サーバーキャッシュからチャート画像を取得するためのJSP
sample.jsp 「2.外観の修正(1)」で保存したJSP

今回作成したファイルは、以下からダウンロードできます。

サンプルデータ(zip形式)

6. 動作確認

確認手順

  1. ブラウザからSampleServletにアクセスし、初期画面を表示します。初期画面は2009年のデータで表示されます。

    画像「初期画面は2009年のデータ」拡大

  2. [年の選択]ボックスで"2010"を選択し、[更新]ボタンをクリックします。

    画像「2010年を選択」拡大

  3. 関東地方の地図が2010年のデータで表示されます。ユーザーに選択された年がチャート上に表示され、データをもとに割り当てられた色で各都道府県が塗り分けられました。またポップアップ内のデータも更新されています。

    画像「2010年のデータに更新される」拡大

7. まとめ

前編の基本編に続く応用編として、今回の後編ではモデルをプログラム内で構築することで、DBから取得したデータを反映させた動的なマップチャートの更新方法をご紹介しました。WebCharts3Dでは、モデルの動的更新に加え、スタイルもプログラム内で構築するなどのさらなる応用が可能です。
地理地図に限らず、駅やショッピングモールのフロアマップやバスの座席表など、マップチャートで表現できるマップは身近にあります。ぜひお役立てください。