Oracle APEXのマップ・コンポーネントはMapLibre GL JSを組み込んでいます。
MapLibreに限りませんが、こういったライブラリのサンプルを、とりあえずAPEXのアプリに組み込む方法を紹介します。
MapLibreの3D Terrainのサンプルは以下のページで紹介されています。
https://maplibre.org/maplibre-gl-js-docs/example/3d-terrain/
一部を除きmetaタグの設定はできず、またviewportはAPEXのユニバーサル・テーマが設定するものなので、こちらはAPEXアプリには設定しません。
script要素でJavaScriptのライブラリが指定されています。また、link要素としてCSSのスタイルシートが指定されています。
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
scriptで指定されているJavaScriptファイルは、ページ・プロパティのJavaScriptのファイルURLに指定します。スタイルシートはCSSのファイルURLに指定します。
ページにマップ・リージョンが含まれないと、APEXはMapLibreのライブラリをロードしません。また、MapLibreの3D Terrainの例で使用されているライブラリのバージョンが、APEXで使用されているものより新しいため、ファイルURLにJavaScriptとCSSのファイルを指定しています。
静的コンテンツのリージョンを作成し、ソースのHTMLコードとして<div id="map"></div>を書き込みます。このDIV要素が、MapLibreのライブラリによって描かれる地図のコンテナになります。（3D Terrainのサンプルのソースに<div id="map"></div>が記述されています。）
作成したAPEXのリージョンのテンプレートやテンプレート・オプションを設定します。テンプレートの選択やテンプレート・オプションの設定によっては、地図が適切に表示されません。
scriptとして記述されているJavaScriptのコードをJavaScriptのページ・ロード時に実行に転記します。
3D Terrainのサンプルには、idがmapの要素に対して、CSSの指定が含まれています。
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
これは、ページ・プロパティのCSSのインラインに転記します。
以上の作業の結果が、本記事の先頭の画面になります。
まずはサンプルをAPEXで動かさないことには、それを使った実装を確認していくのも難しいでしょう。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/maplibre-3d-terrain.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
