- ラスタタイルの表示（国土地理院タイルを使用します）
- マーカーの表示/非表示、およびポップアップの表示/非表示
- サークルの表示/非表示、およびポップアップの表示/非表示
- ポリゴンの表示/非表示、およびポップアップの表示/非表示
- スタンドアロンのポップアップ表示/非表示
- マップ上のクリックによるポップアップの表示
上記を実装したAPEXアプリケーションは、以下のように動作します。渋谷のスクランブル交差点を中心に地図を表示し、マーカー、サークルおよびポリゴン（道玄坂）などを表示しています。
Leaflet Quick Start Guideに沿って、APEXアプリケーションの組み込みを実施します。
空のアプリケーションを作成します。名前はLeafletとします。
APEXアプリケーションが作成されます。今回はデフォルトで作成されるホーム・ページに、すべての機能を実装します。
ページ・デザイナでホーム・ページを開きます。
ホーム・ページに、Quick Start GuideのPreparing your pageに記載されている設定を加えます。
Oracle APEXには、ページにロードするJavaScriptファイルを指定するプロパティとして、JavaScriptのファイルURL、CSSファイルを指定するプロパティとして、CSSのファイルURLがあります。
LeafletのQuick Start Guideでは、ロードするCSSファイルおよびJavaScriptファイルに属性integrityやcrossoriginの指定が含まれています。これらは、APEXのプロパティでは設定できません。また、必ずCSSファイルをJavaScriptファイルの前にロードするように指示されています。こちらについては、ページ・プロパティのCSSのファイルURL（link要素）は、必ずJavaScriptのファイルURL（script要素）よりも先にHTMLとして出力されます。
integrityとcrossoriginの設定を残すために、ページ・プロパティのHTMLヘッダーに、Quick Start Guideに記載されている内容をそのまま転記します。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>CSSのインラインでマップの高さを指定します。Quick Start Guideでは180pxとなっていますが、それよりも高い640pxを設定します。
#map { height: 640px; }
Leafletを初期化するdiv要素を含むリージョンを作成します。
識別の名前はMap、タイプは静的コンテンツ、ソースのHTMLコードに以下を記述します。
<div id="map"></div>
以上で、Preparing your pageに記載されている内容をホーム・ページに設定できました。
Leafletの初期化から、マーカーの表示/非表示、サークルの表示/非表示など、JavaScriptによる実装はすべて、静的アプリケーション・ファイルに記述します。以下のファイルを、静的アプリケーション・ファイルとして保存します。名前はapp.jsとします。
LeafletのQuick Start Guideでは、マーカー、サークルおよびポリゴンを表示するコードは紹介されていますが、それを非表示にするコードはありません。上記のapp.jsには、非表示にするコードも追加しています。
マーカーなどの表示/非表示はAPEXアクションとして定義し、ページ上のボタンとカスタム属性data-actionによって紐付けています。
ページ・ロード時に静的アプケーション・ファイルapp.jsがロードされるように、ページ・プロパティのJavaScriptのファイルURLに以下を設定します。
#APP_FILES#app#MIN#.js
静的アプリケーション・ファイルに記述したAPEXアクションを呼び出すボタンを、ページ上に作成します。
ボタンを一列で配置するために、静的コンテンツのリージョンを作成します。外観のテンプレートにButtons Containerを選択します。
ボタンの詳細のカスタム属性に記述するdata-actionで、APEXアクションに紐付けます。
data-action="TOGGLE_MARKER"
ボタンのクリックでページの送信などが動作しないように、動作のアクションに動的アクションで定義を設定します。
識別のラベルは、data-actionで紐づけられたAPEXアクションのlabel属性の値に置き換わります。そのため、ページでの設定値は画面に表示されません。
同様にTOGGLE_CIRCLE、TOGGLE_POLYGON、TOGGLE_MARKER_POPUP、TOGGLE_CIRCLE_POPUP、TOGGLE_POLYGON_POPUP、TOGGLE_STANALONE_POPUPのボタンを作成します。
これらのボタンは、TOGGLE_MARKERと横一列に並べるため、レイアウトの新規行の開始はオフにします。それ以外はdata-actionに、それぞれに紐づけるAPEXアクション名を設定します。
以上でAPEXアプリケーションは完成です。アプリケーションを実行すると、記事の先頭にあるGIF動画のように動作します。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/leaflet-quick-start-on-apex.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
