マップチャートの基本

5. サーブレットの作成

マップチャートを生成するサーブレットを作成します。プログラムの概要は以下の通りです。

  • 画像の種類とサイズを設定
  • スタイルXMLファイルの読み込み
  • マップデータの設定
  • モデルXMLファイルの読み込み
  • チャート出力とJSPの呼び出し

[SampleServlet.java]

import java.io.FileInputStream;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.Servlet;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.gp.api.jsp.MxChartDescription;
import com.gp.api.jsp.MxServerComponent;
import com.gp.api.model.mapmodel.MxMapModel;
import com.gp.api.styles.chart.MxMapStyle;

public class SampleServlet extends HttpServlet implements Servlet {

    // マップデータファイルのパス
    private final String mapData = "/xml/sample.map";
    // チャートスタイルを定義したXMLファイルのパス
    private final String xmlStyle = "/xml/sample_style.xml";
    // チャートモデルを定義したXMLファイルのパス
    private final String xmlModel = "/xml/sample_model.xml";
    // ファイル読み込み用ストリーム
    private FileInputStream fis = null;
    // チャートスタイルオブジェクト
    private MxMapStyle style = null;
    // チャートモデルオブジェクト
    private MxMapModel model = null;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // サーブレットコンテキストを取得
        ServletContext sc = getServletContext();
        // サーバーコンポーネントのインスタンスを取得します
        MxServerComponent svr = MxServerComponent.getDefaultInstance(sc);
        // チャート生成に必要な情報を含むMxChartDescriptionの新しいインスタンスを取得します
        MxChartDescription chart = svr.newImageSpec();

        // チャートのサイズを設定します
        chart.width = 450;
        chart.height = 350;
        // 画像タイプを設定します
        chart.type = "PNG";

        // パスの組み立て
        String stylePath = sc.getRealPath(xmlStyle);
        String modelPath = sc.getRealPath(xmlModel);
        String mapPath = sc.getRealPath(mapData);

        // チャートスタイルを外部のXMLファイルから読み込みます
        fis = new FileInputStream(stylePath);
        style = (MxMapStyle) MxMapStyle.read(fis, null);
        // マップデータのパスを設定します
        style.source = new MxMapStyle.MxMapRef(mapPath);
        // チャートスタイルを設定します
        chart.setStyle(style);
        fis.close();

        // チャートモデルを外部のXMLファイルから読み込みます
        fis = new FileInputStream(modelPath);
        model = MxMapModel.read(fis, null);
        // チャートモデルを設定します
        chart.setModel(model);
        fis.close();

        // リクエスト変数へMxChartDescriptionオブジェクトを格納します
        request.setAttribute("chart", chart);

        // sample.jspへforward
        RequestDispatcher rd = sc.getRequestDispatcher("/sample.jsp");
        rd.forward(request, response);
    }
}

6. JSPの作成

サーブレットから呼び出されるJSPを作成します。
サーブレットで生成したマップチャートは、このJSPから参照されてブラウザに読み込まれます。
sample.jsp として任意のフォルダへ保存します。

[sample.jsp]

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="com.gp.api.jsp.MxServerComponent"%>
<%@ page import="com.gp.api.jsp.MxChartDescription"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample</title>
</head>
<body>
<%
    MxServerComponent svr = MxServerComponent.getDefaultInstance(application);
    MxChartDescription chart = (MxChartDescription)request.getAttribute("chart");
    out.write(svr.getImageTag(chart, "./getImage.jsp?image="));
%>
</body>
</html>

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

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

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

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

このチュートリアルで作成したファイルは、以下からダウンロードできます。

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

8. 動作確認

ブラウザからSampleServletにアクセスし、作成したマップチャートの動作を確認します。

色の塗り分け

各県がデータモデルで指定した色で表示されます。

ポップアップの動作

各県へのマウスホバーで、それぞれの県名が表示されます。

画像「ポップアップの動作確認」

クリックアクションの動作

各都道府県をクリックすると、ウィキペディアの該当ページへ遷移します。

画像「ウィキペディア画面」

9. まとめ

マップチャートのアプリケーションへの適用例と、基本的なWebアプリケーションの作成手順をご紹介しました。
今回作成したアプリケーションは、データモデルをファイルから読み込みましたが、プログラムで作成することも可能です。データモデルをプログラムから作成することで、データと連動した色の設定やテキストの出力、ポップアップの表示内容変更などマップチャートの動的な更新が可能になります。

次回はプログラムからデータモデルを作成し、マップチャートの表示内容を動的に更新するアプリケーションの作成手順をご紹介します。