2023年10月24日火曜日

APEX 23.2のマップ背景としてMapTiler CLOUDのJP MIERUNE Streetsを使用する

 Oracle APEX 23.2のマップ・リージョンの新機能として、マップ背景を選べるようになりました。


MapTiler CLOUDのアカウントを取得して、JP MIERUNE Streetsをマップ背景として設定してみます。


Mapsを開き、JapanのJP MIERUNE Streetsを開きます。


Use vector styleのリンクをコピーします。



あらかじめOracle APEX 23.2で空のアプリケーションを作成しておきます。

共有コンポーネントマップ背景を開きます。


作成済みのマップ背景が一覧されます。

作成をクリックします。


マップ背景名前JP MIERUNE Streetsとします。タイプベクター・タイル・レイヤーを選択します。

MapTilerの画面でコピーしたURLにはAPIキーが含まれています。URLにkey=で指定されているAPIキーAPIキーに設定し、スタイルシートをマップするURLにはAPIキーの部分を{api-key}に置き換えたURLを設定します。

JP MIERUNE Streetsであれば、URLは以下になります。

https://api.maptiler.com/maps/jp-mierune-streets/style.json?key={api-key}

マップ背景の作成をクリックします。


マップ・リージョンを作成し、マップ背景を変えて表示を確認してみます。

空白のページを作成した後、新規にリージョンを作成します。

識別タイトル地図として、タイプマップを選択します。外観テンプレートとしてBlank with Attributesを選び、余計な装飾を除きます。


レイヤー新規を選択し、識別名前ポイントに変更します。レイヤー・タイプとしてポイントを選びます。

ソースタイプSQL問合せを選択し、SQL問合せとして以下のSQLを記述します。東京都の緯度経度を返しています。

select 35.652832 as lat, 139.839478 as lon from dual;

列のマッピングジオメトリ列のデータ型として経度/緯度を選択し、経度列LON緯度列としてLATを選びます。

最低限の設定ですが、ページを開くと東京の地図が表示されるようになりました。


マップ・リージョン地図を選択し、プロパティ・エディタの属性タブを開きます。

マップ背景共有コンポーネントを選び、標準として先ほど作成したマップ背景JP MIERUNE Streetsを選択します。


以上でページを実行すると、地図の背景としてJP MIERUNE Streetsが表示されていることが確認できます。


MapsのSatelliteやJP MIERUNE Dark、JP MIERUNE Grayも同様の手順でマップ背景として表示できます。

今までよりも、きれいな日本地図が表示されるようになり、マップ・リージョンの使い勝手も高くなったように感じます。

今回の記事は以上になります。

MapTilerのFree Planの上限や価格については、MapTierのページを参照してください。


Oracle APEXのアプリケーション作成の参考になれば幸いです。