ポーランドのPretius社のLech Cieślikさんが、マップ・リージョンに図を書く方法を紹介されています。
Drawing objects on maps in Oracle APEX - MapLibre vs OpenLayers記事に従ってアプリケーションを作ってみました。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。
名前はDrawing on Mapとしました。アプリケーションの作成を実行します。
とりあえず地図が表示されればよいので、最小限の設定で地図のリージョンを作成します。
新規にリージョンを作成します。
識別のタイトルはMap、タイプにマップを選択します。ソースの位置はローカル・データベース、タイプはSQL問合せとします。以下のSQLを記述します。皇居の緯度経度です。
select 35.6769883 lat, 139.7588499 lon from dual
実行するTRUEアクションとしてJavaScriptコードの実行を選択し、コードとして以下を記述します。APEXアクションとして定義したdraw-initを呼び出します。
レイヤーの識別の名前はSample、レイヤー・タイプはポイントとします。
ソースの位置はリージョン・ソース、列のマッピングのジオメトリ列のデータ型として経度/緯度を選択し、緯度列にLON、経度列にLATを指定します。
マップ・リージョンは以上で作成できました。
ページ・プロパティの設定を行います。
JavaScriptのファイルURLとして、Mapbox GL Drawが実装されているファイルを指定します。
https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.js
Pretiusさんの元記事はv1.2.0をロードしていますが、Mapboxのサイトの例ではv1.4.0をロードしていたので、v1.4.0を指定するようにしています。
CSSのファイルURLとして以下を指定します。
https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.css
Mapbox GL Drawを初期化する処理は、APEXアクションとして実装します。
JavaScriptのファンクションおよびグローバル変数の宣言に以下を記述します。draw.createにだけコールバックを定義しています。この他にdraw.update、draw.deleteにコールバックを定義できます。
作成された図形の座標を出力するページ・アイテムを作成します。
ページ・アイテムの識別の名前はP1_COORDINATE、タイプはテキスト領域とします。ラベルはCoordinateとします。
Mapbox GL Drawを初期化する処理を、動的アクションより呼び出します。
マップ・リージョンに動的アクションを作成します。
識別の名前はInit Mapbox GL Drawとします。タイミングのイベントとして、マップが初期化されました[マップ]を選択します。選択タイプはリージョン、リージョンとしてMapを選択します。
apex.actions.invoke("draw-init", null, this.triggeringElement);
以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。
元記事はOpenLayersを使った方法も紹介しています。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/drawing-on-map.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
