37 データバインドされた地理マップ・コンポーネントおよびテーマ・マップ・コンポーネントの作成

この章では、ADFビジネス・コンポーネントでモデル化されたデータから地理マップまたはテーマ・マップを作成する方法について説明します。これらのマップの作成には、Fusion WebアプリケーションのADFデータ・コントロールとADF Facesコンポーネントを使用します。具体的には、ADFデータ視覚化コンポーネントのmapおよびthematicMapを使用して、ビジネス・データを視覚的に表現する地理マップまたはテーマ・マップを作成する方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。

簡単なUI優先開発を使用してページを設計する場合は、地理マップまたはテーマ・マップをページに追加してから、データ・バインディングを構成してください。マップ・コンポーネントのデータ要件、タグ構造および外観と動作のカスタマイズ・オプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「マップ・コンポーネントの使用方法」の章を参照してください。

この章には次の項が含まれます:

37.1項「ADFデータ視覚化マップ・コンポーネントについて」
37.2項「データバインドされた地理マップの作成」
37.3項「データバインドされたテーマ・マップの作成」

37.1 ADFデータ視覚化マップ・コンポーネントについて

ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。

地理マップ・コンポーネントはビジネス・データを空間的に表現し、1つのマップ上に複数層(テーマとも呼ばれる)の情報を重ね合せられるようにします。たとえば、アメリカ合衆国のマップでは、色の明度を変えて各州における商品の人気を示すカラー・テーマ、商品カテゴリ内での売上を示す円グラフ・テーマ、各倉庫の正確な場所を識別する点テーマなどを使用できます。この3つの全テーマをアメリカ合衆国の地図に重ね合せると、特定の地域で商品の人気度に応じた十分な在庫があるかどうかを簡単に評価できます。地理マップでは、Oracle MapViewerサービスへの接続が必要です。また、オプションで地理的および政治的な詳細情報を表示するためのジオコーダ・サービスにも接続できます。

テーマ・マップ・コンポーネントでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、Oracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。

接頭辞dvt:は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。

37.1.1 ユースケースと例

各データ視覚化のユースケースと例の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のマップ・コンポーネントのユースケースと例に関する項を参照してください。

37.1.2 エンド・ユーザー機能およびプレゼンテーション機能

魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。各コンポーネントのエンド・ユーザー機能とプレゼンテーション機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のマップのエンド・ユーザー機能とプレゼンテーション機能に関する項を参照してください。

37.1.3 データ視覚化コンポーネントの追加機能

データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。

部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「JSFページでのユーザー・カスタマイズの許可」の章を参照してください。
アクセシビリティ: データ視覚化コンポーネントは、デフォルトでアクセス可能です。アプリケーションの各ページは、スクリーン・リーダーでのアクセスが可能になるように構成できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセス可能なADF Facesページの開発」の章を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、第19章「プレースホルダ・データ・コントロールによるページの設計」を参照してください。

37.2 データバインドされた地理マップの作成

地理マップは、Oracle Spatialの機能をOracle ADF内で提供するADFデータ視覚化コンポーネントです。このコンポーネントでは、ユーザーはビジネス・データを地理マップ上に表し、1つのマップ上に複数層の情報(テーマと呼ばれる)を重ね合せることができます。これらのレイヤーは、棒グラフ、円グラフ、カラー、点および事前定義済テーマといった任意のテーマとして表すことができます。

図37-1は、アメリカ合衆国内のある地域のベース・マップとともに次のテーマを使用した地理マップ・コンポーネントを示しています。

カラー・テーマ: このテーマでは、選択した商品について、商品の人気に基づいて州を色付けします。色の範囲は緑(その商品の人気が最高であることを表す)から赤(その商品の人気が最低であることを表す)までです。
円グラフ・テーマ: このテーマでは、各州で人気のある商品カテゴリを示す円グラフをその州に表示します。この例の円グラフでは、Media、OfficeおよびElectronicsという3つの商品カテゴリを円グラフの区分として示しています。
点テーマ: このテーマでは、倉庫を点として識別します。各点に対し、選択した商品のその倉庫での在庫レベルを示すアイコンが表示されます。表示されるアイコンは、在庫レベルが低、中、高といった各在庫範囲で異なります。

図37-1 色テーマ、円グラフ・テーマおよび点テーマを使用した地理マップ

地理マップ・コンポーネントは、複数のデータ・セットを表示するために、複数のマップを1ページ上に配置する必要がないという点が、他のADFデータ視覚化コンポーネントとは異なります。このコンポーネントは、複数のグラフを1ページ上に配置できるグラフなどのコンポーネントとは対照的です。かわりに、複数のデータセットの空間的な相互関係を示すか、特定の点に対して別々のテーマでレイヤー化された異なる属性を表示します。

地理マップ・コンポーネント自体はデータにバインドされません。しかし、各マップのテーマは独自のデータバインディングを持っています。

ベース・マップは、開発者が作成したテーマをADF地図コンポーネントでレイヤー化する背景となります。

Oracle Spatialでは、管理者は1つ以上のテーマで構成されるベース・マップを作成します。管理者は、ベース・マップのテーマの可視性を制御します。ベース・マップを拡大および縮小すると、ベース・マップの様々なテーマが表示/非表示になります。ADF地図コンポーネントのレベルでは、管理者がベース・マップに作成したテーマの表示を、開発者がズーム係数を使用して制御することはできません。

複数のテーマをADF地図にオーバーレイする際は、そのテーマに関連するコンポーネントのmaxZoomおよびminZoomプロパティを設定することでテーマの可視性を制御できます。実行時には、「マップ」ツールバーの表示メニューまたはページに作成した他のADFコンポーネントを使用してカスタム・テーマを表示/非表示にすることもできます。

データ・バインディング完了後に、地理マップをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「マップ・コンポーネントの使用方法」の章を参照してください。

37.2.1 地理ベース・マップの構成方法

地理マップを作成する場合は、最初にマップを構成してから、データ・コレクションに点、円グラフや棒グラフまたはマップの色テーマをバインドします。JDeveloperでは、作成するテーマに対して「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を行うことができます。

始める前に:

データバインドされた地理マップについて理解しておいてください。詳細は、37.2項「データバインドされた地理マップの作成」を参照してください。

他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、37.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。

次のタスクを完了する必要があります。

ピボット・テーブルのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、13.2項「アプリケーション・モジュールの作成と変更」を参照してください。

たとえば、図37-1に示す製品在庫のピボット・テーブルのデータ・ソースは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。

地理ベース・マップを構成するには:

「データ・コントロール」パネルから、コレクションを選択します。

たとえば、世界中の各倉庫の製品インベントリ・レベルを表示する地理マップを作成する場合は、「データ・コントロール」パネルからWorldProductInventory1コレクションを選択します(図37-2を参照)。

図37-2 製品インベントリ・レベルのデータ・コレクション
JSFページにデータ・コレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび点のテーマ」、「マップおよび円グラフのテーマ」、「マップおよび色のテーマ」または「マップおよび棒グラフのテーマ」を選択します。
ページ上のマップを構成していない場合は、次に表示される「地理マップの作成」ダイアログで「新規」アイコンをクリックし、「地理マップ構成の作成」ダイアログを表示して、次の手順を実行します。
1. 「ID」フィールドに、マップ構成の一意のIDを入力します。例: mapConfig1。
2. 「MapViewer URL」フィールドに、Oracle MapViewerサービスのURLを入力します。
  
  ドロップダウン・リストを使用して既存の接続を選択するか、「追加」アイコンをクリックして新しい接続を構成します。「URL接続の作成」ダイアログで、URLエンドポイントのアドレスにhttp://elocation.oracle.com/mapviewerを使用し、「接続のテスト」をクリックして接続を確認します。図37-3に、必要事項を入力した「URL接続の作成」ダイアログを示します。
  
  図37-3 マップ・ビューアのURL接続の作成
3. 「ジオコーダURL」フィールドで、マップ作成用に住所を緯度と経度の座標に変換するGeocoder WebサービスのURLを入力します。
  
  注意:
  
  ジオコーダのURLは、住所の経度および緯度情報をまだ持っていない場合のみ必要です。
  
  ドロップダウン・リストを使用して既存の接続を選択するか、「追加」アイコンをクリックして新しい接続を構成します。「URL接続の作成」ダイアログで、URLエンドポイントのアドレスにhttp://elocation.oracle.com/geocoder/gcserverを使用し、「接続のテスト」をクリックして接続を確認します。図37-4に、必要事項を入力した「URL接続の作成」ダイアログを示します。
  
  図37-4 ジオコーダURL接続の作成
4. 「OK」をクリックします。図37-5に、必要事項を入力した「地理マップ構成の作成」ダイアログを示します。
  
  図37-5 「地理マップ構成の作成」ダイアログ
「OK」をクリックします。
「地理マップの作成」ダイアログで地理マップ・コンポーネントのベース・マップを選択し、次の手順を実行して、地理マップに使用するその他の設定を指定します。
1. データソース・リストで、ベース・マップの選択元となるマップのコレクションを選択します。
2. 「基準となるマップ」リストから、地理マップ・コンポーネントの背景となるマップを選択します。
3. 「開始X」フィールドと「開始Y」フィールドの値を指定するには、マップのイメージをクリックしてマップをプレビュー・ウィンドウ内の中央に配置します。
  
  左上角のマップ・ナビゲータの矢印を使用すると、マップを適切な方向に移動できます。
4. オプションで、プレビュー・ウィンドウのスライド矢印を使用して、地図のズーム係数を調整します。
5. 「OK」をクリックします。図37-5に、必要事項を入力した「地理マップの作成」ダイアログを示します。
  
  図37-6 「地理マップの作成」ダイアログ
「テーマの作成」ダイアログを使用して、次に示すようにマップ・テーマをデータ・バインドします。
- 点テーマを作成して、ベース・マップ上のデータを表現します。詳細は、37.2.2項「点テーマを使用して地図を作成する方法」を参照してください。
- 色テーマを作成して、ベース・マップ上のデータを表現します。詳細は、37.2.6項「色テーマを使用して地理マップを作成する方法」を参照してください。
- 円グラフ・テーマまたは棒グラフ・テーマを作成して、ベース・マップ上のデータを表します。詳細は、37.2.9項「円グラフまたは棒グラフのテーマを使用した地理マップの作成方法」を参照してください。

37.2.2 点テーマを使用して地図を作成する方法

点テーマを使用して地理マップを作成すると、緯度と経度または住所で識別されるマップ内の特定の場所を表示できるようになります。たとえば、点テーマで倉庫の場所をマップに示します。表示される点のスタイルをカスタマイズすると、倉庫のセットに含まれる倉庫内の製品数(高、適正、低)に応じた個別のイメージを使用して、それぞれの製品数を区別できるようになります。

点テーマを使用した地理マップを作成する場合は、最初にベース・マップを構成してから、そのマップの点テーマをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。また、点テーマをレイヤー化して、それとは別のテーマ用に構成およびバインドされているベース・マップに重ねることもできます。

たとえば、図37-7に示す地理マップには、米国内の倉庫の場所と、それらの倉庫の製品数レベルを表す点テーマが設定されています。

図37-7 点テーマを使用した地理マップ

始める前に:

次のタスクを完了する必要があります。

点テーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、13.2項「アプリケーション・モジュールの作成と変更」を参照してください。

たとえば、図37-7に示す地理マップの点テーマのデータ・ソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。

データバインドされた点テーマを使用して地図を作成するには:

「データ・コントロール」パネルから、コレクションを選択します。

図37-8は、「データ・コントロール」パネルで選択可能なSWarehouseView1コレクションを示しています。このコレクションにより、製品数のレベルを表すようにスタイル設定された各倉庫の場所が特定できるイメージを表示する点テーマを使用した地理マップを作成できます。

図37-8 倉庫の場所と製品数のデータ・コレクション
コレクションをJSFページにドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび点のテーマ」を選択します。
ページ上のマップをまだ構成していない場合は、「地理マップの作成」ダイアログの入力を完了してください。詳細は、37.2.1項「地理ベース・マップの構成方法」を参照してください。構成が完了している場合は、次の手順を実行します。
- ドロップダウン・リストから、使用するマップ構成を選択します
- 「OK」クリックして、使用可能なマップ構成をそのまま使用します
- 「新規」をクリックして、新しいベース・マップを構成します
- 「編集」をクリックして、使用可能なマップ構成に変更を加えます
ベース・マップに点テーマをレイヤー表示するときに、それとは別のテーマ用にベース・マップが構成およびバインドされている場合は、「作成」ダイアログで「点テーマ」を選択します。
「点マップ・テーマの作成」ダイアログの「テーマID」フィールドに、点マップ・テーマの一意のIDを入力します。

「位置」セクションで、点の位置を「住所」で指定するか、x座標とy座標(経度と緯度)のペアで指定するかを選択します。

選択する位置によって、位置セクションに表示されるコントロールが決まります。

ヒント:

地図上にデータを表現するには、住所コントロールを使用するよりも、xおよびy座標を使用するほうが効率的です。これは、住所コントロールはジオコーダでxおよびy座標に変換する必要があるからです。データ・コレクションの行が100行を超える場合は、パフォーマンスを向上するために、xおよびy座標を使用してください。

xとyの点の位置に対し、次のアイテムを表すデータ・コレクションから属性を選択します。
- X(経度):マップ上の点の水平位置。
- Y(緯度):マップ上の点の垂直位置。
- ラベル:情報ウィンドウの上部に表示される点のラベル。点をクリックすると表示されます。

「点データ」セクションで、点、そのラベルおよび点のスタイル(オプション)に関連するデータを指定する次の情報を入力します。

「データ」フィールドで、点に関連付けられているデータ行(ProductCountなど)を選択します。
「ラベル」フィールドに、点をクリックすると、情報ウィンドウでデータ値の前に表示されるテキストを入力します。ラベルに使用するテキスト・リソースを入力できます。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

オプションで、「カテゴリ」フィールドで、点の適切なスタイルの検索に使用するデータ列を選択します。「カテゴリ」で値を選択すると、その値はこの点テーマのバインディングに格納された後、この点テーマ用に作成するmapPointStyleItemタグのitemValue属性と照合されます。

注意:

点のスタイルの検索にカテゴリとして使用する列がデータにない場合、mapPointStyleItemタグを使用して、「データ」フィールドで選択した列の値と一致するデータの範囲(高、適正、低など)に関連するスタイルを定義することもできます。詳細は、37.2.3項「点テーマの点スタイル・アイテムの作成方法」を参照してください。

マスター/ディテール関係を有効にする場合は、「行選択の有効化」を選択します。これは、地理マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。このオプションを選択すると、selectionListenter属性とclickListener属性の両方が有効になります。
「OK」をクリックします。

図37-9に、点テーマを使用した地理マップ用に入力が完了した「点マップ・テーマの作成」ダイアログを示します。この地理マップは、各倉庫の場所と製品数のレベルをイメージで表現します。

図37-9 倉庫内の製品数についての「点マップ・テーマの作成」ダイアログ

マップの点テーマの作成後に、マップに表示される点のスタイルをさらにカスタマイズすると、より詳細な情報を表現できるようになります。たとえば、図37-7のマップの点テーマでは、各倉庫の製品数についてのレベル(高、適正、低)を表現するために個別のイメージを使用しています。それぞれの点スタイルに、mapPointStyleItemタグを使用します。詳細は、37.2.3項「点テーマの点スタイル・アイテムの作成方法」を参照してください。

37.2.3 点テーマの点スタイル・アイテムの作成方法

特定のマップ点テーマで使用する点スタイル・アイテムを作成するために使用できる様々なオプションがあります。これらのオプションは次のとおりです。

すべてのデータ・ポイントに対する単一イメージ
データ・ポイント・カテゴリごとに異なるイメージ
データ値の低、中および高範囲を表すイメージ

マップ点テーマのデータ・バインディングを作成すると、そのマップ・テーマのすべての点に対して使用される単一の組込みイメージを選択できるようになります。この選択には、「プロパティ」ウィンドウで、mapPointThemeタグのbuiltInImage属性を使用します。この属性のデフォルト値は、オレンジ色の球です。

あるいは、「点マップ・テーマの作成」ダイアログの「カテゴリ」に値を指定した場合は、一連の点スタイル・アイテムを作成して各カテゴリのデータ・ポイントを表す別のイメージを決定する必要もあります。その場合、点スタイル・アイテムのタグで最小/最大値を使用しないでください。かわりに、点スタイル・アイテムのタグのitemValue属性に、「カテゴリ」に指定したデータ列のエントリと一致する値を設定します。

地理マップの点テーマでは、「カテゴリ」に値を指定しない場合でも、mapPointThemeタグのmapPointStyleItem子タグを使用して値の範囲(低、中、高など)とその範囲を表すイメージを指定できます。この指定をすると、各点は、その点のデータ値が含まれる範囲を識別するイメージによって表されます。

始める前に:

次のタスクを完了する必要があります。

点テーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、13.2項「アプリケーション・モジュールの作成と変更」を参照してください。

たとえば、図37-7に示す地理マップの点テーマのデータ・ソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
点テーマを使用した地理マップをページに追加します。詳細は、37.2.2項「点テーマを使用して地図を作成する方法」を参照してください。

点スタイルのアイテムをマップの点テーマに追加して、データ値の範囲を表現するには:

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

「点スタイルのアイテム」の「プロパティ」ウィンドウで、表37-1「点スタイル・アイテムのプロパティ」で説明するように値を設定します。

表37-1 点スタイル・アイテムのプロパティ

プロパティ	設定値
`Id`	点スタイル・アイテムの一意のIDを指定します。
`MinValue`	定義するデータ範囲の最小値を指定します。
`MaxValue`	定義するデータ範囲の最大値を指定します。
`ShortLabel`	ユーザーが点アイテムの上にカーソルを置いたときに表示されるテキストを指定します。たとえば、低い在庫レベルの点アイテムを定義する場合は、このプロパティの値として`Low Inventory`と入力します。
`ImageURL`	イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージはマップ上に表示され、MinValueおよびMaxValueプロパティによって指定されたデータ範囲を表します。あるいは、「その他」セクションに表示されるBuiltInImageドロップダウン・リストによって参照される様々な事前定義済イメージの1つを選択できます。
`HoverImageURL`	イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムの上にカーソルを置くと表示されます。
`SelectedImageURL`	イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムを選択すると表示されます。

手順1と手順2でデータ値の低範囲についてデータ値の範囲を定義した場合は、手順1と手順2を繰り返して、データ値の中範囲および高範囲を適切な値で定義します。

注意:

mapPointStyleItem子タグを使用して点のスタイルをカスタマイズする方法は、カスタム点イメージを指定できる宣言的な方法です。コールバックを使用してカスタム・イメージだけでなくカスタムHTMLを指定する方法の詳細は、37.2.5項「マップ点テーマへのカスタム点スタイル・アイテムの追加に関する必知事項」を参照してください。

37.2.4 点テーマを使用した地図の作成時の処理

点テーマを使用した地理マップを「データ・コントロール」パネルから作成すると、次の処理が行われます。

点テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
地理マップ・コンポーネントに必要なタグをJSFページに追加します。
地理マップ・タグ内の必要な点テーマの子タグをJSFページに追加します。

例37-1に、点テーマを使用する地理マップ用に生成された行セットのバインディングを示します。

例37-1 点テーマのバインディングXML

<bindings>
    <mapTheme xmlns="http://xmlns.oracle.com/adfm/dvt"></mapTheme>
    <mapTheme IterBinding="WorldProductInventory1Iterator"
              id="WorldProductInventory1"
              xmlns="http://xmlns.oracle.com/adfm/dvt">
      <mapThemeDataMap convert="false" mapThemeType="point">
        <data>
          <item value="AmountInStock"
                label="${adfBundle['view.ViewControllerBundle'].AMOUNT_IN_
                       STOCK}"/>
        </data>
        <item type="us_form_2" street="Address" city="City" state="State"
                   zipCode="ZipCode" label="WarehouseId"/>
      </mapThemeDataMap>
    </mapTheme>
    <mapTheme IterBinding="SWarehouseView1Iterator" id="SWarehouseView1"
              xmlns="http://xmlns.oracle.com/adfm/dvt">
      <mapThemeDataMap convert="false" mapThemeType="point">
        <data>
          <item value="ProductCount"
                label="${adfBundle['view.ViewControllerBundle'].PRODUCT_COUNT}"/>
        </data>
        <item type="lat_long" longitude="Longitude" latitude="Latitude"
              label="ProductCount"/>
      </mapThemeDataMap>
    </mapTheme>
  </bindings>

例37-2に、地理マップおよびその点テーマに対してJSFページで生成されるXMLコードを示します。

例37-2 JSFページの地理マップと点テーマのXMLコード

<dvt:map id="map" startingX="-104.15" mapServerConfigId="mapConfig1"
            baseMapName="ELOCATION.WORLD_MAP" mapZoom="3"
         inlineStyle="width:600px; height:375px;" startingY="42.09">
  <dvt:mapPointTheme id="mapPointTheme"
                     value="#{bindings.SWarehouseView1.geoMapModel}">
    <dvt:mapPointStyleItem maxValue="5.0"
                           shortLabel="#{viewcontrollerBundle.PRODUCT_COUNT_LOW}"
                           imageURL="/images/error.png" minValue="0.0"/>
    <dvt:mapPointStyleItem minValue="6.0" maxValue="7.0"
                           shortLabel="#{viewcontrollerBundle.PRODUCT_COUNT_OK}"
                           imageURL="/images/checkmark.png"/>
    <dvt:mapPointStyleItem minValue="8.0"
                           shortLabel="#{viewcontrollerBundle.PRODUCT_COUNT_HIGH}"
                           imageURL="/images/warning.png"/>
  </dvt:mapPointTheme>
</dvt:map>
<dvt:mapToolbar mapId="map" id="mt1"/>

37.2.5 マップ点テーマへのカスタム点スタイル・アイテムの追加に関する必知事項

マップの点にカスタムHTMLとカスタム・イメージを指定する場合は、mapPointThemeタグのcustomPointCallback属性を使用して、このカスタマイズを実行できます。

重要:

マップ点テーマのcustomPointCallback属性を設定すると、マップはdvt:mapPointStyleItem子タグをすべて無視します。コールバックによってこれらのタグはオーバーライドされるためです。

コールバックを使用してマップ点のスタイルをカスタマイズするには:

目的の点のカスタマイズを実行するメソッドをJavaで記述します。
このメソッドをマップのマネージドBeanに格納します。

マネージドBeanの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のマネージドBeanの作成と使用に関する項を参照してください。
マップの点テーマをデータ・バインディングした後で、「プロパティ」ウィンドウを使用して、マネージドBeanのメソッドへの参照を、dvt:mapPointThemeタグのcustomPointCallback属性に指定します。

たとえば、マネージドBeanの名前がMapSampleBean、メソッドの名前がsetCustomPointStyleの場合、その参照は#{mapSampleBean.CustomPointStyle}となります。

37.2.6 色テーマを使用して地理マップを作成する方法

色テーマを使用して地理マップを作成すると、マップの領域を色分け表示できるようになります。たとえば、色テーマを使用すると、州ごとのインベントリ・レベルを色の範囲で表現する形式で倉庫のある州を識別できます。

色テーマを使用した地理マップを作成する場合は、最初にベース・マップを構成してから、そのマップの色テーマをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。また、色テーマをレイヤー化すると、それとは別のテーマ用に構成およびバインドされているベース・マップに重ねることもできます。

たとえば、図37-10に示す地理マップには、各州のインベントリ・レベルを表現する形式で倉庫のある州を識別する色テーマが設定されています。

図37-10 色テーマを使用した地理マップ

始める前に:

次のタスクを完了する必要があります。

色テーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、13.2項「アプリケーション・モジュールの作成と変更」を参照してください。

たとえば、図37-10に示す色テーマを使用した地理マップのデータ・ソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。

データバインドされた色テーマを使用して地理マップを作成するには:

「データ・コントロール」パネルから、コレクションを選択します。

図37-11に示す「データ・コントロール」パネルでは、地域(この例では、米国の州)の製品インベントリ・レベルを色で表すマップの色テーマを作成するために、WorldProductInventory1コレクションを選択しています。

図37-11 製品インベントリ・レベルのデータ・コレクション
すでに地理マップ・コンポーネントを含んでいるJSFページにコレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび色のテーマ」を選択します。
ページ上のマップをまだ構成していない場合は、「地理マップの作成」ダイアログの入力を完了してください。詳細は、37.2.1項「地理ベース・マップの構成方法」を参照してください。構成が完了している場合は、次の手順を実行します。
- ドロップダウン・リストから、使用するマップ構成を選択します
- 「OK」クリックして、使用可能なマップ構成をそのまま使用します
- 「新規」をクリックして、新しいベース・マップを構成します
- 「編集」をクリックして、使用可能なマップ構成に変更を加えます
ベース・マップに色テーマをレイヤー表示するときに、それとは別のテーマ用にベース・マップが構成およびバインドされている場合は、「作成」ダイアログで「色テーマ」を選択します。
「色マップ・テーマの作成」ダイアログの「テーマID」フィールドで、「ID」フィールドのマップ・テーマに一意の識別子を入力します。

ベース・マップ・テーマ・セクションで、地理マップで使用するベース・マップのカラー・テーマを次のように指定します。

「名前」フィールドで、ベース・マップ・テーマの名前を選択します。
「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。

オプションで、「サンプル・テーマ・データの表示」をクリックし、「サンプル・テーマ・データ」ダイアログを表示します。このダイアログでは、実際のデータの先頭のいくつかの行を確認できるため、適切な位置列を指定できます。

たとえば、アメリカ合衆国のマップの州で構成される地域のデータを確認するには、図37-12で示すように、MAP_STATES_NAMEを選択できます。

注意:

Oracle Spatialの管理者はサンプル・データの表示を無効にできます。このボタンが使用できない場合は、管理者に連絡して指示を求めてください。

図37-12 地域または州のサンプル・テーマ・データ

「外観」セクションで、カラー・テーマの外観を次のように指定します。

「データ・バケット数」に、この地理マップのデータのグループ数を入力します。各グループは、色別にコード化されます。この数の指定後は、最小値と最大値に色を指定できます。他の値の色は、RGBアルゴリズムを使用して自動的に選択されます。
「最小値の色」で、最小値の色を選択します。
「最大値の色」で、最大値の色を選択します。

注意:

データ・バケットごとに正確な色を指定する場合は、37.2.8項「マップ・カラー・テーマでの色のカスタマイズに関する必知事項」を参照してください。

「データ」セクションで、コレクション内のデータに関する次の情報を指定します。
1. 「位置」では、ベース・マップ・テーマから選択した位置列の値に対応するデータ・コレクション内の列を選択します。
2. 「ロケーション・ラベル」では、位置列の値に関連付けられているラベルを含むデータ・コレクション内の列を選択します。これらのラベルは、色をクリックしたときまたは色の上にカーソルを置いたときに表示される情報ウィンドウに表示されます。
3. 「データ・ラベル」には、色をクリックしたときまたは色の上にカーソルを置いたときに表示される情報ウィンドウおよびツールチップでのデータの説明に使用されるラベルを入力します。たとえば、情報ウィンドウでは、データ値の前にProduct Popularityなどのラベルを表示できます。データ・ラベルに使用するテキスト・リソースを入力することもできます。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または動的ラベル用に実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「行選択の有効化」は、マスター/ディテール関係を有効にする場合にのみ使用します。これは、マップ・テーマのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。

図37-13に、商品の人気を州別のカラー・テーマで示す「カラー・マップ・テーマの作成」ダイアログを示します。

図37-13 商品の人気を州別に示す「カラー・マップ・テーマの作成」ダイアログ

37.2.7 地図へのカラー・テーマの追加時の処理

カラー・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。

カラー・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
地理マップ・タグ内の必要なカラー・テーマの子タグをJSFページに追加します。

例37-3に、地理マップのカラー・テーマに生成された行セット・バインディングを示しています。

例37-3 カラー・テーマのバインディングXML

<bindings>
    <mapTheme IterBinding="WorldProductInventory1Iterator"
              id="WorldProductInventory1"
              xmlns="http://xmlns.oracle.com/adfm/dvt">
      <mapThemeDataMap convert="false" mapThemeType="color">
        <item type="location" value="State" label="State"/>
        <data>
          <item value="AmountInStock"
                label="${adfBundle['view.ViewControllerBundle'].STOCK_LEVELS}"/>
        </data>
      </mapThemeDataMap>
    </mapTheme>
  </bindings>

例37-4に、アメリカ合衆国のマップ上の各州における商品の人気を表すカラー・テーマに対してJSFページで生成されるXMLコードを示します。

例37-4 JSFページのカラー・テーマのXMLコード

<dvt:map id="map" startingX="-102.39" mapServerConfigId="mapConfig1"
         baseMapName="ELOCATION_MERCATOR.WORLD_MAP"
         mapZoom="3" inlineStyle="width:600px; height:375px;" startingY="40.27"
         summary="Geographic map with color theme">
  <dvt:mapColorTheme id="mapColorTheme" themeName="MAP_STATES_ABBRV"
                     value="#{bindings.WorldProductInventory1.geoMapModel}"
                     bucketCount="5" minColor="#ff0000"
                     maxColor="#00ff00" locationColumn="STATE_ABRV"/>
      </dvt:map>

37.2.8 マップ・カラー・テーマでの色のカスタマイズに関する必知事項

マップ・カラー・テーマのデータ・バインディング時には、データ・バケットに対する最小値の色および最大値の色のみを指定できます。最小値から最大値までのバケットの色は、マップがアルゴリズムを使用して決定します。しかし、データ・バインディングを完了すると、各データ・バケットに使用する正確な色を指定できるようになります。

dvt:mapColorThemeタグの「プロパティ」ウィンドウで、colorList属性を使用すると、各バケットの色を指定できます。色の配列をこの属性にバインドするか、セミコロンのセパレータを使用して色の文字列を指定できます。

たとえば、この属性の値を#ff0000;#00ff00;#0000ffに設定した場合、最初のバケットは赤、2番目のバケットは緑、3番目のバケットは青となります。

37.2.9 円グラフまたは棒グラフのテーマを使用した地理マップの作成方法

円グラフ・テーマまたは棒グラフ・テーマを使用して地理マップを作成すると、緯度と経度または住所で識別されるマップ内の特定の場所を表示できるようになります。たとえば、点テーマで倉庫の場所をマップに示します。表示される点のスタイルをカスタマイズすると、倉庫のセットに含まれる倉庫内の製品数(高、適正、低)に応じた個別のイメージを使用して、それぞれの製品数を区別できるようになります。

円グラフまたは棒グラフのテーマを使用した地理マップを作成する場合は、最初にベース・マップを構成してから、そのマップの円グラフまたは棒グラフのテーマをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。また、円グラフまたは棒グラフのテーマをレイヤー化すると、それとは別のテーマ用に構成およびバインドされているベース・マップに重ねることもできます。

たとえば、図37-14に示す地理マップには、米国内の倉庫の場所と、それらの倉庫の製品数レベルを表す点テーマが設定されています。

図37-14 円グラフ・テーマを使用した地理マップ

たとえば、図37-14に示す地理マップには、米国内の倉庫の場所と、それらの倉庫の製品数レベルを表す点テーマが設定されています。

図37-15 棒グラフ・テーマを使用した地理マップ

始める前に:

次のタスクを完了する必要があります。

円グラフまたは棒グラフのテーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、13.2項「アプリケーション・モジュールの作成と変更」を参照してください。

たとえば、図37-14に示す円グラフ・テーマと図37-15に示す棒グラフ・テーマのデータ・ソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。

データバインドされた円グラフまたは棒グラフのテーマを使用した地理マップを作成するには:

「データ・コントロール」パネルから、コレクションを選択します。

図37-16に、WorldProductInventory1を選択し、ある州で人気のある製品カテゴリを表すために、既存の地図マップ・コンポーネントに円グラフまたは棒グラフの棒テーマを作成する例を示します。

図37-16 製品別インベントリ・レベルのデータ・コレクション
JSFページにコレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび円グラフのテーマ」または「マップおよび棒グラフのテーマ」を選択します。
ページ上のマップをまだ構成していない場合は、「地理マップの作成」ダイアログの入力を完了してください。詳細は、37.2.1項「地理ベース・マップの構成方法」を参照してください。構成が完了している場合は、次の手順を実行します。
- ドロップダウン・リストから、使用するマップ構成を選択します
- 「OK」クリックして、使用可能なマップ構成をそのまま使用します
- 「新規」をクリックして、新しいベース・マップを構成します
- 「編集」をクリックして、使用可能なマップ構成に変更を加えます
ベース・マップに円グラフ・テーマをレイヤー表示するときに、それとは別のテーマ用にベース・マップが構成およびバインドされている場合は、「作成」ダイアログで「円グラフ・テーマ」を選択します。
円グラフ・テーマの作成ダイアログで、次の手順を実行して、作業対象にする新しいテーマとベース・マップのテーマの要素を識別します。
1. 「テーマID」で、作成する円グラフ・テーマの一意のIDを入力します。
2. ベース・マップ・テーマ・セクションで、ベース・マップの名前と、円グラフを配置する地域を選択します。
「外観」セクションで、「データ」の下で次のようにします。
1. 「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。
  
  必要に応じて、適切な位置の列を識別できるように、「サンプル・テーマ・データの表示」をクリックして実際のデータの最初の数行を確認します。
2. 「ロケーション・ラベル」では、データ・コレクション内の位置のラベルを含むデータ・コレクション内の列を選択します。
3. 「円グラフの区分の属性」のグリッド(円グラフの場合)、または「系列の属性」のグリッド(棒グラフの場合)で、作成中の円グラフまたは棒グラフで表す値を含む各属性を入力します。
4. 各円グラフの区分の属性またはシリーズ属性の横に、その属性のデータ値のラベルとして使用するテキストを入力します。テキストを直接入力したり、データ値を1つ使用する場合のようにNo Labelを選択してラベルを抑制したり、リソース・バンドルからテキスト・リソースを指定したりできます。またはEL式ビルダーを使用して実行時にラベル・テキストを評価することもできます。
「行選択の有効化」は、関連するコンポーネントで行を選択可能にする場合にのみ選択します。このコンポーネントは、作成中の地図に関連するデータ・コレクションにリンクされているコンポーネントがページに含まれる場合に使用します。
「OK」をクリックします。

図37-17に、製品別インベントリ・レベル用に必要事項を入力した「円グラフ・マップ・テーマの作成」ダイアログを示します。

図37-17 製品別インベントリ・レベルの「円グラフ・マップ・テーマの作成」

図37-17に、製品別インベントリ・レベル用に必要事項を入力した「棒グラフ・マップ・テーマの作成」ダイアログを示します。

図37-18 製品別インベントリ・レベルの「棒グラフ・マップ・テーマの作成」

37.2.10 地理マップへの円グラフ・テーマまたは棒グラフ・テーマの追加時の処理

円グラフ・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。

円グラフ・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
マップXML内で必要な円グラフ・テーマのコードをJSFページに追加します。

例37-5に、地理マップの円グラフ・テーマに生成された行セット・バインディングを示します。

例37-5 円グラフ・テーマのバインディングXML

<mapTheme IterBinding="PopularCategoriesByState1Iterator"       
        id="PopularCategoriesByState1"
        xmlns="http://xmlns.oracle.com/adfm/dvt">
  <mapThemeDataMap mapThemeType="pieChart">
    <item type="location" value="StateProvince" label="StateProvince"/>
    <data>
      <item value="AudioVideo"
            label="${adfBundle['view.ViewControllerBundle'].AUDIO_VIDEO}"/>
      <item value="CellPhones"
            label="${adfBundle['view.ViewControllerBundle'].CELL_PHONES}"/>
      <item value="Games"
            label="${adfBundle['view.ViewControllerBundle'].GAMES}"/>
    </data>
  </mapThemeDataMap>
</mapTheme>

例37-6に、地理マップの円グラフ・テーマに対してJSFページで生成されるXMLコードを示します。

例37-6 JSFページの円グラフ・テーマのコード

<dvt:mapPieGraphTheme id="mapPieGraphTheme1"
     themeName="MAP_STATES_NAME"
     shortLabel="#{viewcontrollerBundle.POPULAR_CATEGORIES}"
     pieRadius="10"
     styleName="comet"
     value="#{bindings.PopularCategoriesByState1.geoMapModel}"
     locationColumn="POLYGON_ID"/>
</dvt:mapPieGraphTheme>

37.3 データバインドされたテーマ・マップの作成

テーマ・マップでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、リモートのOracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。

テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。

テーマ・マップに表示されるデータは、データ・コレクションに基づいています。ADFデータ・コントロールを使用すると、JDeveloperではデータ・バインディングが宣言的なタスクとなります。「データ・コントロール」パネルからJSFページにコレクションをドラッグ・アンド・ドロップし、「コンポーネント・ギャラリ」を使用してデータを表示するベース・マップとマップ・レイヤーを選択します。レイヤー・ブラウザおよびバインディング・ダイアログを使用して、テーマ・マップでデータ・コレクション属性をデータ・レイヤーにバインドできます。

マップ・レイヤーをデータ・コレクションのデータ行に関連付けるには、スタンプを使用します。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。スタンプを使用すると、テーマ・マップではエリア、マーカーまたはイメージごとに子コンポーネントが作成されません。むしろ、コンポーネントのコンテンツは、データ・コレクションの行など、データ属性ごとに1回、繰り返しレンダリングされるか、スタンプされます。

図37-19に、USAベース・マップを使用したテーマ・マップを示します。このSummit ADF DVTサンプル・アプリケーションのマップでは、州マップ・レイヤーを使用して、顧客の場所と倉庫の場所を表示し、倉庫のある州については製品インベントリ・レベルを表示しています。この例は、「データ・コントロール」パネルおよびテーマ・マップのバインディング・ダイアログを使用したときの、テーマ・マップのデフォルト機能を示しています。このデフォルト機能には、データにバインドされた凡例と、スタイル設定された点およびエリアに関連付けられるラベルなどがあります。

図37-19 顧客の場所と倉庫の場所を表示するテーマ・マップ

テーマ・マップのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、テーマ・マップへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のテーマ・マップ・コンポーネントの使用方法に関する項を参照してください。

37.3.1 ADFデータ・コントロールを使用してテーマ・マップを作成する方法

thematicMapコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModelに自動的に変換されます。

始める前に:

データバインドされたテーマ・マップについて理解しておいてください。詳細は、37.3項「データバインドされたテーマ・マップの作成」を参照してください。

次のタスクを完了する必要があります。

13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。

「データ・コントロール」パネルを使用してテーマ・マップを作成する手順は次のとおりです。

「データ・コントロール」パネルから、データ・コレクションを選択します。

図37-20に、倉庫の場所と製品インベントリ・レベルのデータ・コレクションを示します。

図37-20 倉庫の場所と在庫のデータ・コレクション
コレクションをJSFページにドラッグし、ポップアップ・メニューから「テーマ・マップ」を選択します。
「コンポーネント・ギャラリ」で、データ表示のために構成するベース・マップに関連付けられたマップ・レイヤーを選択します。この例では、米国のベース・マップで州のマップ・レイヤーが選択されています。図37-21に、米国の州のマップ・レイヤーが選択されているコンポーネント・ギャラリを示します。

図37-21 テーマ・マップのコンポーネント・ギャラリ

デフォルトでは、選択したマップ・レイヤーに面データ・レイヤーや点データ・レイヤーを追加するための「データ・レイヤーの作成」ダイアログが開きます。図37-19に示したテーマ・マップでは、倉庫の製品レベルごとに米国の州をスタイル化するように、面データ・レイヤーが構成されています。
「データ・レイヤーの作成」ダイアログで、次のように入力します。
- 「レイヤーID」: 定義するデータ・レイヤーの一意の名前を入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。
- 「面」: このオプションを選択して、面データ・レイヤーをマップ・レイヤーに追加します。
- 「エリア・レイヤー」: データ・レイヤーを追加するマップ・レイヤーを参照します。この例では、「USA(州)」マップ・レイヤーを参照します。
- 「位置」: データ・レイヤー内のエリアに対応するデータの位置を決定する、データ・モデル内の列を表す属性を選択します。位置は、データが表示されるベース・マップのリージョンのIDです。詳細は、37.3.5項「基準となるマップの位置IDに関する必知事項」を参照してください。
- 「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、37.3.6項「マスター/ディテール関係の構成に関する必知事項」を参照してください。
図37-22に、設定済の「データ・レイヤーの作成」ダイアログを示します。

図37-22 面データ・レイヤーの作成ダイアログ

areaDataLayerコンポーネントを表す面データ・レイヤーおよびareaコンポーネントを表すエリアが、レイヤー・ブラウザ階層に追加されます。図37-23に、面データ・レイヤーおよびエリアをマップ・レイヤーに追加した後で展開したレイヤー・ブラウザを示します。

図37-23 テーマ・マップ・レイヤー・ブラウザ

レイヤー・ブラウザで、面データ・レイヤーを開き、スタイル設定するエリアを選択し、「編集」アイコンをクリックします。

注意:

テーマ・マップ・レイヤー内のすべてのエリアについてデフォルトのスタンプを使用してエリアを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。areaタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。詳細は、37.3.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

「エリアの構成」ダイアログの「属性グループ」ページで、次のように入力します。

「グループ化ルール」: この表を使用して、データ・コレクション内のデータのカテゴリ・グループのスタイルを指定します。「追加」アイコンを使用して、カテゴリ・グループのルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各グループ化ルールはattributeGroupsコンポーネントとして表され、一意の連番ID (ag1、ag2など)が割り当てられます。

表に追加された行ごとに、次のように入力します。

「値でグループ化」: データ値のグループ化に使用するデータ・セットの列を表す属性を入力するか、ドロップダウン・リストを使用して選択します。たとえば、ProductCountは州ごとの倉庫内製品インベントリ・レベルを表します。

注意:

選択した属性は、カテゴリ化できる離散値で構成される必要があります。たとえば、40から45までの数値範囲は自動的にはグループ化されません。

「エリア・プロパティ」: 該当のエリアのスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターン、不透明度またはこれら有効値の任意の組合せを使用してスタイル設定できます。ダイアログのドロップダウン・リストから「複数の属性の選択」を選択し、値の組合せを指定します。

各プロパティに生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、スキンで定義されたデフォルトのランプがあり、索引ベースのプロパティを目的の値に設定することによりカスタマイズできます。詳細は、37.3.4.4項「属性グループのデフォルトのスタイル値に関する必知事項」を参照してください。
「凡例ラベル」: テキストを入力するか、テーマ・マップの凡例のカテゴリ・グループに使用するテキストを表す属性をドロップダウン・リストを使用して選択します。ドロップダウン・リストから「式ビルダー」を選択し、EL式を作成して凡例テキストを指定することもできます。詳細は、37.3.9項「データバインドされた凡例の作成」を参照してください。

「値固有のルール」: クリックして、データ・セットのカテゴリ・グループに1つ以上のデータ値の詳細を指定する際に使用する「一致ルール」表および「例外ルール」表を開きます。たとえば、一致ルールを使用して、製品インベントリ・レベルの低い倉庫があるすべての州には、事前定義済の色範囲ではなく、#DD1E2Fの色でスタイルを設定します。

注意:

これらの表で指定された一致ルールや例外ルールは、「グループ化ルール」表で定義された設定をオーバーライドします。
「一致ルール」: このオプションを使用して、データ・コレクション内のデータ・グループの1つ以上のデータ値に一致するスタイル・ルールを指定します。「追加」アイコンを使用して、カテゴリ・グループの一致ルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各一致ルールはattributeMatchRuleコンポーネントとして表され、一意の連番ID (amr1、amr2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。例:
```
<dvt:attributeMatchRule id="amrl" group="Mountain Dew">
  <f:attribute name="color" value="#ffff00"/>
</dvt:attributeMatchRule>
```
表に追加された行ごとに、次のように入力します。
- 「グループ値」: この一致ルールの実行をトリガーする「値でグループ化」属性の値を入力します。この例では、倉庫内製品インベントリ・レベルのデータ・コレクションの属性には、low、medおよびhighの値が含まれます。
- 「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターンまたは不透明度の値を使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「エリア・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
- 「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。
  
  色の有効な値は、RGB16進数色です。
  
  パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
  
  不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。

「例外ルール」: データ・セット内のカテゴリ・グループのスタイル・ルールについて1つ以上の例外を指定します。「追加」アイコンを使用して、例外ルールを構成する表に行追加し、「削除」アイコンを使用して任意の行を表から削除します。各例外ルールはattributeExceptionRuleコンポーネントとして表され、一意の連番ID (aer1、aer2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。

表に追加された行ごとに、次のように入力します。

「条件」: EL式を入力するか、ドロップダウン・リストを使用して「式ビルダー」ダイアログを開き、EL式を作成します。この式は、特定の条件を満たす場合にスタイル・プロパティ値を別の値に置き換えます。例:
```
#{row.Sales gt 100000}
```
「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターンまたは不透明度の値を使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「エリア・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。

色の有効な値は、RGB16進数色です。

パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。

不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。

「凡例ラベル」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

注意:

テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。

#{viewController.ResourceBundle[row.label]}

「メッセージ」: エリアの構成に関連付けられたアラートを必要に応じて確認したり消去します。

図37-24に、設定済の「エリアの構成」ダイアログを示します。メッセージ・ペインの警告は、ダイアログの「デフォルト・スタンプ」ページで指定されているデフォルトのエリアの色が、「グループ化ルール」で指定された色や、「属性グループ」ページで指定された値固有のオーバーライドで上書きされることをユーザーにアラートします。

図37-24 「エリアの構成」ダイアログの「属性グループ」ページ

レイヤー・ブラウザを使用して、倉庫の場所を表すグローバル・ポイント・データ・レイヤーを追加します。このレイヤーの作成には、テーマ・マップを作成したときに使用したものと同じデータ・コレクションを使用します。手順の詳細は、37.3.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
レイヤー・ブラウザを使用して、顧客の住所を表すグローバル・ポイント・データ・レイヤーを追加します。このレイヤーの作成には、テーマ・マップを作成したときに使用したものとは別のデータ・コレクションを使用します。手順の詳細は、37.3.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。図37-25に、顧客の場所のデータ・コレクションを示します。

図37-25 顧客の住所のデータ・コレクション
レイヤー・ブラウザを使用して、グローバル・ポイント・データ・レイヤーで顧客の場所を表すためのマーカーを追加して、スタイルを設定します。手順の詳細は、37.3.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

図37-26では、図37-20に示したテーマ・マップのレイヤー・ブラウザを開いています。

図37-26 テーマ・マップ・レイヤー・ブラウザ
データ・バインドされた凡例とラベル追加して、スタイル設定した点と面に関連付けるように構成します。手順の詳細は、37.3.9項「データバインドされた凡例の作成」を参照してください。

37.3.2 データ・コントロールを使用したテーマ・マップ作成時の処理

ADFデータ・コントロールを使用してテーマ・マップを作成すると、JDeveloperにより、次が実行されます。

JSFページのページ定義ファイルでテーマ・マップのバインディングが定義されます。
DVTテーマ・マップ・コンポーネント用のコードがJSFページに挿入されます。

例37-7に、図37-19に例示したテーマ・マップの場合の、JSFページのページ定義ファイルに定義されたバインディングを示します。

例37-7 テーマ・マップのXMLバインディング

<bindings>
    <tree IterBinding="WorldProductInventory1Iterator" id="WorldProductInventory1">
      <nodeDefinition DefName="model.WorldProductInventory" Name="WorldProductInventory10">
        <AttrNames>
          <Item Value="Address"/>
          <Item Value="AmountInStock"/>
          <Item Value="Category"/>
          <Item Value="CategoryId"/>
          <Item Value="City"/>
          <Item Value="Country"/>
          <Item Value="CountryCode"/>
          <Item Value="CountryId"/>
          <Item Value="Id"/>
          <Item Value="Id1"/>
          <Item Value="Id2"/>
          <Item Value="Id3"/>
          <Item Value="Id4"/>
          <Item Value="Latitude"/>
          <Item Value="Longitude"/>
          <Item Value="ProdName"/>
          <Item Value="ProductId"/>
          <Item Value="RegName"/>
          <Item Value="RegionId"/>
          <Item Value="ReorderPoint"/>
          <Item Value="State"/>
          <Item Value="WarehouseId"/>
          <Item Value="ZipCode"/>
        </AttrNames>
      </nodeDefinition>
    </tree>
    <tree IterBinding="SCustomerView1Iterator" id="SCustomerView1">
      <nodeDefinition DefName="model.SCustomerView" Name="SCustomerView10">
        <AttrNames>
          <Item Value="Address"/>
          <Item Value="City"/>
          <Item Value="CountryId"/>
          <Item Value="Id"/>
          <Item Value="Name"/>
          <Item Value="State"/>
          <Item Value="ZipCode"/>
        </AttrNames>
      </nodeDefinition>
    </tree>
    <tree IterBinding="SWarehouseView1Iterator" id="SWarehouseView1">
      <nodeDefinition DefName="model.SWarehouseView" Name="SWarehouseView10">
        <AttrNames>
          <Item Value="Address"/>
          <Item Value="City"/>
          <Item Value="CountryId"/>
          <Item Value="Id"/>
          <Item Value="Latitude"/>
          <Item Value="Longitude"/>
          <Item Value="ManagerId"/>
          <Item Value="Phone"/>
          <Item Value="ProductCount"/>
          <Item Value="State"/>
          <Item Value="ZipCode"/>
        </AttrNames>
      </nodeDefinition>
    </tree>
  </bindings>

例37-8は、図37-19に示したテーマ・マップ例のJSFページに挿入されるコードです。

例37-8 テーマ・マップについてのJSFページのコード

<dvt:thematicMap id="tm1" basemap="usa" animationOnDisplay="alphaFade"
                 summary="#{viewcontrollerBundle.THEMATIC_MAP_DISPLAYING_
                 WAREHOUSE_PRODUCT_INVENTORY_LEVELS}">
        <dvt:areaLayer layer="states" id="al1">
          <dvt:areaDataLayer id="dal1"
                             value="#{bindings.SWarehouseView1.collectionModel}"
                             var="row">
            <dvt:areaLocation name="#{row.State}" id="al2">
              <dvt:area id="a1" shortDesc="#{row.ProductCount} units">
                <dvt:attributeGroups id="ag1" type="color"
                                     value="#{row.ProductCount le 5 ? 'low' :
                                     (row.ProductCount le 8 ? 'med' : 'high')}"
                                     label="#{row.ProductCount le 5 ? 'Low Product
                                     Counts' : (row.ProductCount le 8 ? 'Good
                                     Product Counts' : 'Surplus Product
                                     Counts')}">
                  <dvt:attributeMatchRule id="amr1" group="low">
                    <f:attribute name="color" value="#DD1E2F"/>
                  </dvt:attributeMatchRule>
                  <dvt:attributeMatchRule id="amr2" group="med">
                    <f:attribute name="color" value="#EBB035"/>
                  </dvt:attributeMatchRule>
                  <dvt:attributeMatchRule id="amr3" group="high">
                    <f:attribute name="color" value="#218559"/>
                  </dvt:attributeMatchRule>
                </dvt:attributeGroups>
              </dvt:area>
            </dvt:areaLocation>
          </dvt:areaDataLayer>
        </dvt:areaLayer>
        <dvt:pointDataLayer id="dpl1"
                            value="#{bindings.SCustomerView1.collectionModel}"
                            var="row">
          <dvt:pointLocation type="pointName" pointName="#{row.State}_
                             #{fn:toUpperCase(fn:replace(row.City, ' ', '_'))}"
                             id="pl1">
            <dvt:marker id="m2" fillColor="#00000" opacity="1.0" shape="human"
                        scaleX="4.0" scaleY="4.0"
                        shortDesc="#{row.Name}">
              <f:attribute name="legendLabel" value="Customer Location"/>
            </dvt:marker>
          </dvt:pointLocation>
        </dvt:pointDataLayer>
        <dvt:pointDataLayer id="dpl2"
                            value="#{bindings.SWarehouseView1.collectionModel}"
                            var="row">
          <dvt:pointLocation type="pointXY" pointX="#{row.Longitude}"
                             pointY="#{row.Latitude}" id="pl2">
            <af:image id="img1" source="/images/normalHouse.gif"
                      shortDesc="#{row.Address}, #{row.City} #{row.ZipCode}">
              <f:attribute name="legendLabel" value="Warehouse Location"/>
            </af:image>
          </dvt:pointLocation>
        </dvt:pointDataLayer>
        <dvt:legend id="l1">
          <dvt:showLegendGroup id="slg1" label="Customer and Warehouse Locations">
            <dvt:legendSection source="dpl1:m2" id="ls2"/>
            <dvt:legendSection source="dpl2:img1" id="ls1"/>
          </dvt:showLegendGroup>
          <dvt:showLegendGroup id="slg2" label="Warehouse Product Levels">
            <dvt:legendSection source="al1:dal1:ag1" id="ls3"/>
          </dvt:showLegendGroup>
        </dvt:legend>
      </dvt:thematicMap>

データ・バインドされたテーマ・マップの作成を完了すると、ベース・マップの地理階層で使用可能なリージョンを表す別のマップ・レイヤーを追加したり、テーマ・マップの作成に使用したものと同じデータ・コレクションを使用して面データ・レイヤーや点データ・レイヤーを関連付けできます。レイヤー・ブラウザでは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、スタイル設定されたエリアとマーカーの論理的構造を表します。レイヤー・ブラウザを使用して次を実行します。

ベース・マップの地理階層のその他のマップ・レイヤーをテーマ・マップに追加します。
下位レベルのリージョンを使用して、カスタム・レイヤーにリージョンを集約することにより、ベース・マップの地理階層でカスタム・マップ・レイヤーを定義します。詳細は、37.3.7項「カスタム・マップ・レイヤーの定義方法」を参照してください。
(グローバルまたはマップ・レイヤー固有の)面データ・レイヤーや点のデータ・レイヤーを追加、編集または削除します。詳細は、37.3.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
スタイル設定したエリアやマーカーを追加、編集または削除します。詳細は、37.3.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

データ・コントロールを使用してテーマ・マップを作成すると、デフォルトのマップ・ラベルや凡例の表示をカスタマイズし、相互作用力やアニメーション効果を追加できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』を参照してください。

37.3.3 テーマ・マップにデータ・レイヤーを追加する方法

データ・レイヤーを使用して、マップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。実行時にマップ・レイヤーが表示される場合は、データはスタイル設定されたエリア、マーカーまたはイメージとして表示されます。

マップ・レイヤーは、1つの面データ・レイヤーあるいは1つ以上の点データ・レイヤーを使用して、データを表示できます。面データ・レイヤーは、エリア、マーカーまたはイメージを使用してスタイル設定できます。点データ・レイヤーは、マーカーまたはイメージを使用してスタイル設定できます。

点データ・レイヤーが、特定のマップ・レイヤーの子としてではなくthematicMapの直接の子としてベース・マップに関連付けられている場合は、データは常時表示され、グローバル・ポイント・レイヤーと呼ばれます。

始める前に:

次のタスクを完了する必要があります。

13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされたテーマ・マップをJSFページに作成します。作成手順は、37.3.1項「ADFデータ・コントロールを使用したテーマ・マップの作成」を参照してください。

面データ・レイヤーをマップ・レイヤーに追加する手順は次のとおりです。

ビジュアル・エディタでテーマ・マップを選択します。
レイヤー・ブラウザで、データ・コレクションの行をバインドするマップ・レイヤーを選択します。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップの内部で右クリックして「レイヤー・ブラウザを開く」を選択します。
「追加」アイコンのドロップダウン・リストから、「データ・レイヤーの追加」を選択します。

「データ・レイヤーの作成」ダイアログで、次のように入力します。

「レイヤーID」: 定義するデータ・レイヤーの一意の名前を入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。

「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。データ・レイヤーへのデータのバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。

注意:

または、「式ビルダー」ページを使用して、面データ・レイヤーと各エリアのデータ・バインドに使用しているADFマネージドBeanを選択します。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。

「面」: このオプションを選択して、面データ・レイヤーをマップ・レイヤーに追加します。
「エリア・レイヤー」: データ・レイヤーを追加するマップ・レイヤーを参照します。
「位置」: データ・レイヤーのエリアに対応するデータ位置を決定する、データ・モデルの列を表す属性を選択します。位置は、データが表示されるベース・マップのリージョンのIDです。詳細は、37.3.5項「基準となるマップの位置IDに関する必知事項」を参照してください。
「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、37.3.6項「マスター/ディテール関係の構成に関する必知事項」を参照してください。

図37-27に、設定済の面データ・レイヤーの作成ダイアログを示します。

図37-27 面データ・レイヤーの作成ダイアログ

デフォルトでは、areaDataLayerコンポーネントを表す面データ・レイヤーおよびareaコンポーネントを表すエリアが、レイヤー・ブラウザ階層に追加されます。例37-9に、面データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示します。

例37-9 JSFページの面データ・レイヤーのコード

<dvt:thematicMap id="tm1" basemap="usa">
  <dvt:areaLayer layer="counties" id="al1">
    <dvt:areaDataLayer id="dl2"
                       value="#{bindings.TmapStatesView11.collectionModel}"
                       var="row">
      <dvt:areaLocation name="#{row.Name}" id="al2">
        <dvt:area id="a1"/>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
...
</dvt:thematicMap>

点データ・レイヤーをマップ・レイヤーに追加する手順は次のとおりです。

ビジュアル・エディタでテーマ・マップを選択します。
レイヤー・ブラウザで、データ・レイヤーをバインドするマップ・レイヤーを選択します。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップの内部で右クリックして「レイヤー・ブラウザを開く」を選択します。

「追加」アイコンのドロップダウン・リストから、「データ・レイヤーの追加」を選択します。

注意:

テーマ・マップに常時表示されるグローバル・ポイント・レイヤーを作成する場合は、「グローバル・ポイント・レイヤーの作成」を選択します。

「データ・レイヤーの作成」ダイアログで、次のように入力します。

「レイヤーID」: 定義するデータ・レイヤーの一意のIDを入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。

注意:

または、「式ビルダー」ページを使用して、点データ・レイヤーと各マーカーのデータ・バインドに使用するADFマネージドBeanを選択します。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。

「点」: このオプションを選択して、点データ・レイヤーをマップ・レイヤーに追加します。
「エリア・レイヤー」: ドロップダウン・リストを使用してデータ・レイヤーを関連付けるマップ・レイヤーを選択します。「すべて」を選択すると、点データ・レイヤーがグローバル・ポイント・レイヤーとして構成され、常時表示されるようになります。使用可能なマップ・レイヤーを選択した場合は、点データ・レイヤーはそのマップ・レイヤーが表示された場合のみ表示されます。
「データ・タイプ」: 次のいずれかを選択します。
- 「市区町村」: ベース・マップの名前付きポイントにマッピングされる、データ・コレクション内の名前付きポイント(市区町村など)を表すpointNameデータ型を使用するには、これを選択します。
- 「座標」: pointXとpointYを組み合せてポイントの位置を定義する、データ・コレクション内の列を表すpointXYデータ型を使用するには、これを選択します。
「位置」: 市区町村データ型が指定されている場合にのみ使用可能です。ドロップダウン・リストを使用して、データ・レイヤーのポイントに対応するデータの位置を決定する、データ・モデルの列を表す属性を選択します。位置は、データが表示されるベース・マップのポイントのIDです。詳細は、37.3.5項「基準となるマップの位置IDに関する必知事項」を参照してください。
「経度」: 座標データ型が指定されている場合に使用可能です。ドロップダウン・リストを使用して、経度、つまりマーカーのpointXを表すデータ・コレクションの属性を選択します。
「緯度」: 座標データ型が指定されている場合に使用可能です。ドロップダウン・リストを使用して、緯度、つまりマーカーのpointYを表すデータ・コレクションの属性を選択します。
「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、37.3.6項「マスター/ディテール関係の構成に関する必知事項」を参照してください。

図37-28に、データ型がpointNameの、設定済の点データ・レイヤーの作成ダイアログを示します。

図37-28 点データ・レイヤーの作成ダイアログ

デフォルトでは、pointDataLayerコンポーネントを表す点・データ・レイヤーおよびmarkerコンポーネントを表すマーカーが、レイヤー・ブラウザ階層に追加されます。例37-10に、点データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示します。

例37-10 JSFページの点データ・レイヤーのコード

<dvt:thematicMap id="tm1" basemap="usa">
  <dvt:areaLayer layer="states" id="al1">
    <dvt:pointDataLayer id="dl1"
                        value="#{bindings.TmapCitiesView11.collectionModel}"
                        var="row">
      <dvt:pointLocation type="pointName" pointName="#{row.City}" id="pl1">
        <dvt:marker id="m2"/>
      </dvt:pointLocation>
    </dvt:pointDataLayer>
  </dvt:areaLayer>
...
</dvt:thematicMap>

例37-11に、グローバル・ポイント・データ・レイヤーをテーマ・マップに追加する際にJSFページに追加されるコードを示します。

例37-11 JSFページのグローバル・ポイント・データ・レイヤーのコード

<dvt:thematicMap>
  <areaLayer layer="states" id="al1"/>
  <dvt:pointDataLayer id="dl2"
                      value="#{bindings.TmapCitiesView12.collectionModel}"
                      var="row">
    <dvt:pointLocation type="pointXY" pointX="#{row.Longitude}"
                       pointY="#{row.Latitude}" id="pl2">
      <dvt:marker id="m3"/>
    </dvt:pointLocation>
  </dvt:pointDataLayer>
...
</dvt:thematicMap>

面データ・レイヤーまたは点データ・レイヤーをテーマ・マップに追加したら、エリア、マーカーまたはイメージを使用してデータをスタイル設定します。詳細は、37.3.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

37.3.4 データを表示するためのエリア、マーカーおよびイメージのスタイル設定

面データ・レイヤーを使用してマップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。

点データ・レイヤーを使用してマップ上のポイントのセットをデータ・コレクションに関連付けます。データ・ポイントは、マップ・レイヤー内の名前付きポイント(米国マップ内の都市など)、または経度と緯度により、指定できます。スタンプを使用すれば、データ・モデル内の各データ行をマーカー(円形や四角形など)またはイメージにより識別できます。

37.3.4.1 エリアをスタイル設定してデータを表示する方法

テーマ・マップareaLayer内のすべてのエリアについてデフォルトのスタンプを使用してエリアを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。areaタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。

デフォルトでは、面データ・レイヤーを追加すると、構成可能なエリアがレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。

たとえば、倉庫のある州を赤色で表示するように(図37-29を参照)、usaベース・マップのstatesレイヤーに含まれる州を属性グループでスタイル設定できます。

図37-29 エリア・スタンプが構成されたテーマ・マップ

始める前に:

次のタスクを完了する必要があります。

13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされたテーマ・マップをJSFページに作成します。作成手順は、37.3.1項「ADFデータ・コントロールを使用したテーマ・マップの作成」を参照してください。

デフォルトのスタンプを使用してエリアをスタイル設定する手順は次のとおりです。

レイヤー・ブラウザで、構成しているマップ・レイヤー内部のエリア位置にあるエリアを選択します。
「編集」アイコンをクリックします。

「エリアの構成」ダイアログの「デフォルト・スタンプ」ページで、次のように入力します。

「位置」: デフォルトでは、データ・レイヤーのエリアに対応するデータの位置を決定する、データ・モデルの列を表す属性です。位置は、データが表示されるベース・マップのリージョンのIDです。この読取り専用フィールドには、スタンプされたエリアをベース・マップのリージョンにマップするEL式が表示されます。詳細は、37.3.5項「基準となるマップの位置IDに関する必知事項」を参照してください。
「色」: (オプション)ドロップダウン・リストからエリアの塗りつぶし色を選択します。有効な値は、RGB16進数です。ドロップダウン・リストから「カスタム・カラー」を選択し、「カラー・ピッカー」ダイアログを開きます。
「パターン」: (オプション)ドロップダウン・リストから12個の事前作成されたパターンのいずれかを選択し、エリアをスタイル設定します。たとえば、smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなどがあります。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
「不透明度」: (オプション)エリアの塗りつぶし色の不透明度を指定します。有効値の範囲は、0.0(透明)から1.0(不透明)です。

「凡例に含める」: 検索アイコンを使用して「テキスト・リソースの選択」ダイアログを開き、凡例テキストに使用するアプリケーション・テキスト・リソースを選択または作成します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

注意:

#{viewController.ResourceBundle[row.label]}

「メッセージ」: エリアの構成に関連付けられたアラートを必要に応じて確認したり消去します。

図37-30に、「エリアの構成」ダイアログの「デフォルト・スタンプ」ページを示します。

図37-30 「エリアの構成」ダイアログの「デフォルト・スタンプ」ページ

例37-12に、構成したエリアのJSFページに挿入されるコードを示します。

例37-12 デフォルト・スタンプで構成したエリアのサンプル・コード

<dvt:thematicMap id="tm1" basemap="usa">
  <dvt:areaLayer layer="states" id="al1">
    <dvt:areaDataLayer id="dl1"
                       value="#{bindings.TmapStatesView1.collectionModel}"
                       var="row">
      <dvt:areaLocation name="#{row.Name}" id="al2">
        <dvt:area id="a1" fillColor="#ff0000">
          <f:attribute name="legendLabel" 
                value="#{Bundle.US_STATES}"/>
        </dvt:area>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
</dvt:thematicMap>

データ・コレクション内のデータのカテゴリ・グループを使用してエリアをスタイル設定する場合は、「エリアの構成」ダイアログの「属性グループ」ページを使用します。サンプル・コードを含めた「属性グループ」ページの使用方法の詳細は、37.3.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」に記載のユースケースを参照してください。

37.3.4.2 マーカーをスタイル設定してデータを表示する方法

テーマ・マップ・レイヤー内のすべてのマーカーについてデフォルトのスタンプを使用してマーカーを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。markerタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。

デフォルトでは、点データ・レイヤーを追加すると、構成可能なマーカー要素がレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。

たとえば、図37-31に示すように、デフォルトのスタンプを使用すると、米国のベース・マップの州レイヤーに事前定義されているすべての市区町村を、赤丸を付けることにより識別できます。この例では、マーカーは点データ・レイヤー上でスタイル設定されています。面データ・レイヤー上でのマーカーのスタイル設定も同様です。

図37-31 デフォルト・スタンプで構成したマーカーを含むテーマ・マップ

始める前に:

次のタスクを完了する必要があります。

13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされたテーマ・マップをJSFページに作成します。作成手順は、37.3.1項「ADFデータ・コントロールを使用したテーマ・マップの作成」を参照してください。

デフォルトのスタンプを使用してマーカーをスタイル設定する手順は次のとおりです。

レイヤー・ブラウザで、構成しているマップ・レイヤー内部のポイント位置にあるマーカーを選択します。
「編集」アイコンをクリックします。

「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページで、次のように入力します。

「位置」: デフォルトでは、データ・レイヤーのマーカーに対応するデータの位置を決定する、データ・モデルの列を表す属性です。位置は、データが表示されるベース・マップのポイントのIDです。この読取り専用フィールドには、スタンプされたマーカーをベース・マップのポイントにマップするEL式が表示されます。詳細は、37.3.5項「基準となるマップの位置IDに関する必知事項」を参照してください。
「色」: (オプション)ドロップダウン・リストからマーカーの塗りつぶし色を選択します。有効な値は、RGB16進数です。ドロップダウン・リストから「カスタム・カラー」を選択し、「カラー・ピッカー」ダイアログを開きます。
「パターン」: (オプション)ドロップダウン・リストから12個の事前作成されたパターンのいずれかを選択し、マーカーをスタイル設定します。たとえば、smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなどがあります。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
「不透明度」: (オプション)マーカーの塗りつぶし色の不透明度を指定します。有効値の範囲は、0.0(透明)から1.0(不透明)です。
「図形」: (オプション)マーカーの形状を選択します。有効な値は、円(デフォルト)、四角、正符号、ひし形、上向き三角形、下向き三角形および人型です。

オプションで、「カスタム形状」フィールドを使用して、マーカーに使用するためにScalable Vector Graphics (SVG)ファイルに対してshapePath値を指定します。パスを入力するか、「検索」アイコンを使用して「SVGファイルの選択」ダイアログを開き、ファイルの場所にナビゲートします。このオプションは、「図形」フィールドでデフォルトの図形が選択されている場合にのみ使用できます。

形状は、CSSスタイル・プロパティを使用して指定することもできます。事前定義のマーカーの形状は上書きでき、カスタム・マーカー用のSVGファイルのパスは、shapePath属性を使用せずに定義できます。詳細は、37.3.4.3項「マーカーのスタイル設定に関する必知事項」を参照してください。
「サイズ」: (オプション)マーカーをデフォルトのサイズから拡大縮小するためのパーセンテージを、「スケールX」(水平方向)および「スケールY」(垂直方向)に入力します。パーセンテージが浮動小数に変換されます。たとえば、マーカーの幅を2倍にするには、「スケールX」を200に設定します。すると、タグに2.0と書き込まれます。また、高さを半分にするには、「スケールY」を50に設定します。すると、タグに0.5と書き込まれます。

「凡例に含める」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

注意:

#{viewController.ResourceBundle[row.label]}

「メッセージ」: マーカーの構成に関連付けられたメッセージを確認したり消去します。

図37-32に、「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページを示します。

図37-32 「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページ

例37-13に、構成したマーカーのJSFページに挿入されるコードを示します。

例37-13 デフォルト・スタンプで構成したマーカーのサンプル・コード

<dvt:thematicMap id="tm1" basemap="usa">
  <dvt:areaLayer layer="states" id="al1">
    <dvt:pointDataLayer id="dl2"
                        value="#{bindings.TmapCitiesView1.collectionModel}"
                        var="row">
      <<dvt:pointLocation type="pointName" pointName="#{row.City}" id="pl1">
        <dvt:marker id="m2" fillColor="#ff0000">
          <f:attribute name="legendLabel" 
                value="#{Bundle.US_CITIES}"/>
        </dvt:marker>
      </dvt:pointLocation>
    </dvt:pointDataLayer>
  </dvt:areaLayer>
</dvt:thematicMap>

データ・コレクション内のデータのカテゴリ・グループを使用してマーカーをスタイル設定する場合は、「マーカーの構成」ダイアログの「属性グループ」ページを使用します。マーカーは、点データ・レイヤーまたは面データ・レイヤーに対して構成できます。

データのカテゴリ・グループを使用してマーカーをスタイル設定する手順は次のとおりです。

レイヤー・ブラウザで、構成しているマップ・レイヤー内部のマーカー位置にあるマーカーを選択します。
「編集」アイコンをクリックします。

「マーカーの構成」ダイアログの「属性グループ」ページで、次のように入力します。

表に追加された行ごとに、次のように入力します。

「値でグループ化」: データ値のグループ化に使用するデータ・セットの列を表す属性を入力するか、ドロップダウン・リストを使用して選択します。

注意:

選択した属性は、カテゴリ化できる離散値で構成される必要があります。たとえば、40から45までの数値範囲は自動的にはグループ化されません。

「マーカー・プロパティ」: 該当のマーカーのスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。マーカーは、色、パターン、不透明度、スケールX、スケールYまたはこれら有効値の任意の組合せを使用してスタイル設定できます。ダイアログのドロップダウン・リストから「複数の属性の選択」を選択し、値の組合せを指定します。

各プロパティに生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、スキンで定義されたデフォルトのランプがあり、索引ベースのプロパティを目的の値に設定することによりカスタマイズできます。詳細は、37.3.4.4項「属性グループのデフォルトのスタイル値に関する必知事項」を参照してください。
「凡例ラベル」: テキストを入力するか、テーマ・マップの凡例のカテゴリ・グループに使用するテキストを表す属性をドロップダウン・リストを使用して選択します。ドロップダウン・リストから「式ビルダー」を選択し、EL式を作成して凡例テキストを指定することもできます。詳細は、37.3.9項「データバインドされた凡例の作成」を参照してください。

「値固有のルール」: クリックして、データ・セットのカテゴリ・グループに1つ以上のデータ値の詳細を指定する際に使用する「一致ルール」表および「例外ルール」表を開きます。

注意:

これらの表で指定された一致ルールや例外ルールは、「グループ化ルール」表で定義された設定をオーバーライドします。
「一致ルール」: このオプションを使用して、データ・コレクション内のデータ・グループの1つ以上のデータ値に一致するスタイル・ルールを指定します。「追加」アイコンを使用して、カテゴリ・グループの一致ルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各一致ルールはattributeMatchRuleコンポーネントとして表され、一意の連番ID (amr1、amr2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。例:
```
<dvt:attributeMatchRule id="amrl" group="Mountain Dew">
  <f:attribute name="color" value="#ffff00"/>
</dvt:attributeMatchRule>
```
表に追加された行ごとに、次のように入力します。
- 「グループ値」: この一致ルールの実行をトリガーする「値でグループ化」属性の値を入力します。
- 「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。マーカーは、色、パターン、不透明度、スケールX、スケールYまたはこれら有効値の任意の組合せを使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「マーカー・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
- 「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。
  
  色の有効な値は、RGB16進数色です。
  
  パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
  
  不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。
  
  スケールXおよびスケールYの有効値はパーセンテージで、これはその後浮動小数に変換されます。

「例外ルール」: データ・セットのカテゴリ・グループのスタイル・ルールについて1つ以上の例外を指定します。「追加」アイコンを使用して、例外ルールを構成する表に行追加し、「削除」アイコンを使用して任意の行を表から削除します。各例外ルールはattributeExceptionRuleコンポーネントとして表され、一意の連番ID (aer1、aer2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。例:

<dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}"
               label="Texas">
  <f:attribute name="color" value="#ff00ff"/>
</dvt:attributeExceptionRule>

表に追加された行ごとに、次のように入力します。

「条件」: EL式を入力するか、ドロップダウン・リストを使用して「式ビルダー」ダイアログを開き、EL式を作成します。この式は、特定の条件を満たす場合にスタイル・プロパティ値を別の値に置き換えます。例:
```
#{row.Sales gt 100000}
```
「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。マーカーは、色、パターン、不透明度、スケールXまたはスケールYを使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「マーカー・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。

色の有効な値は、RGB16進数色です。

パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。

不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。

スケールXおよびスケールYの有効値はパーセンテージで、これはその後浮動小数に変換されます。

注意:

#{viewController.ResourceBundle[row.label]}

「メッセージ」: マーカーの構成に関連付けられたアラートを必要に応じて確認したり消去します。

たとえば、図37-33に示すように、面データ・レイヤーでマーカーを使用してデータのカテゴリ・グループを色で表示できます。

図37-33 色別のマーカー属性グループ

例37-14に、色別のマーカー属性グループのサンプル・コードを示します。

例37-14 色別のマーカー属性グループのサンプル・コード

<dvt:thematicMap basemap="usa" id="tm1"
  <dvt:areaLayer layer="states" id="al1" labelDisplay="off">
    <dvt:areaDataLayer id="dl1" var="row" value="#{stateData.colorModel}">
      <dvt:areaLocation id="al2" name="#{row.name}">
        <dvt:marker id="m1"
                    scaleX="3.0"
                    scaleY="3.0"
                    shape="circle">
          <dvt:attributeGroups id="ag1" type="color" value="#{row.category}"
                               label="#{row.category}"/>
        </dvt:marker>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
  <dvt:legend id="l1">
    <f:facet name="separator"/>
    <dvt:legendSection id="ls1" label="Category" source="ag1"/>
  </dvt:legend>
</dvt:thematicMap>

マーカーに色、形状などの複数の属性を指定してデータのカテゴリ・グループを表示することもできます。また、特定の条件を満たした場合にグループ化ルールに例外を表示できます。図37-34に、色と形状を使用してカテゴリ・グループを表示したテーマ・マップ(例外のTexas州を含む)を示します。

図37-34 例外ルールが設定された複数のマーカー属性グループ

例37-15に、例外ルールが設定された複数のマーカー属性グループのサンプル・コードを示します。

例37-15 例外ルールが設定された複数のマーカー属性グループのサンプル・コード

<dvt:thematicMap basemap="usa" id="tm2"
  <dvt:areaLayer layer="states" id="al1" labelDisplay="off">
    <dvt:areaDataLayer id="dl1" var="row" value="#{stateData.colorModel}">
      <dvt:areaLocation id="al2" name="#{row.name}">
        <dvt:marker id="m1"
               scaleX="3.0"
               scaleY="3.0"
               shape="circle">
          <dvt:attributeGroups id="ag1" type="shape color" value="#{row.category}"
               label="#{row.category}">
            <dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}"
               label="Texas">
              <f:attribute name="color" value="#ff00ff"/>
            </dvt:exceptionRule>
          </dvt:attributeGroups> 
        </dvt:marker>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
  <dvt:legend id="l1">
    <f:facet name="separator"/>
    <dvt:legendSection id="ls1" label="Category" source="ag1"/>
  </dvt:legend>
</dvt:thematicMap>

37.3.4.3 マーカーのスタイル設定に関する必知事項

テーマ・マップでは、事前定義された7つの形状セット(circle、squareなど)をサポートしており、これらはmarkerコンポーネントのshape属性を使用して指定できます。カスタム・マーカーの場合、shapePath属性を使用してSVGファイルのパスを指定すると、事前定義の形状のかわりに表示されます。

マーカーの形状は、ADFスキン内のCSSスタイル・プロパティを使用して指定することもできます。テーマ・マップ・スタイルのプロパティを使用すれば、事前定義のマーカーの形状は上書きでき、カスタム・マーカーのSVGファイルのパスは、shapePath属性を使用せずに定義できます。スタイル・プロパティを使用する場合、事前定義とカスタムの両方の形状の定義にmarkerコンポーネントのshape属性が使用されます。

その形状の汎用またはコンポーネント固有のスタイル・プロパティがADFスキンで指定されている場合、事前定義の形状は上書きされます。たとえば、テーマ・マップ・コンポーネントのスタイル・プロパティで次のようにnewCircle.svgファイルを指定することにより、事前定義のcircle形状を上書きできます。

af|dvt-thematicMap::shape-circle{
  -tr-path: url(/resources/path/newCircle.svg);
}

JSFページでは、markerコンポーネントのshape属性は次のように設定されます。

<dvt:marker id="m1" shape="circle"/>

markerコンポーネントのshape属性でカスタム形状を指定するには、形状スタイル・プロパティ名でcustomの接頭辞を使用する必要があります。たとえば、カスタム形状がcustomNameという名前の場合、ADFスキン・ファイルで汎用の.AFDVTShapeCustomName:aliasスタイル・プロパティか、次のようにSVGファイルを指す-tr-pathプロパティを指定したテーマ・マップ固有のaf|dvt-thematicMap::shape-customNameのいずれかを定義する必要があります。

af|dvt-thematicMap::shape-customName{
  -tr-path: url(/resource/path/newCShape.svg);
}

JSFページでは、マーカー・コンポーネントの形状属性は次のように設定されます。

<dvt:marker id="m1" shape="customName"/>

ADFスキンおよびスタイル・プロパティの使用方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。

37.3.4.4 属性グループのデフォルトのスタイル値に関する必知事項

attributeGroupsコンポーネントは、データ・コレクション内のデータのカテゴリ・グループに基づいて色または形状などのスタイル・プロパティ値を生成するために使用します。データ・モデルでグループ化の基準となる列を表す属性に基づき、attributeGroupsコンポーネントにより、データ内の一意の値またはグループごとにスタイル値を生成できます。

値を生成するスタイル・プロパティのタイプは、attributeGroupsコンポーネントのtype属性で指定します。areaコンポーネントに対してサポートされているタイプは、color、patternおよびopacityです。markerコンポーネントに対してサポートされているタイプは、color、shape、pattern、opacity、scaleXおよびscaleYです。これらのタイプは、一意のデータ値ごとに複数のスタイル・プロパティを生成するために、スペース区切りのリストにまとめることができます。

生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、ADFスキンで定義されたデフォルトのランプがあり、索引ベースのセレクタを目的の値に設定することによりカスタマイズできます。例37-16に、CSSスタイル・プロパティを使用するサンプル・コードを示します。そのコードでは、CSSスタイル・プロパティを使用して属性グループを指定します。

例37-16 CSSスタイル・プロパティを使用した属性グループ

af|dvt-attributeGroups::shape1{
  -tr-shape: square;
}
af|dvt-attributeGroups::shape2{
  -tr-shape: square;
}
...
af|dvt-attributeGroups::color1{
  -tr-fill-color: #003366;
}

属性グループ・タイプごとのデフォルトのランプを表37-2に示します。

表37-2 テーマ・マップ属性グループのデフォルトのランプ

タイプ	デフォルトのランプ
`color`	j`#003366` (青)、`#CC3300` (赤)、`#666699` (ラベンダー)、`#0006666` (エメラルド)、`#FF9900` (橙黄)、`#993366` (紫)、`#99CC33` (黄緑色)、`#624390` (青紫)、`#669933` (緑)、`#FFCC33` (黄)、`#006699` (青緑色)、`#EBEA79` (淡黄色)
`shape`	`square`、`circle`、`diamond`、`plus`、`triangleDown`、`triangleUp`および`human`
`pattern`	`smallDiagonalLeft`、`smallDiagonalRight`、`smallTriangle`、`smallChecker`、`smallChecker`、`smallCrosshatch`、`smallDiamond`、`largeDiagonalLeft`、`largeDiagonalRight`、`largeTriangle`、`largeChecker`、`largeCrosshatch`、`largeDiamond`
`opacity`	`0.25`、`0.50`、`0.75`、`1.0`
`scaleX`および`scaleY`	`1.0`、`2.0`、`3.0`、`4.0`、`5.0`

37.3.4.5 イメージをスタイル設定してデータを表示する方法

イメージを使用して、テーマ・マップに表示されるデータをスタイル設定できます。スタンプを使用すれば、データ・モデル内の各データ行をイメージにより識別できます。イメージは、面データ・レイヤーまたは点データ・レイヤーのどちらかに関連付けることができます。

たとえば、図37-35に示すように、面データ・レイヤーで家屋のイメージを使用して、米国ベース・マップの州マップ・レイヤー上で主要な位置を識別できます。

図37-35 イメージでデータをスタイル設定したテーマ・マップ

始める前に:

テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のテーマ・マップの構成に関する項を参照してください。

ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、37.3.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。

イメージを使用してデータを表示する手順は次のとおりです。

レイヤー・ブラウザで、イメージを構成してデータを表示する面データ・レイヤーまたは点データ・レイヤーを選択します。
「構造」ウィンドウで、面または点データ・レイヤーの子であるareaLocationまたはpointLocationコンポーネントを右クリックし、「dvt:areaLocationの中に挿入」または「dvt:pointLocationの中に挿入」→「イメージ」を選択します。
「イメージの挿入」ダイアログで、次のように入力します。
- 「ソース」: イメージ・ソースの場所を指定するURIを入力します。ドロップダウン・メニューを使用して「編集」を選択し、「プロパティの編集: ソース」ダイアログまたは式ビルダーを開き、イメージ・ソースの場所を指定できます。
- 「短い説明」: スクリーン・リーダーのユーザー用のaltテキストとして使用される、イメージの短い説明を入力します。

例37-17に、イメージを使用してデータを表示するためのサンプル・コードを示します。

例37-17 イメージ構成のサンプル・コード

<dvt:thematicMap id="thematicMap" imageFormat="flash" basemap="usa"
                 summary="Thematic map showing the important real estate markets">
  <dvt:legend label="Legend">
    <dvt:legendSection source="areaLayer:dataLayer:img1"/>
  </dvt:legend>
  <dvt:areaLayer id="areaLayer" layer="states">
    <dvt:areaDataLayer id="dataLayer" contentDelivery="immediate"
                       value="#{tmapBean.colorModel}"
                       var="row"varStatus="rowStatus">
      <dvt:areaLocation id="dataLoc" name="#{row.name}">
        <af:image id="img1" source="/resources/images/geoMap/mansion.gif"
                            rendered="#{row.category == 'category1'}"
                            shortDesc="House image">
          <f:attribute name="legendLabel" value="Prime location"/>
        </af:image>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
</dvt:thematicMap>

37.3.4.6 SVGファイルに関する必知事項の必知事項

スケーラブル・ベクター・グラフィック(SVG)が、テーマ・マップのマーカーのカスタム形状作成のためのファイル形式としてサポートされています。

カスタム形状によってサポートされていないSVG機能には次のものがあります。

SVGファイル内のイメージ・タグ。SVGのベクター形状を使用して、すべてを宣言する必要があります。
パターンによる塗りつぶし
ストロークのグラデーション

37.3.5 基準となるマップの位置IDに関する必知事項

テーマ・マップ・コンポーネント用に用意されている基準となる各マップには、一連のリージョンを表す事前に作成された複数のマップ・レイヤーがあります。たとえば、基準となるworldマップには、continents用のマップ・レイヤーとcountries用の別のレイヤーが含まれています。下位レベルのマップ・レイヤーのリージョンは、集約されて地理的階層内の次のレベルを構成します。マップ・レイヤーは、areaLayerコンポーネントのlayer属性で指定されます。

データ・コレクションをテーマ・マップにバインドする際、データが表示される基準となるマップからリージョンのマップ位置IDを使用してエリアまたはポイント・データの位置を指定する列を、データ・モデルに指定する必要があります。エリアの位置はareaLocationコンポーネントのname属性で指定され、ポイントの位置は、type属性がpointNameに設定されている場合、pointLocationコンポーネントのpointName属性で指定されます。

米国の基準となるマップでは、位置IDは次のネーミング・ルールによって決まります。

countryレイヤー: USA
statesレイヤー: 2文字の郵便用の略号を使用します。たとえば、Massachusettsの位置IDはMAで、Texasの位置IDはTXです。
countiesレイヤー: statesレイヤー位置IDの後に、アンダースコア、郡の名前を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、MassachusettsのMiddlesex郡の位置IDはMA_MIDDLESEXで、TexasのRed River郡の位置IDはTX_RED_RIVERです。
citiesレイヤー: statesレイヤー位置IDの後に、アンダースコア、都市名を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、MassachusettsのBostonの位置IDはMA_BOSTONで、TexasのSan Antonio位置IDはTX_SAN_ANTONIOです。

他の基準となるマップでは、位置IDは次のネーミング・ルールによって決まります。

continentsレイヤー: world、africa、asia、australia、europe、northAmericaおよびsouthAmericaの基準となるマップでは、AF(アフリカ)、AS(アジア)、AU(オーストラリア)、EU(ヨーロッパ)、NA(北米)およびSA(南米)となります。
worldRegionsレイヤー: worldRegions、apac、emea、latinAmericaおよびusaAndCanadaの基準となるマップでは、APAC(アジア太平洋)、EMEA(ヨーロッパおよび中近東)、LAT(中南米)、NA(米国およびカナダ)となります。
countriesレイヤー: ISO 3166-1 alpha-3国名コードを使用します。たとえば、カナダの位置IDはCANで、中国の位置IDはCHNです。
citiesレイヤー: 3文字のcountries位置IDの後に、アンダースコア、都市名を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、カナダのTorontoの位置IDはCAN_TORONTO、米国のLos Angelesの位置IDはUSA_LOS_ANGELESです。

事前作成されたマップ・レイヤーごとに、すべてのテーマ・マップの基準となるマップの位置IDを記載したカンマ区切りの値(CSV)ファイルをダウンロードできます。これらのリンクは、areaLocationコンポーネントのname属性のタグ・ドキュメントで検索します。データ視覚化コンポーネントのタグ・ドキュメントにアクセスするには、「構造」ウィンドウで該当のコンポーネントを選択し、「プロパティ」ウィンドウでヘルプ・ボタンをクリックします。

37.3.6 マスター/ディテール関係の構成に関する必知事項

テーマ・マップを構成し、表などの、ページ上の別のUIコンポーネントにその関連するデータを表示できます。この構成では、テーマ・マップのデータ・コレクションが、別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係でのマスターとなります。図37-36に、州ごとの失業率を表示するテーマ・マップを示します。ユーザーは、1つ以上の州を選択してデータのディテール・ビューを表に表示できます。

図37-36 テーマ・マップのマスター/ディテール表のビュー

このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。

次のように、同じデータ・コレクションを使用して両方のビューにデータを提供する必要があります。
- テーマ・マップareaDataLayerまたはpointDataLayerをデータ・コレクションにバインドします。その属性は、テーマ・マップ・レイヤーでエリアまたはマーカーによってスタイル設定されるデータを表します。
- その他のADFコンポーネント(表など)を同じデータ・コレクションにバインドします。
「データ・レイヤーの作成」ダイアログで現在の行をマスター/ディテールに設定を選択し、テーマ・マップareaLayerコンポーネントのselectionListener属性に値を自動的に設定し、すでにテーマ・マップ・バインディングの一部であるprocessSelectionメソッドを使用します。

たとえば、テーマ・マップの面データ・レイヤー・コンポーネントのvalue属性がvalue="#{stateData.employmentData}"である場合は、selectionListener属性は次のように設定されます。
```
selectionListener="#{stateData.employmentData.processSelection}".
```
areaDataLayerまたはpointDataLayerコンポーネントのselectionMode属性が、テーマ・マップの要件に応じてsingleまたはmultipleに設定されていることを確認します。

37.3.7 カスタム・マップ・レイヤーの定義方法

カスタム・マップ・レイヤーを固有のリージョン・データから定義し、テーマ・マップの自然の地理階層に挿入できます。カスタム・レイヤーは、事前定義のマップ・レイヤーを開き、下位レベルのリージョンを集約することで作成され、カスタム・レイヤー内に新規のリージョンが形成されます。定義したカスタム・マップ・レイヤーは、他のマップ・レイヤーと同じように使用されます。

たとえば、図37-37に示すように、米国リージョンのカスタム・マップ・レイヤーに米国北東部、中西部、西部および南部という地理的なリージョンを定義できます。この図では、米国リージョンのカスタム・レイヤーは米国のベース・マップの州レイヤーから拡張されています。レイヤー内の新しいエリアは、州レイヤーの州から集約されます。米国南部リージョンのラベルには、そのリージョンにある州が一覧で表示されます。米国中西部のリージョンは、下位レベルの郡リージョンの売上げカテゴリを表示するまでドリルダウンされています。ドリルの詳細は、37.3.8項「テーマ・マップにドリルを構成する方法」を参照してください。

図37-37 米国リージョンのカスタム・マップ・レイヤー

customAreaLayerコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。customAreaLayerは、インスタンスをCollectionModelに自動的に変換します。

始める前に:

拡張対象の事前定義のベース・マップで集約したエリアを定義するADFデータ・コントロールまたはADFマネージドBeanは、すでに用意されています。

カスタム・マップ・レイヤーを追加および構成する手順は次のとおりです。

ビジュアル・エディタでテーマ・マップを選択します。
レイヤー・ブラウザの「追加」アイコンのドロップダウン・リストでカスタム・レイヤーの追加を選択しします。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップ内で右クリックして「レイヤー・ブラウザを開く」を選択します。

「カスタム・レイヤーの作成」ダイアログで、次のように入力します。

「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。カスタム・レイヤーやエリアのデータバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。

注意:

または、「式ビルダー」ページを使用して、カスタム・レイヤーと各エリアのデータ・バインドに使用するADFマネージドBeanを選択します。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。

「レイヤーID」: customAreaLayerコンポーネントの一意のIDを入力します。たとえば、米国を集約リージョン(北西部、中西部、西部、南部)に分割する場合は、対応するID (NE、MW、WおよびS)を使用してこれらのリージョンを定義できます。
「拡張」: 検索アイコンを使用して、カスタム・レイヤーにエリアを集約する際に使用できる組込みマップ・レイヤーを表示します。カスタム・レイヤーによって拡張されるマップ・レイヤーを選択します。
「エリア・リスト」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンのリストを表すデータ・コレクション属性を選択します。値のカンマ区切りリストでは、「拡張」属性に定義されているマップ・レイヤーのリージョンを集約します。
「エリアID」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンの一意のIDを表すデータ・コレクション属性を選択します。デフォルトでは、一意のID (ca1、ca2など)は、customAreaコンポーネントで使用されます。
「エリア・ラベル」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンの名前を表すデータ・コレクション属性を選択します。実行時に、集約したリージョンのカンマ区切りリストがラベルに表示されます。

図37-38に、設定済の「カスタム・レイヤーの作成」ダイアログを示します。

図37-38 「カスタム・レイヤーの作成」ダイアログ

図37-39に、カスタム・レイヤー定義後のレイヤー・ブラウザを示します。レイヤー構造では、カスタム・レイヤーcal1は、マップ・レイヤーal1で参照されます。ここで、面データ・レイヤーまたは点データ・レイヤーを追加してデータを表示します。詳細は、37.3.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。

図37-39 レイヤー・ブラウザでのカスタム・マップ・レイヤー

例37-18に、JSFページに挿入されるコードを示します。

例37-18 カスタム・マップ・レイヤーのコード

<dvt:thematicMap>
...
  <dvt:areaLayer layer="states" id="al1"/>
  <dvt:areaLayer layer="cal1" id="al3"/>
  <dvt:customAreaLayer id="cal1"
                       value="#{bindings.TmapStatesView.collectionModel}"
                       var="row"
                       extendsLayer="states">
    <dvt:customArea areaId="#{row.RowID}" areaList="#{row.RowID}"
                    label="#{row.RowID}" id="ca1"/>
  </dvt:customAreaLayer>
...
 </dvt:thematicMap>

カスタム・レイヤーを構成してマップ・レイヤー階層に追加すると、他のマップ・レイヤーと同様の方法でそのマップ・レイヤーを使用できるようになります。たとえば、図37-37に示すようにテーマ・マップを作成するには、次を実行する必要があります。

テーマ・マップでドリルをサポートするように構成します。詳細は、37.3.8項「テーマ・マップにドリルを構成する方法」を参照してください。

注意:

テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。その際、どちらのレイヤーもデータ表示を構成する必要はありません。

郡データ・ビューに面データ・レイヤーを追加し、構成します。詳細は、37.3.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
エリア・コンポーネントを追加してスタイル設定し、各マップ・レイヤーの関連するデータを表示します。詳細は、37.3.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
テーマ・マップの凡例を構成します。詳細は、37.3.9項「データバインドされた凡例の作成」を参照してください。

例37-19に、テーマ・マップでカスタム・レイヤーを使用するためのサンプル・コードを示します。

例37-19 テーマ・マップでカスタム・レイヤーを使用するためのサンプル・コード

<dvt:thematicMap id="thematicMap" imageFormat="flash" basemap="usa" drilling="on"
                 maintainDrill="true"
                 controlPanelBehavior="initExpanded" summary="US Custom Regions">
  <dvt:customAreaLayer id="crl1" value="#{tmapRegions.collectionModel}" var="row"
                       varStatus="rowStatus"
                       extendsLayer="states">
    <dvt:customArea areaId="#{row.name}" label="#{row.name}"
                    areaList="#{row.regions}" id="ca1"/>
  </dvt:customAreaLayer>
  <dvt:areaLayer id="custom" layer="crl1">
    <dvt:areaDataLayer contentDelivery="immediate"
                       value="#{tmapRegions.collectionModel}"
                       selectionMode="single"
                       var="row" varStatus="rowStatus" id="adl1">
      <dvt:areaLocation name="#{row.name}" id="al1">
        <dvt:area fillColor="#{row.color}" shortDesc="#{row.regions}"
                  id="a1" value="#{row.name}"/>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
  <dvt:areaLayer id="areaLayerS" layer="states"
    <dvt:areaDataLayer id="dataLayerS" selectionMode="multiple"
                       contentDelivery="immediate"
                       value="#{tmapStates.collectionModel}" var="row"
                       varStatus="rowStatus">
      <dvt:areaLocation id="areaLocS" name="#{row.name}">
        <dvt:area id="area1S" fillColor="#{row.color}"></dvt:area>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
  <dvt:areaLayer id="areaLayer" layer="counties">
    <dvt:areaDataLayer id="dataLayer" selectionMode="single"
                       contentDelivery="immediate"
                       value="#{tmapCounty.collectionModel}" var="row"
                       varStatus="rowStatus">
      <dvt:areaLocation id="areaLoc" name="#{row.name}">
        <dvt:area id="area1" fillColor="#{row.color}"
                             value="#{row.category}"></dvt:area>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
  <dvt:legend label="Sales Regions" id="l1">
    <dvt:legendSection source="custom:adl1:a1" id="ls1"/>
    <dvt:legendSection label="Counties" source="areaLayer:dataLayer:areaLoc"
                       id="ls3"/>
  </dvt:legend>
</dvt:thematicMap>

37.3.8 テーマ・マップでドリルを構成する方法

各種マップ・レイヤーの関連するデータ・ビューを備えたテーマ・マップは、上位と下位のデータ・ビュー間でドリルを実行するように構成できます。たとえば、図37-37に示すように、テーマ・マップでは、米国の州別の売上カテゴリのデータを郡別にドリルダウンして表示できます。州や郡を選択した場合は、ポップアップ・メニューの選択やコントロール・パネルの設定により、ドリルアップやドリルダウンが開始されます。

テーマ・マップ・エリアのドリルを宣言的に実現するには、次の要件を満たす必要があります。

ドリル階層の各マップ・レイヤー(areaLayer)について、その子であるareaDataLayerを該当するマップ・レイヤーの関連データを定義するデータ・コントロールにバインドする必要があります。
マップ・レイヤー・ドリル階層の各areaDataLayerのselectionMode属性は、singleまたはmultipleに設定されている必要があります。
下位レベルのマップ・レイヤー・ドリル階層のareaを構成し、上位レベルのマップ・レイヤーのareaコンポーネントと同じデフォルトのスタンプやカテゴリ属性のスタイルを使用してデータを表示する必要があります。
thematicMapコンポーネントのdrilling属性はonに設定する必要があります。

注意:

テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。

始める前に:

ドリル階層の各データ・レイヤーのデータ・モデルを定義するデータ・コントロールはすでに用意されています。

テーマ・マップ・エリアを構成してドリルを可能にする手順は次のとおりです。

構造ウィンドウで、dvt:thematicMapコンポーネントを選択します。
「プロパティ」ウィンドウで、「動作」セクションを開きます。このセクションを使用して、次の属性を設定します。
- Drilling: テーマ・マップ・レイヤー間でデータ・ビューのドリルを有効にするために使用します。ドロップダウン・リストから「オン」を選択して、ドリルを有効にします。デフォルト値は「オフ」です。
- MaintainDrill: (オプション)新しいエリアをドリルするときに、以前にドリルしたエリアのドリル状態を維持するために、オプションのtrue値を指定するために使用します。デフォルト値は「false」です。
- DrillBehavior: (オプション)ドリル対象のエリアでオプションのzoomToFit効果を指定するために使用します。デフォルト値は指定なしです。

レイヤー・ブラウザで、希望のドリル階層にある各「エリア・レイヤー」コンポーネントを選択し、次を実行します。

「追加」アイコンをクリックし、「データ・レイヤーの追加」を選択して「データ・レイヤーの作成」ダイアログを開きます。ダイアログを設定して面データ・レイヤーを追加し、このデータ・レイヤーを該当のマップ・レイヤーのデータ・コントロールにバインドします。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

注意:

面データ・レイヤーがすでに存在する場合は、「編集」アイコンをクリックしてデータ・コントロールへのバインディングを確定します。

「プロパティ」ウィンドウで、「動作」セクションを展開し、SelectionMode属性をsingleまたはmultipleに設定します。

レイヤー・ブラウザで、希望のドリル階層にある各「面データ・レイヤー」コンポーネントを選択し、次を実行します。
- 「追加」アイコンをクリックし、「エリアの追加」を選択して「エリアの構成」ダイアログを開きます。ダイアログを設定してデフォルトのスタンプを定義するか、属性グループを使用して該当のマップ・レイヤーのエリアをスタイル設定します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
  
  注意:
  
  エリアがすでに存在する場合は、「編集」アイコンをクリックしてエリアのスタイル設定を確定します。

図37-39に、売上げカテゴリのデータを表示するようにスタイル設定されたエリアを持つ米国の州と郡のマップ・レイヤーに対し、ドリルを有効化したサンプル・コードを示します。

例37-20 ドリル構成のサンプル・コード

<dvt:thematicMap id="thematicMap"
                 basemap="usa"
                 drilling="on"
                 maintainDrill="true"
                 drillBehavior="zoomToFit"
                 animationOnDisplay="none"
  <dvt:areaLayer id="al1" layer="states">
    <dvt:areaDataLayer id="adl1"
                       selectionMode="single"
                       contentDeliver="immediate"
                       value="#{row.state}"
                       var="row"
                       var="rowStatus">
      <dvt:areaLocation id="areaLocS" name="#{row.stname}">
        <dvt:area id="a1" fillColor="#{row.state}"/>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
  <dvt:areaLayer id="al2" layer="counties">
    <dvt:areaDataLayer id="adl2"
                       selectionMode="single"
                       contentDelivery="immediate"
                       value="#{row.county}"
                       var="row"
                       varStatus="rowStatus">
      <dvt:areaLocation id="areaLocC" name="#{row.coname}">
        <dvt:area id="a2" fillColor="#{row.county}"/>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
...
</dvt:thematicMap>

37.3.9 データバインドされた凡例の作成

凡例には、シンボルとラベルのペア表記による、テーマ・マップのスタイル設定されたデータに関する説明表が付いています。テーマ・マップの凡例コンポーネント(legend)では、色、形状、カスタム形状、塗りつぶしパターン、不透明度、イメージおよびサイズのシンボルをサポートしています。1つ以上の子凡例アイテム・コンポーネント(legendSection)のソースは、テーマ・マップに表示するデータをスタイル設定するためにスタンプされる、テーマ・マップのarea、marker、attributeGroupsまたはaf:imageコンポーネントです。凡例セクションの構造では、コンテンツの順序付けと外観に対する制御をサポートしています。showLegendSectionコンポーネントを使用して、凡例アイテムを公開可能なセクションにまとめることができます。図37-40に、マップのエリアおよびマーカーの公開可能なセクションを設定した凡例を示します。

図37-40 公開可能なセクションとマーカーを設定した凡例

attributeGroupsコンポーネントからの凡例アイテムにより、エリアまたはマーカーの属性タイプを異なるセクションに自動的に分割できます。セパレータ・ファセットを指定して、凡例セクション間にセパレータを描画できます。図37-41に、色、形状、塗りつぶしパターン、不透明度およびサイズに関する属性グループを使用し、各セクション間にセパレータを描画した凡例を示します。

図37-41 属性グループを使用した凡例

凡例は、Flash(デフォルト)およびPNGイメージ形式のどちらでも表示できます。どちらの形式も、右から左に表示するロケールをサポートしています。PNG形式にレンダリングすると、たとえば、テーマ・マップを印刷する場合に凡例の公開可能なセクションはサポートされず、凡例アイテムが公開として表示されます。

「データ・コントロール」パネルとテーマ・マップ・バインディング・ダイアログを使用してテーマ・マップを作成すると、凡例のデータ・バインディングが作成されます。テーマ・マップのすべてのエリアについて、1つのエリアまたはマーカーをデフォルトのスタンプとして構成した場合は、静的テキスト・リソースを凡例の固定エリアまたはマーカーに割り当てることができます。

行数が変動するデータを表示するデフォルトのスタンプに対し、EL式を使用して凡例テキストおよびマネージドBean(オプション)を割り当て、行数変動キーを取得してリソース・バンドルでテキスト・リソースを検索できます。例37-21に、エリアとマーカーのスタンプの凡例エントリを生成するコード・サンプルを示します。このコードは、行数が変動するエリアおよびテキスト・リソースが割り当てられた固定マーカーの公開可能なセクションを示しています。

例37-21 エリアおよびマーカー・スタンプの凡例のサンプル・コード

<dvt:thematicMap id="tm1" basemap="usa" ...>
  <dvt:legend label=“Legend“>
    <dvt:showLegendGroupLabel label="Voting Majority">
      <dvt:legendSection id="ls1" source="al1:adl1:areaStamp“/>
    </dvt:showLegendGroupLabel>
    <dvt:legendSection id="ls2" source="al1:adl1:fixedMarker">
  </dvt:legend>
  <dvt:areaLayer id="al1" layer="states">
    <dvt:areaDataLayer id="adl1"...>
      <dvt:areaLocation id="aloc1" ,,,>
        <dvt:area id="areaStamp">
                  fillColor="#{row.value > 50 ? tmapLegendBean,color1 :
                  tmapLegendBean.color2}"
          <f:attribute name="legendLabel" value="#{row.value > 50 ?
                          'Candidate 2' : 'Candidate 1'}" />
        <dvt:marker id=“fixedMarker“ shape=“human” fillColor=“"#FF9900"
                                     scaleX="3" scaleY="3">
          <f:attribute name="legendLabel“ 
                       value="#{Bundle.Office_Locations}"/>
        </dvt:marker>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:area>
</dvt:thematicMap>

エリアまたはマーカーを構成し、属性グループを使用してデータ・コレクション内のデータのカテゴリ・グループのスタイルを指定する場合は、EL式を使用して凡例テキストおよびマネージドBean(オプション)を割り当て、行数変動キーを取得してリソース・バンドルでテキスト・リソースを検索できます。

属性グループに一致ルールを指定した場合は、凡例テキストはgroup属性で指定されます。例外ルールを指定する場合は、アプリケーション・リソース・バンドルからのテキスト・リソースを指定できます。例37-22に、一致ルールと例外ルールの両方が組み込まれ、凡例セクション間にセパレータを指定した属性グループを使用する凡例のサンプル・コードを示します。

例37-22 属性グループを使用した凡例のサンプル・コード

<dvt:thematicMap id="tm1" basemap="usa" ...>        
  <dvt:legend id="l1" label="Legend">
    <f:facet name="separator"
      <af:separator/>
    <dvt:legendSection id="ls1" source="al1:adl1:attributeGroupColor" />
    <dvt:legendSection id="ls2" source="al1:adl1:attributeGroupShape" />
    <dvt:legendSection id="ls3" source="al1:adl1:attributeGroupPattern" />
    <dvt:legendSection id="ls4" source="al1:adl1:attributeGroupOpacity" />>
  </dvt:legend>
  <dvt:areaLayer id="al1" layer="states">
    <dvt:areaDataLayer id="adl1" value=" " var=" " ...>
      <dvt:areaLocation id="dataLoc" name="#{row.name}">
        <dvt:marker id="m1"... >
          <dvt:attributeGroups id="attributeGroupColor" type="color"
                 label="#{row.category1}" value="#{row.category1}" />
            <dvt:attributeMatchRule id="amrl" group="Mountain Dew">
              <f:attribute name="color" value="#ffff00"/>
          </dvt:attributeMatchRule>
          <dvt:attributeGroups id="attributeGroupShape" type="shape"
                 label="#{row.category2}" value="#{row.category2}" />
            <dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}"
                 label="#{viewcontroller.Texas}">
              <f:attribute name="shape" value="human"/>
            </dvt:exceptionRule>
          <dvt:attributeGroups id="attributeGroupShape" type="pattern"
                 label="#{row.category3}" ... />
          <dvt:attributeGroups id="attributeGroupShape" type="opacity"
                 label="#{row.category4}" ... />
        </dvt:marker>         
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
</dvt:thematicMap>

テーマ・マップの凡例エリアまたはマーカーを、他のマップ・レイヤーと同様の方法でカスタム・リージョンで構成します。カスタム・マップ・レイヤーの凡例のサンプル・コードを示します。

例37-23 カスタム・マップ・レイヤーの凡例のサンプル・コード

<dvt:thematicMap>  
  <dvt:legend> 
    <dvt:legendSection label=“Sales Regions” source="customAreaStamp"/>
      </dvt:legend> 
      ...
  <dvt:customAreaLayer id="crl1“>
  ...
  </dvt:customAreaLayer>
  <dvt:areaLayer layer="crl1">
    <dvt:areaDataLayer var="row”>
      <dvt:areaLocation name="#{row.name}" id="al1">
        <dvt:area id=“customAreaStamp" fillColor="#{row.color}“>
          <f:attribute name="legendLabel“ value=“#{row.name}"/>
        </dvt:area>
      </dvt:areaLocation>
    </dvt:areaDataLayer>
  </dvt:areaLayer>
</dvt:thematicMap

ADFスキンを使用して、テーマ・マップの凡例の外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。