ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11g リリース1 (11.1.1.6.0)
B52029-06
  目次へ移動
目次

前
 
次
 

27 ADF地理マップ・コンポーネントの使用

この章では、ADF地理マップ・コンポーネントとデータ・バインドされたテーマを使用してデータを表示する方法、およびマップのカスタマイズ・オプションについて説明します。

この章では、次の項目について説明します。

ADF地理マップ・テーマのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADF地理マップの作成に関する項を参照してください。

27.1 地理マップの概要

地理マップ・コンポーネントは、フレームワーク内でOracle Spatialの機能を提供するデータ視覚化コンポーネントです。このコンポーネントでは、ユーザーはビジネス・データを地理マップ上に表し、1つのマップ上に複数層の情報(テーマと呼ばれる)を重ね合せることができます。

マップを作成する際、管理者がOracle SpatialのMap Builderツールを使用してすでに構成してある基準となるマップを選択するよう求められます。構成時、マップの管理者は、マップでサポートされるズーム・レベルを定義します。このレベルによって、ADF地理マップのズーム機能も決まります。

管理者は、Map Builderツールを使用して、事前定義のマップ・テーマを作成することもできます。たとえば、事前定義のテーマでは、地域を示すために特定の色を使用することがあります。ADF地理マップ・コンポーネントで、これらの事前定義マップ・テーマを選択できますが、テーマは基準となるマップの一部であるため、変更はできません。

基準となるマップは、ADF地理マップ・コンポーネントを使用してJDeveloperで情報のインタラクティブ・レイヤーを構築する背景となります。ADF地理マップには最低1つのレイヤーを定義する必要がありますが、必要な数のレイヤーを作成できます。

27.1.1 使用可能なマップ・テーマ

ADF地理マップには、様々なマップ・テーマがあり、各テーマをデータ・コレクションにバインドする必要があります。図27-1に、複数のテーマを持つマップを示します。次の種類のマップ・テーマが使用できます。

  • 色:地域に適用されます。たとえば、ある地域の州の人口を表したり、地域の州での製品の人気を表す色のレンジを色テーマで指定できます。マップには、異なるズーム・レベルで表示される複数のカラー・テーマを使用できます。たとえば、色テーマはズーム・レベル1から5では州の人口を表し、ズーム・レベル6から10では郡の収入中央値を表すことができます。

  • 点:マップ内で個々の緯度および経度の位置を表示します。たとえば、点テーマで倉庫の場所をマップに示します。表示するポイントのスタイルをカスタマイズする場合、倉庫のセット内の在庫の種類(電気製品、家庭用品、園芸用品)を区別するためにそれぞれ異なるイメージを使用するよう選択できます。

  • グラフ:任意の数の円グラフ・テーマと棒グラフ・テーマを作成します。ただし、一度に表示できるグラフ・テーマは1つのみです。マップ・ツールバーの表示メニューからテーマを選択します。グラフ・テーマでは、州や郡など特定の地域に関連する統計を表示できます。たとえば、グラフ・テーマで州でのいくつかの製品の売上げの値を表示できます。

図27-1 色、点および円グラフ・テーマを使用した米国南西部の地理マップ

色、点および円グラフ・テーマを使用したマップ

27.1.2 地理マップの用語

次のリストで、地理マップで使用される用語を簡単に説明します。

  • 基準となるマップ:背景の地理データ、ズーム・レベルと、国、都市、道路などのアイテムの外観とプレゼンスを指定します。基準となるマップには、たとえば、オフィス・ビルのフロア・マップなど、MapViewerおよびMap Builderを使用して構成できる任意のイメージを使用できます。

  • ズーム制御:マップの左上隅にレンダリングされるパン・アイコンとズーム・スライダで構成されます。図27-2に、最大にズーム・アウトされた(ズーム・レベルが0に設定された)マップのズーム制御を示します。ゼロではマップ全体が表示されます。

    ズーム制御の位置と初期設定は、dvt:mapタグでカスタマイズできます。表示メニュー(サンプル・マップの上のマップ・ツールバーに表示される)で、ズーム制御の可視性を指定します。デフォルトでは、マップの初期ズーム・レベルは0に設定されています。

    図27-2 マップのズーム制御

    マップのズーム制御
    • パン・アイコン:ズーム制御の上部にある(東西南北、北東、北西、南東および南西を指す矢印の付いた)アイコンで構成されます。このアイコンを使用して、特定の方向にマップ全体を移動できます。

    • ズーム・スライダー:大規模なズーム用のサム付きスライダーと1レベルのズーム用のアイコンで構成されます。プラスのアイコンを使用して一度に1レベルズーム・インし、マイナスのアイコンを使用して一度に1レベルズーム・アウトします。サムがスライダの最下部にあるとき、ズーム・レベルはゼロです。

  • スケール:マップの左下隅の情報パネルの下、コピーライトの上に表示される2つの横方向のバーで構成されます。図27-3に、スケールを示します。上部のバーはマイル(mi)を示し、下部のバーはキロメートル(km)を示します。マイル・バーの上およびキロメートル・バーの下には、[距離] [単位]の形式でラベルが表示されます。バーの長さと距離の値は、ズーム・レベルとマップのパンに応じて変わります。

    図27-3 マップの情報パネル、スケールおよびコピーライト

    マップの情報パネル、スケールおよびコピーライト
  • 情報パネル:スケールの上の左下隅に緯度と経度を表示します。図27-3に、情報パネルを示します。デフォルトでは、情報パネルは表示されません。このパネルは、表示メニューから、あるいはツールバーの「情報」ボタンをクリックして表示できます。

  • 測定パネル:現在使用しているツールバーのツールに応じて、距離、領域、半径のいずれかが表示されます。[ラベル] [値] [単位]の形式で、情報パネルの右にテキストが表示されます。図27-4に、距離測定の測定パネルを示します。領域測定および半径測定は、適切なラベルを使用して同様に表示されます。

    図27-4 マップの情報パネルの横にある測定パネル

    マップの情報パネルの横にある測定パネル

    次のツールによって、測定パネルに情報が示されます。

    • 領域測定:「面」、「長方形選択」または「マルチポイント選択」ツールがアクティブの場合にのみ表示されます。

    • 距離測定:「距離」ツールがアクティブの場合にのみ表示されます。

    • 半径測定:「円形選択」ツールがアクティブの場合にのみ表示されます。

  • コピーライト: マップの左下隅に表示され、dvt: mapタグでカスタマイズできるテキストが含まれます。

  • 概要マップ: 図27-5に示すような、メイン・マップの縮小表示で構成されます。このマップは、メイン・マップの右下隅に表示され、パン・ツールまたはパン・アイコンを使用せずにメイン・マップの表示領域を変更できます。

    図27-5 概要マップ

    概要マップ

    次のアイテムは、概要マップの一部です。

    • レチクル:メイン・マップの縮小表示内を移動できる小さなウィンドウとして表示されます。縮小マップ内のレチクルの位置によって、メイン・マップの表示領域が決まります。レチクルを移動すると、メイン・マップが自動的に更新されます。

    • 「表示/非表示」アイコン:概要マップが表示されている場合、左上隅に表示されます。「表示/非表示」アイコンをクリックすると、概要マップが非表示になり、アイコンのみがメイン・マップの右下隅に表示されます。

  • ツールバー:次の要素が次に示す順に含まれます。

    • 表示メニュー:表示するテーマの制御、表示する特定のテーマの選択、ズーム制御、凡例および情報パネルの可視性の決定を行います。

    • 「ツールバー」ボタン: マップとの相互作用のツール(パン、ズーム・イン、ズーム・アウト、長方形選択、円形選択、多角形選択、ポイント選択、距離、面、凡例および情報)が含まれます。

27.1.3 地理マップ・コンポーネントのタグ

地理マップには、親タグ、マップ子タグ、およびマップ・テーマを変更するタグがあります。

27.1.3.1 地理マップの親タグ

マップ・コンポーネントには次の親タグがあります。

  • マップ・タグdvt:map: メイン・マップ・コンポーネント用親タグ。他のデータ視覚化の親タグとは異なり、マップ・タグはデータにバインドされません。かわりに、すべてのマップ・テーマ子タグが、個々にデータ・コレクションにバインドされます。マップ・タグには、基準となるマップのID、Oracle Application Server MapViewerサービスを実行しているリモート・サーバーのURL、住所をマッピング用の経緯度座標に変換するジオコーダWebサービスのURLなどのマップに関する一般的な情報が含まれます。子タグのリストと説明は、27.1.3.2項「地理マップの子タグ」を参照してください。

  • マップ・ツールバーdvt:mapToolbar: マップを含むJSFページの任意の位置にマップ・ツールバーを配置する親タグ。このツールバーには、ツールバーに関連付けられているマップを指すmapID属性が含まれます。ツールバーによって、マップの凡例を表示する機能、選択や距離の測定を行う機能などのマップとの実行時の重要な相互作用が実行されます。マップ・ツールバー・タグには子タグはありません。

27.1.3.2 地理マップの子タグ

dvt:mapタグには、次の子タグがあります。

  • 色テーマdvt:mapColorTheme: データ・コレクションにバインドするオプションのマップ・レイヤーの1つ。

  • 点テーマdvt:mapPointTheme: データ・コレクションにバインドするオプションのマップ・レイヤーの1つ。点テーマで、マップ上の個々の位置が識別されます。

  • 棒グラフ・テーマdvt:mapBarGraphTheme: データ・コレクションにバインドする必要があるオプションのマップ・レイヤーの1つ。このテーマでは、特定の地点に棒グラフが表示され、その地点に関連する複数のデータ値を表します。たとえば、このタグを使用して、倉庫の位置に在庫レベルを示すグラフを表示します。

  • 円グラフ・テーマdvt:mapPieGraphTheme: データ・コレクションにバインドする必要があるオプションのマップ・レイヤーの1つ。このテーマでは、特定の地点に円グラフが表示され、その地点の複数の値を表します。たとえば、このタグを使用して、倉庫の位置に在庫レベルを示すグラフを表示します。

  • マップ凡例dvt:mapLegend: マップを作成すると、自動的に作成されます。このタグを使用してマップの凡例をカスタマイズします。

  • 概要マップdvt:mapOverview: マップを作成すると、自動的に作成されます。このタグを使用して、マップの右下隅に表示される概要マップをカスタマイズできます。

27.1.3.3 マップ・テーマを変更するタグ

次のタグで、様々なマップ・テーマを変更します。

  • 点スタイルのアイテムdvt:mapPointStyleItem: dvt:mapPointThemeタグのオプションの子タグ。特定のデータ値の範囲内のポイントを表すイメージをカスタマイズする場合、このタグを使用します。複数のイメージを定義するには、各イメージのタグを作成し、関連付けるデータ値の範囲とイメージを指定します。

  • 円グラフのスライス・セットdvt:mapPieSliceSet: dvt:mapPieGraphThemeタグの子。これは、マップの円グラフのスライスの色をカスタマイズする場合にdvt:mapPieSliceItemタグのラップに使用するオプションのタグです。

  • 円グラフのスライスのアイテムdvt:mapPieSliceItem: dvt:mapPieSliceSetタグの子。円グラフの各スライス・アイテム・タグで、マップの円グラフの1スライスの色がカスタマイズされます。

  • 棒グラフの系列セットdvt:mapBarSeriesSet: dvt:mapBarGraphThemeタグの子。これは、マップの棒グラフの棒の色をカスタマイズする場合にdvt:mapBarSeriesItemタグのラップに使用するオプションのタグです。

  • 棒グラフの系列アイテムdvt:mapBarSeriesItem: dvt:mapBarSeriesSetタグの子。棒グラフの各系列アイテム・タグで、マップの棒グラフの1つの棒の色がカスタマイズされます。

27.2 地理マップのデータ要件の理解

次のデータ要件が地理マップに適用されます。

27.3 マップ・サイズ、ズーム制御および選択領域合計のカスタマイズ

マップのサイズ、ズーム方法、選択した地域の外観および情報ウィンドウとスケール・バーの初期表示をカスタマイズできます。

27.3.1 マップ・サイズの調整方法

dvt:mapタグのinlineStyle属性を使用して、マップの幅と高さを制御できます。

マップのサイズを調整する手順:

  1. 構造ウィンドウでdvt:mapノードを右クリックし、「プロパティに移動」を選択します。

  2. プロパティ・インスペクタの「スタイル」属性カテゴリで、inlineStyle属性に幅と高さを入力します。

    たとえば、幅600ピクセル、高さ400ピクセルを指定するには、inlineStyle="width:600px;height:400px"という設定を使用します。

    幅はページで使用可能な幅すべてで、高さが400ピクセルの場合、inlineStyle="width:600px;height:400px"という設定を使用します。

27.3.2 マップ・ズーム制御のストラテジの指定方法

dvt:mapタグの複数の属性で、初期ズーム・レベル、開始位置、初期マップ・テーマおよびズーム・ストラテジを制御できます。

マップの初期ズームおよび開始位置を制御する手順:

  1. 構造ウィンドウでdvt:mapノードを右クリックし、「プロパティに移動」を選択します。

  2. プロパティ・インスペクタの「外観」属性カテゴリで、次の属性に値を入力します。

    1. AutoZoomThemeIDに、最初に表示されるテーマのIDを入力します。

    2. ZoomBarStrategyに、autoZoomThemeIdのすべてのオブジェクトが表示される最大レベルまでズームするようマップに指示するデフォルト値MAXZOOMを選択するか、autoZoomThemeIdのテーマを中心とし、ズーム・レベルをmapZoom属性の値に設定するようマップに指示するCENTERATZOOMLEVELを選択します。

    3. マップの開始位置を変更するには、startingXstartingYにそれぞれ緯度と経度を入力します。

    4. MapZoomに、マップの初期ズーム・レベルを入力します。この設定は、ズーム・バー・ストラテジCENTERATZOOMLEVELに必要です。


      注意:

      autoZoomThemeIDプロパティはmapZoomで設定されたプロパティより優先されます。


27.3.3 マップの選択値の合計方法

長方形選択などのマップ選択ツールによって選択されたマップ領域に関連付けられている値を合計する選択リスナーを使用できます。合計はマップの下の領域に表示されます。バッキングBeanメソッド内で引数にMapSelectionEventをとるクラスを指定します。例27-1に、バッキングBeanのサンプル・コードを示します。

例27-1 選択リスナー用のバッキングBeanのサンプル・コード

package view;
 
import java.util.Iterator;
 
import oracle.adf.view.faces.bi.component.geoMap.DataContent;
import oracle.adf.view.faces.bi.event.MapSelectionEvent;
 
public class SelectionListener {
    private double m_total = 0.0;
    
    public SelectionListener() {
    }
 
    public void processSelection(MapSelectionEvent mapSelectionEvent) {
        // Add event code here...
        m_total = 0.0;
        Iterator selIterator = mapSelectionEvent.getIterator();
        while (selIterator.hasNext())
        {
            DataContent dataContent = (DataContent) selIterator.next();
            if (dataContent.getValues() != null)
            {
                Double allData[] = dataContent.getValues();
                m_total += allData[0];    
            }
        }
    }
    
    public double getTotal () {
        return m_total;
    }
    
    public void setTotal (double total) {
        m_total = total;
    }
}

マップの値を合計する選択リスナーを設定する手順:

  1. 構造ウィンドウで地理マップのノードを右クリックし、「プロパティに移動」を選択します。

  2. 「動作」属性カテゴリで、SelectionListenerフィールドにバッキングBeanを指すメソッド参照を入力します。次に例を示します。

27.4 マップ・テーマのカスタマイズ

各種マップ・テーマは、マップ・テーマ・バインディング・ダイアログ、テーマ・タグの属性またはテーマ・タグの子タグのいずれか1つ以上を使用してカスタマイズできます。

27.4.1 テーマのズーム・レベルのカスタマイズ方法

すべてのマップ・テーマについて、基準となるマップの関連するズーム・レベルに合うズーム・レベルがテーマで指定されていることを確認します。たとえば、基準となるマップで6から8のズーム・レベルでのみ郡が表示される場合、郡ごとのポイントまたはグラフを表示するテーマには、6から8のズーム・レベルのみを適用します。

マップ・テーマのズーム・レベルをカスタマイズする手順:

  1. 構造ウィンドウで、カスタマイズするマップ・テーマ・タグ(dvt:mapColorThemedvt:mapPointThemedvt:mapBarGraphThemeまたはdvt:mapPieGraphTheme)を見つけます。

  2. タグを右クリックして、「プロパティに移動」を選択します。

  3. プロパティ・インスペクタの「外観」属性カテゴリで、MinZoom属性とMaxZoom属性にそれぞれ低ズーム値と高ズーム値を入力します。

27.4.2 マップ・テーマのラベルのカスタマイズ方法

テーマが凡例またはテーマ選択ダイアログに表示される際、デフォルトでは、マップ・テーマのIDがラベルとして使用されます。ただし、各マップ・テーマ・タグには、テーマのオプション・ラベルとして機能する次の属性があります。

  • shortLabel: マップ凡例に表示される際のテーマのレベルを指定します。

  • menuLabel: テーマ選択ダイアログでのテーマのラベルを指定します。

これらの属性を使用してテーマのタイプ(色、点、棒グラフまたは円グラフ)とデータ(人口、売上げ、在庫など)の両方がわかるラベルを作成し、使用可能なテーマをユーザーが簡単に認識できるようにします。

マップ・テーマのラベルをカスタマイズする手順:

  1. 構造ウィンドウで、カスタマイズするマップ・テーマ・タグを見つけます。

  2. タグのノードを右クリックして、「プロパティに移動」を選択します。

  3. プロパティ・インスペクタの「外観」属性カテゴリで、shortLabel属性(凡例での表示の場合)およびmenuLabel属性(テーマ選択ダイアログの場合)にテキストを入力します。

    たとえば、人口に応じてニュー・イングランドの州を色付けする色テーマの場合、次のテキストを入力します。

    shortLabel="Color - Population, NE Region"
    

27.4.3 色マップ・テーマのカスタマイズ方法

色マップ・テーマを作成する際、背景レイヤーに使用する色をカスタマイズできます。最小レンジと最大レンジに関連付ける色を指定し、テーマに使用する色レンジの数を指定できます。たとえば、色がマップ上の人口と関連する場合、人口が最も少ないエリアには最小色が表示され、人口が最も多いエリアには最大色が表示されます。最小色と最大色の間の色のグラデーションが、これらの値の間のレンジに表示されます。

色マップ・テーマの色をカスタマイズする手順:

  1. 構造ウィンドウでdvt:mapColorThemeノードを右クリックし、「プロパティに移動」を選択します。

  2. プロパティ・インスペクタの「テーマ・データ」属性カテゴリで次のようにします。

    • データ値の最小レンジと最大レンジに関連付けられているデフォルト色を変更する場合は、MinColor属性とMaxColor属性の色をそれぞれ選択します。

    • このテーマのデフォルトの色レンジの数を変更する場合は、bucketCount属性の整数を変更します。

    たとえば、<dvt:mapColorTheme minColor="#000000" maxColor= "#ffffff" bucketCount="5"/>の場合、5つのバケットの色は#000000#444444#888888#bbbbbb#ffffffになります。

または、各バケットの色を指定できます。複数のバケットの色を指定するには、dvt:mapColorThemecolorList属性に、属性への色配列をバインドするか、セミコロンで区切った文字列を使用します。色はRGB16進数を使用して指定できます。たとえば、値がcolorList="#ff0000;#00ff00;#0000ff"の場合、最初のバケットの値は赤、2番目のバケットの値は緑、3番目のバケットの値は青になります。

27.4.4 点テーマのポイント・イメージのカスタマイズ方法

マップの点テーマでは、デフォルトのイメージを使用して各ポイントが示されます。ただし、点テーマに複数のカスタム・イメージを指定し、各イメージが表すデータの範囲を指定できます。

マップの点テーマで使用するカスタム・イメージごとにdvt:mapPointStyleItemタグを定義します。

マップ点テーマのポイントのイメージをカスタマイズする手順:

  1. 構造ウィンドウでdvt:mapPointThemeノードを右クリックし、「dvt:mapPointThemeの中に挿入」「点スタイルのアイテム」を選択します。

  2. 続く点スタイルのアイテムの挿入ウィザードで、次のようにして、このカスタム・ポイントのデータ値の範囲に対する設定を行います。

    1. ウィザードのステップ1(共通プロパティ)で、マップでこのカスタム・イメージに対するデータ値の範囲内のポイントに表示されるイメージのURLを指定する必要があります。

    2. ウィザードのステップ2(アドバンスト・プロパティ)で、MaxValueとMinValueのフィールドにこのカスタム・イメージが表すデータ値の範囲を指定します。

    3. 「ID」フィールドに、定義するカスタム・イメージの一意の識別子を入力します。

    4. 「ショート・ラベル」フィールドに、このタグで表される範囲内のポイント上にユーザーがカーソルを置いたときに実際のデータ値の前に表示されれる説明テキストを指定します。

      たとえば、最小データ値範囲内のカスタム・ポイントに、「低在庫」というテキストを入力します。

    5. 必要に応じて、ホバー・イメージと選択済イメージに異なるイメージURLを指定します。

    6. 「終了」をクリックします。

  3. 点テーマに対して作成するカスタム・イメージごとにステップ1とステップ2を繰り返します。

27.4.5 マップのポイント・イメージをカスタマイズする場合の処理

点スタイルのアイテムの挿入ウィザードを使用して、点テーマのデータ値の範囲を表すカスタム・イメージを指定する場合、子タグdvt:mapPointStyleItemは、親タグdvt:mapPointTheme内に定義されます。例27-2に、各倉庫ポイントの在庫の範囲を表す3つのカスタム・ポイント・イメージを持つマップ点テーマに対し、JSFページに生成されるコードを示します。

最初の点スタイル設定(ps0)は、500を超えない値に適用されます。この点スタイルでは、非常に少ない在庫用のイメージを表示し、対応するツールチップ情報が示されます。

2番目の点スタイル設定(ps1)は、500から1000の値に適用されます。この点スタイルでは、少ない在庫用のイメージを表示し、対応するツールチップ情報が示されます。

最後の点スタイル設定(ps2)は、1000から1600の値に適用されます。この点スタイルでは、多い在庫用のイメージを表示し、対応するツールチップ情報が示されます。

例27-2 カスタム・ポイント・イメージを使用するマップ点テーマのコード

<dvt:map id="map1"
     .
     .
     .
 <dvt:mapPointTheme id="mapPointTheme1"
     shortLabel="Warehouse Inventory"
     value="{bindings.WarehouseStockLevelsByProduct1.geoMapModel}">
   <dvt:mapPointStyleItem id="ps0" minValue="0"
         maxValue="500"
         imageURL="/images/low.png"
         selectedImageURL="/images/lowSelected.png"
         shortLabel="Very Low Inventory"/>
   <dvt:mapPointStyleItem id="ps1" minValue="500"
         maxValue="1000"
         imageURL="/images/medium.png"
         selectedImageURL="/images/mediumSelected.png"
         shortLabel="Low Inventory"/>
   <dvt:mapPointStyleItem id="ps2" minValue="1000"
         maxValue="1600"
         imageURL="/images/regularGreen.png"
         selectedImageURL="/images/regularGreenSelected.png"
         shortLabel="High Inventory"/>
 </dvt:mapPointTheme>
</dvt:map>

27.4.6 棒グラフ・テーマの棒のカスタマイズ方法

マップ棒グラフ・テーマを作成すると、デフォルトの色がグラフの棒に割り当てられます。棒の色は、mapBarSeriesSetタグとmapBarSeriesItemタグを使用してカスタマイズできます。

1つのmapBarSeriesSetタグを使用して、棒グラフ・テーマのすべてのmapBarSeriesItemタグをラップし、グラフ内の棒ごとにmapBarSeriesItemタグを挿入します。

マップ棒グラフ・テーマの棒の色をカスタマイズする手順:

  1. 構造ウィンドウでdvt:mapBarGraphThemeタグを右クリックし、「dvt:mapBarGraphThemeの中に挿入」マップの棒系列の設定を選択します。

    このタグに設定する属性はありません。個々の棒系列アイテムのタグのラップに使用されます。

  2. 構造ウィンドウでdvt:mapBarSeriesSetタグを右クリックし、「dvt:mapBarSeriesSetの中に挿入」マップの棒系列のアイテムを選択します。

  3. プロパティ・インスペクタで、グラフに表示される最初の棒に使用する一意のIDと色を入力します。

    グラフ内の棒の順序を調べるには、「棒グラフ・マップ・テーマ・バインディングの編集」ダイアログを確認します。このダイアログの系列の属性列のエントリの順序で、グラフに表示される棒の順序が決まります。たとえば、図27-6では、グラフの最初の棒は「Income2000」を表し、2番目の棒は「Income2005」を表します。

    図27-6 「棒グラフ・マップ・テーマ・バインディングの編集」ダイアログ

    「棒グラフ・マップ・テーマ・バインディングの編集」ダイアログ
  4. グラフ内の棒ごとにステップ3を繰り返します。

27.4.7 マップ棒グラフ・テーマの棒をカスタマイズする場合の処理

「棒グラフ・マップ・テーマ・バインディングの編集」ダイアログを使用して、マップ棒グラフ・テーマの棒をカスタマイズする場合、棒の順序は、ダイアログの「系列属性」列のエントリの順序になります。例27-3に、マップ棒グラフの棒をカスタマイズする場合のサンプルXMLコードを示します。

例27-3 マップ棒グラフの棒をカスタマイズする場合のコード

<dvt:map
  .
  .
  .
  <dvt:mapBarGraphTheme
    .
    .
    .
    <dvt:mapBarSeriesSet>
      <dvt:mapBarSeriesItem color="#333399" id="bar1"/>
      <dvt:mapBarSeriesItem color="#0000ff" id="bar2"/>
    </dvt:mapBarSeriesSet>
  </dvt:mapBarGraphTheme>
</dvt:map>

27.4.8 円グラフ・テーマのスライスのカスタマイズ方法

マップ円グラフ・テーマを作成すると、デフォルトの色がグラフのスライスに割り当てられます。スライスの色は、mapPieSlicesSetタグとmapPieSliceItemタグを使用してカスタマイズできます。

1つのmapPieSliceSetタグを使用して、円グラフ・テーマのすべてのmapPieSliceItemタグをラップし、グラフ内のスライスごとにmapPieSliceItemタグを挿入します。

マップ円グラフ・テーマのスライスの色をカスタマイズする手順:

  1. 構造ウィンドウでdvt:mapPieGraphThemeタグを右クリックし、「dvt:mapPieGraphThemeの中に挿入」「円グラフの区分の設定」を選択します。

    このタグに設定する属性はありません。個々の円グラフ・アイテムのタグのラップに使用されます。

  2. 構造ウィンドウでdvt:mapPieSliceSetノードを右クリックし、「dvt:mapPieSliceSetの中に挿入」「円グラフの区分のアイテム」を選択します。

  3. プロパティ・インスペクタで、グラフに表示される最初のスライスに使用する一意のIDと色を入力します。

    グラフ内のスライスの順序を調べるには、「円グラフ・マップ・テーマ・バインディングの編集」ダイアログを確認します。このダイアログの「円グラフの区分の属性」列のエントリの順序で、グラフに表示されるスライスの順序が決まります。たとえば、図27-7では、グラフの最初のスライスは「Sales」を表し、2番目のスライスは「Profit」を表し、3番目のスライスは「Cost」を表します。

    図27-7 「円グラフ・マップ・テーマ・バインディングの編集」ダイアログ

    「円グラフ・マップ・テーマ・バインディングの編集」ダイアログ
  4. グラフ内のスライスごとにステップ3を繰り返します。

27.4.9 マップ円グラフ・テーマのスライスをカスタマイズする場合の処理

「円グラフ・マップ・テーマ・バインディングの編集」ダイアログを使用して、マップ円グラフ・テーマのスライスをカスタマイズする場合、スライスの順序は、ダイアログの「円グラフの区分の属性」列のエントリの順序になります。例27-4に、マップ円グラフのスライスをカスタマイズする場合にJSFページに生成されるサンプルXMLコードを示します。

例27-4 マップ円グラフのスライスをカスタマイズする場合のコード

<dvt:map
  .
  .
  .
  <dvt:mapPieGraphTheme
    .
    .
    .
    <dvt:mapPieSliceSet>
      <dvt:mapPieSliceItem color="#ffffff" id="slice1"/>
      <dvt:mapPieSliceItem color="#ffff00" id="slice2"/>
      <dvt:mapPieSliceItem color="#ff0000" id="slice3"/>
    </dvt:mapPieSliceSet>
  </dvt:mapPieGraphTheme>
</dvt:map>

27.5 ツールバーのマップへの追加

凡例と情報パネルの表示やテーマの選択(同じタイプの複数のテーマがある場合)を行ったり、距離測定、領域測定または選択ツールを使用できるようにする場合、ADF地理マップを作成する際、マップ・ツールバーも作成します。

27.5.1 ツールバーのマップへの追加方法

マップ・ツールバーはマップとは別のコンポーネントのため、JSFページでマップの上にも下にもツールバーを配置できます。次の手順では、JSFページにマップ・コンポーネントがあるものとします。

マップ・ツールバーを作成する手順:

  1. 構造ウィンドウでdvt:mapノードを右クリックし、「dvt:mapの前に挿入」または「dvt:mapの後ろに挿入」「ADFデータ視覚化」と選択します。

  2. ADFデータ視覚化アイテム・ダイアログで、「ツールバー」を選択します。

  3. 表示されるツールバーの挿入ウィザードで、このツールバーで操作するマップのIDを入力し、「次へ」をクリックします。

  4. ツールバーの一意のIDを入力し、各ツールの可視性を制御する設定を必要に応じて変更します。

27.5.2 ツールバーをマップに追加する場合の処理

ツールバーをマップに追加すると、次のようになります。

  • JSFページのマップの上または下に、指定したとおりツールバーが表示されます。1つ以上のツールの可視性を変更しないかぎり、ツールバーにはすべてのツールが含まれます。

  • XMLコードが生成され、JSFページのマップのコードの上または下に表示されます。

例27-5に、IDがmap_usのマップに関連付けられているツールバーのサンプル・コードを示します。マップのコードの位置も示します。

例27-5 マップ・ツールバーに対して生成されるコード

<af:form>
  <dvt:mapToolbar mapId="map_us" id="T1"/>
  <dvt:map  id="map_us" 
   .
   .
   .
  </dvt:map>
</af:form>