Mapterhornによって配布されているデータについては、ホーム・ページのData Accessに以下のように記載されています。
Mapterhorn v0.0.13 distributes Terrarium-encoded terrain rgb tiles as webp images with 512 pixel width. The tiles are bundled into multiple PMTiles archives listed below. Alternatively, single tiles can be retrieved from a zxy-endpoint.
PMTilesであれば、以前に記事「国土地理院が試験公開している最適化ベクトルタイルのPMTiles版をマップの背景にする」にて、国土地理院が公開しているベクトルタイルをAPEXのマップ背景にした実績があります。今回も同様の手順にて、Mapterhornの地形データをAPEXのマップ背景にします。
今回の記事では、株式会社MIERUNEの@nokonoko_1203(のこのこ)さんによる記事を参照させていただいています。
Qiitaの記事：Mapterhornの地形データをCesiumで表示する
他には同じく株式会社MERUNEのYasunori Kirimotoさんの記事も参照しています。
コードについてはMapterhornのGitHubリポジトリのexamplesを参考にしています。PMTilesの扱いについては、以下のexample.htmlに記載されています。
それ以外のコードやスタイル・シートとなるJSONは、GPT-6 Astra(軽)にやりたいことを伝えて生成させています。
作成したAPEXアプリケーションは以下のように動作します。Mapterhornの地形データをマップ背景として、標高０メートルを青、それからマップに表示されている一番高い標高を赤として、青→水色→緑→黄→赤と連続で表示色を変えます。マップに表示されている領域が変わると一番高い標高が変わるため、マップ背景の色付けが変わります。
筑波山がマップに表示されると、茨城県の南部から千葉県の北部の利根川流域はほとんど青く表示されてしまいます。筑波山がマップから外れると利根川流域とその周辺の違いが見えるようになります。
以下より作成したAPEXアプリケーションについて紹介します。
作成したAPEXアプリケーションのマップのソースとして、都道府県の庁所在地を使用しています。以下のスクリプトを実行し、表PREF_CAPITALSの作成とデータの投入を行います。
空のAPEXアプリケーションを作成し、ホーム・ページにマップ・リージョンを配置します。
リージョンの名前はMapterhornとしています。リージョンのタイプはマップです。
今回のアプリケーションはマップ背景がテーマなので、レイヤーについては簡単に設定します。
レイヤーの識別の名前はCapital、レイヤー・タイプはポイントとします。ソースのSQL問い合せとして、以下のSELECT文を記述します。
select capital_city, lat, lon from pref_capitals
列のマッピングのジオメトリ列のデータ型に緯度/経度を選択し、経度列にLON、緯度列にLATを選択します。
Oracle APEX 26.1に含まれているMapLibre GL JSのバージョンは5.6.1です。このバージョンで利用可能なPMTilesのライブラリとして、以下をロードします。ページ・プロパティのJavaScriptのファイルURLに記述します。
https://cdn.jsdelivr.net/npm/pmtiles@4.5.0/dist/pmtiles.min.js
スタイルを定義するJSONを静的アプリケーション・ファイルとして作成します。
静的アプリケーション・ファイルとしてstd.jsonを作成し、以下を記述します。
作成した静的アプリケーション・ファイルstd.jsonを参照するマップ背景を作成します。
マップ背景としてMapterhornを作成します。タイプにベクター・タイル・レイヤーを選択します。
スタイル・シートのであるstd.jsonは静的アプリケーション・ファイルとして作成しているため、スタイルシートをマップするURLとして#APP_FILES#std.jsonと設定できれば良かったのですが、この位置では置換文字列APP_FILESは使えないようです。（それかスタイル・シートを直接記述できればよかった。）
そのため、ページ上に表示されているアイコンの画像アドレスを取得し、そのアドレスを元に置換文字列APP_FILESの値を見つけます。その上でスタイルシートをマップするURLとしてstd.jsonをフルパスで記述します。
置換文字列APP_FILESの値はアプリケーションごとに異なるため、アプリケーションをインポートしたら必ずスタイルシートをマップするURLを更新する必要があります。
マップの属性を開きマップの背景に共有コンポーネント、標準にMapterhornを選択します。
以上でMapterhornの地形データがマップ背景として設定されました。この時点でのアプリケーションの表示は以下になります。
スタイル・シートstd.jsonに標高300m以上は赤で表示としているため、日本のほとんどは赤く表示されています。
マップに表示されている最高地点を赤にするように、マップの表示後にスタイルのプロパティを更新します。
マップの初期化時に実行される動的アクションを作成します。タイミングのイベントはマップが初期化されました、選択タイプはリージョン、リージョンとしてマップ・リージョンであるMapterhornを選択します。
アクションはJavaScriptコードの実行とし、以下のコードを記述します。
この状態でマップを表示すると以下になります。
この状態で利根川流域を表示しています。筑波山を含みます。
以上でアプリケーションの作成は完了です。
今回作成したAPEXアプリケーションのAPEXlang形式のエクスポートを以下に置きました。
https://github.com/ujnak/APEXlang-exports/tree/main/mapterhorn-pmtiles
今回の記事は以上になります。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
