2021年7月16日金曜日

マップのサンプル解説 (1) - 準備

 Oracle APEX 21.1よりサンプル・アプリケーションがGitHubより提供されています。マップ・リージョンについてもサンプル・アプリケーションが提供されているので、そこで使用されているテクニックを確認してみます。

マップのサンプルにはいくつかの実装例が含まれています。その中の5種類の実装について紹介します。Faceted Searchはほぼ標準機能なので今回の作業からは外しました。

  1. 準備 - この記事です。
  2. クリックした医療機関をマップの中心にする - サンプルのClickable Map
  3. レポートで選択した医療機関をマップに表示する - サンプルのSearch and Show
  4. 円形ツールを使う - サンプルのCircle Search
  5. マップに表示されている医療機関をレポートする - サンプルのMap and Report
  6. 近隣の医療機関をレポートする - サンプルのNearest Neighbor Search

最近作成した全国医療機関の医療体制の状況をマップに表示するアプリケーションに機能を追加することにより、実装の手順を示します。作業の元になるアプリケーションのエクスポートは以下になります。

https://github.com/ujnak/apexapps/blob/master/exports/c19-medical-facilities.sql

データとして東京23区のデータをロードしました。他の地域のデータをロードしても作業に違いは発生しないはずなので、お住まいの地域を選んでもよいかと思います。

上記のすべての作業を行なったアプリケーションのエクスポートは以下に置いています。

https://github.com/ujnak/apexapps/blob/master/exports/c19-medical-map-sample.sql

元になるページの準備をする


最初にそれぞれの機能を実装するページの元とするページを作成します。すでに作成済みのページはレイヤーが複数あったり、機能のカスタマイズを行うには足りない設定があるため、その部分を変更します。

最初にマップ・リージョンを含むページ、ページ番号4の医療機関のページをコピーします。

ページ・デザイナより作成メニューのコピーとしてのページを実行します。


次のコピーとしてのページを作成として、このアプリケーションのページを選択します。へ進みます。


コピー元ページとしてマップ・リージョンを含むページである4.医療機関を選択します。新規ページ名サンプルの基本とします。へ進みます。


これから作成するページを元にいろいろなテクニックを実装していきます。それぞれのテクニックを実装する際には、今からコピーして作成するページをさらにコピーします。そのため、このページをナビゲーション・メニューより呼び出すことはありません。ナビゲーションのプリファレンスは、このページとナビゲーション・メニュー・エントリを関連付けないを選択します。へ進みます。


ラベルの文字列や静的IDを変更する画面が開きます。ここでは何も変更せず、コピーを実行します。


新規にマップ・リージョンを含んだページが作成されます。最初にファセット検索のリージョンである検索を削除します。


ファセット検索のリージョンを削除したので、ページ・プロパティページ・テンプレートはLeft Side Columnである必要がありません。Standardへ変更します。


レイヤーを1つにします。マップ・リージョンのソースSQL問合せを以下に変更します。マップ上に表示される医療機関を特定するため、f.facility_idを検索列に追加し、行割当てのために使用していた列ANS_TYPEを削除します。

select f.facility_id, f.zip_code, f.facility_name, f.facility_addr, f.geometry
, m.ans_type ans_type_m, e.ans_type ans_type_e, h.ans_type ans_type_h
from c19_medical_facilities f
left outer join (
select ans_type, facility_type, facility_id
from c19_medical_facility_statuses
where facility_type = 'M') m
on f.facility_id = m.facility_id
left outer join (
select ans_type, facility_type, facility_id
from c19_medical_facility_statuses
where facility_type = 'E') e
on f.facility_id = e.facility_id
left outer join (
select ans_type, facility_type, facility_id
from c19_medical_facility_statuses
where facility_type = 'H') h
on f.facility_id = h.facility_id


レイヤー通常を選択し、識別名前医療機関へ変更します。また、制限、停止、設置なし、未回答のレイヤーを削除します。


1つになったレイヤー医療機関を選択し、列のマッピング主キー列としてFACILITY_IDを選択します。

レイヤーが1つだけでジオメトリ列に空間索引が作成されていると、ソース空間索引の使用ONにすることができます。これをONにできると、マップ・リージョンに表示される領域に検索結果が限定されるため、パフォーマンスが向上するとのことです。指定が可能であれば検討する価値があるでしょう。


情報ウィンドウ拡張フォーマットONに変更し、ツールチップのHTML式情報ウィンドウのHTML式コピー&ペーストします。


ツールチップ拡張フォーマットOFFにし、としてFACILITY_NAMEを選択します。


マップ・リージョンを選択し、静的IDとしてmedical-facilities-regionを設定します。


Attributesを開き、コントロールオプションからブラウザの位置の取得チェックを外します。


以上で準備は完了です。作成したページを実行してみます。ナビゲーション・メニュー・エントリは作成していないため、左のナビゲーション・メニューからは呼び出すことはできません。


このページを元にして、マップのサンプル・アプリケーションで利用されているテクニックを実装していきます。