日日是Oracle APEX: Stamen Map TilesをOracle APEXのマップ・リージョンの背景マップにする

米国San FranciscoのStamen Design社が開発したStamen Map Tilesを、Oracle APEXのマップ・リージョンの背景マップにしてみます。Stamen Map Tilesは現在Stadia Maps社のプラットフォームより配布されているため、Stamen Map Tilesを背景マップとして使用するには、Stadia Maps社にユーザー登録する必要があります。非商用用途に限定したFreeプランが提供されています。

Stadia Maps社から配布されているStamen Map Tilesを使用するにあたって、以下のサイトに記載されているFAQを参照します。

Stamen Design × Stadia Maps

https://stadiamaps.com/stamen/

設定については以下のページで説明されています。

Migration Guide for Stamen Map Tile Users
https://docs.stadiamaps.com/guides/migrating-from-stamen-map-tiles/

作成したAPEXアプリケーションのマップは、以下のように表示されます。マップ上に表示しているのは東京都オープンデータカタログサイトにあるTOKYO WALKING MAPより、水元・柴又エリア～寅さんの柴又帝釈天と水元公園へのみち～としてダウンロードできるKMLファイルを、データベースにロードして表示しています。

macOS上のpodmanで実行しているOracle APEXの環境で作業します。構築手順については、こちらの記事「podmanを使ってOracle Database FreeとOracle REST Data Servicesをコンテナとして実行する」で紹介しています。

以下より、APEXアプリケーションの作成手順を紹介します。

水元・柴又エリア～寅さんの柴又帝釈天と水元公園へのみち～を開き、ZIPファイルをダウンロードします。

ファイルは以下の名前でダウンロードされます。

131229_Mizumoto_and_Shibamata_Area_-_Tora-sans_Road_to_Shibamata_Taishakuten_and_Mizumoto_Park.zip

これはKMLファイルをZIP圧縮したファイルなので、KMZファイルとして扱うことができます。ファイル名をwalking.kmzに変更します。

以降の作業では、上記のファイルをwalking.kmzとして扱います。

GDALを使用してwalking.kmzをOracle Databaseにロードします。GDALを組み込んだコンテナの作成手順については、こちらの記事「GDALのogr2ogrを使ってShapefileをOracle DatabaseのSDO_GEOMETRY列にロードする」を参照してください。今回の作業を行なうにあたって、LIBKMLのドライバの組み込むようにDockerfileを更新しています。

GDALを組み込んだコンテナを実行します。

podman run --rm -it -v $PWD:/home/oracle gdal

% podman run --rm -it -v $PWD:/home/oracle gdal

bash-5.1$

Oracle Databaseのドライバが参照されるように、環境変数を設定します。

export LANG=ja_JP.utf8
export NLS_LANG=American_America.AL32UTF8
export PATH=/usr/local/bin:$PATH
export ORACLE_HOME=/usr/lib/oracle/23/client64
export LD_LIBRARY_PATH=${ORACLE_HOME}/lib:/usr/local/lib64:${LD_LIBRARY_PATH}

bash-5.1$ export LANG=ja_JP.utf8

export NLS_LANG=American_America.AL32UTF8

export PATH=/usr/local/bin:$PATH

export ORACLE_HOME=/usr/lib/oracle/23/client64

export LD_LIBRARY_PATH=${ORACLE_HOME}/lib:/usr/local/lib64:${LD_LIBRARY_PATH}

bash-5.1$

以下のogrinfoコマンドを実行し、KMZファイルに含まれるフォルダを一覧します。

ogrinfo -ro walking.kmz

今回、データベースにロードするのは無題のレイヤです。

bash-5.1$ ogrinfo -ro walking.kmz

INFO: Open of `walking.kmz'

using driver `LIBKML' successful.

1: 無題のレイヤ

2: 都立公園／Tokyo Metropolitan Parks and Gardens

3: 海上公園／Marine Parks

bash-5.1$

以下のogr2ogrコマンドを実行し、KMZファイルに含まれる散歩ルートをデータベースにロードします。

ogr2ogr -f OCI \
"OCI:wksp_apexdev/<パスワード>@host.containers.internal/freepdb1" \
./walking.kmz "無題のレイヤ" \
-nln TOKYO_WALKING_ROUTES \
-lco GEOMETRY_NAME=GEOM -lco SRID=4326 -nlt PROMOTE_TO_MULTI

bash-5.1$ ogr2ogr -f OCI \

"OCI:wksp_apexdev/********@host.containers.internal/freepdb1" \

./walking.kmz "無題のレイヤ" \

-nln TOKYO_WALKING_ROUTES \

-lco GEOMETRY_NAME=GEOM -lco SRID=4326 -nlt PROMOTE_TO_MULTI

bash-5.1$

エラーが発生しなければ、KMZ（KML）フォーマットで記載された散歩ルートはデータベースにロードされています。

APEXアプリケーションを作成し、マップ・リージョンで散歩ルートを表示します。

最初にSQLコマンドより、表TOKYO_WALKING_ROUTESにロードされたデータを確認します。以下のSELECT文を実行します。

select * from tokyo_walking_routes

データを確認すると、以下の３つの特殊な"Name"のデータが見つかります。これ以外は、観光地です。また、コース／Routeはポイントではなく行（LineString）です。

スタート／Start,ゴール／Goal,コース／Route

これらは、レイヤを分けて表示することにします。

APEXアプリケーションを作成します。

アプリケーション作成ウィザードを開き、デフォルトで作成されているホーム・ページを削除して、代わりにマップのページを追加します。

アプリケーションの名前はTOKYO WALKING MAPとします。

マップのページ名は散歩、表にはogr2ogrコマンドで作成したTOKYO_WALKING_ROUTESを選択します。ポイントを選択し、ジオメトリ列にGEOM、ツールチップ列にNameを指定します。

以上でアプリケーションを作成します。

ページ・デザイナで作成されたアプリケーションのホーム・ページを開きます。

作成済みのレイヤ散歩から、列Nameの値がスタート／Start、ゴール／Goal、コース／Routeのデータを除きます。これらは別のレイヤとして表示します。

ソースのWHERE句に以下を記述します。

"Name" not in ('スタート／Start','ゴール／Goal','コース／Route')

情報ウィンドウのタイトル列にName、本体列にdescriptionを設定します。

レイヤ散歩を重複させ、スタート位置を表示するレイヤに変更します。

名前をスタート、ソースのWHERE句に以下を設定します。

"Name" = 'スタート／Start'

外観の塗りつぶしの色を赤（#ff0000）にします。

ゴールを表示するレイヤを作成します。

名前をゴール、ソースのWHERE句に以下を設定します。

"Name" = 'ゴール／Goal'

外観の塗りつぶしの色を緑（#008000）にします。

コースを表示するレイヤを作成します。

名前をコース、レイヤー・タイプは行にします。ソースのWHERE句に以下を設定します。

"Name" = 'コース／Route'

外観のストローク・スタイルに点線を選択し、ストロークの色を黒（#101010）にします。

以上で、水元・柴又エリアの散歩コースがマップ上に表示されるようになりました。

次にマップ背景を変更します。

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

作成を開始します。

Standia Mapsにユーザー登録をして、APIキーを生成済みとします。

名前はStamen Terrainとし、タイプにラスターXYZタイル・レイヤーを選択します。APIキーにStandia Mapsで取得したAPIキーを設定し、ラスター・タイル(XYZ) URLとして以下を記述します。

https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}.png?api_key={api_key}

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

マップ背景が作成されます。属性に以下のコピーライト情報を記述します。

&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> <a href="https://stamen.com/" target="_blank">&copy; Stamen Design</a>
&copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a>
&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>

以上で変更の適用をクリックします。