Amazon Location Service のマップスタイル選択のポイント

Amazon Location Service は、複数のユースケースに対応できるように、9 つの異なるマップスタイルを提供しています。どのようにして、アプリケーションに適したベースマップのスタイルを選択するのでしょうか？また、選択したベースマップは、アプリケーションの他の部分にどのような影響を与えるのでしょうか？この記事では、Amazon Location マップで利用可能なさまざまなマップスタイルと、アプリケーションに最適なマップスタイルを決定する方法について説明します。

Amazon Location マップの表示

Amazon Location は、MapLibre GL JS、Tangram、AWS Amplify JS など、人気のあるオープンソースのマップレンダリングライブラリをサポートしています。ベースマップのタイルを表示する複数の方法を提供することで、既存のベースマッププロバイダやソースから簡単に移行することができます。開発者向けガイドには、掲載されているライブラリの簡単な使い始めのガイドが掲載されており、数分で使い始めることができます。
Amazon Location は、データプロバイダからベクターとラスターの両方のタイルを提供しています。ベクタータイルを使用すると、アプリケーションに合わせてマップのスタイルをさらに変更することができます。GitHub のサンプルリポジトリに、ベースマップのデザイン以外のマップスタイルの編集を始めるのに役立つリソースを用意しています。

サンプルアプリケーションのインストール

Amazon Location マップを表示するための様々な方法について説明しましたが、次にサンプルアプリケーションを見てみましょう。今回は、AWS Cloud9 インスタンスを使用して、インストールコマンドを実行することにします。

前提条件

次の前提条件を満たしていることを確認してから、次に進んでください。

AWS アカウント
AWS Identity and Access Management (IAM) ユーザーまたは、AWS Amplify, Amazon Location Service, AWS Lambda, および AWS Cognito にアクセスする権限がある Amazon Elastic Compute Cloud (Amazon EC2)インスタンスプロファイル
node v 16.x
npm 8.x
AWS Amplify CLI

アプリケーションの設定

まず、サンプルアプリケーションを含む GitHub の amazon-location-samples リポジトリをクローンする必要があります。このリポジトリには、Amazon Location を使い始める際に役に立つ様々なサンプルアプリケーションが含まれています。

git clone https://github.com/aws-samples/amazon-location-samples

今回使用するサンプルアプリケーションのディレクトリに移動します。

cd amazon-location-samples/maplibre-gl-js-vue-amplify-compare-maps

依存関係をインストールします。

npm install

インストールが完了したら、Amplify のプロジェクトの作成を行います。

amplify init

Amplify のプロジェクトを作成する際の選択肢は以下のように選択します。

Enter a name for the project (dev):`dev`
Choose your default editor: `Visual Studio Code`
Select the authentication method you want to use:

認証方法については、Amplify CLI のインストールを参照してください。Amplify の環境を初期化したら、クラウドリソースを作成します。すべてのリソースを完全にデプロイするために数分かかる場合があります。

amplify push

続けるかどうか尋ねられたら、”Y “を選択してください。

Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name         │ Operation │ Provider plugin   │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Auth     │ maplibreglvue0e55c8d4 │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ placeindex            │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esristreet            │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esrinavigation        │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esridarkgray          │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esrilightgray         │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esriimagery           │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ hereexplore           │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ heretruck             │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esrilight             │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ hereberlin            │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting        │ Create    │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘

? Are you sure you want to continue? (Y/n)

デプロイが完了するのを待ちます。AWS クラウドにリソースが作成されたら、アプリをローカルでホスティングするか、フロントエンドを AWS Amplify に公開するか、どちらかを選択します。ローカルでホスティングする場合は、以下のコマンドを実行します。

npm run start

以下は、AWS Cloud9 のローカルでサンプルアプリケーションを起動した例です。

AWS Cloud9 のローカルでサンプルアプリケーションを起動した例

Amplify Hosting を利用する場合は、publish コマンドを実行します。Amplify Hosting については、Amplify Hosting Overview を参照してください。

amplify publish

プロンプトが表示されたら、“Y” を選択します。

Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name         │ Operation │ Provider plugin   │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Auth     │ maplibreglvue0e55c8d4 │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ placeindex            │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esristreet            │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esrinavigation        │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esridarkgray          │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esrilightgray         │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esriimagery           │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ hereexplore           │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ heretruck             │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ esrilight             │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Geo      │ hereberlin            │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting        │ No Change │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘

No changes detected
? Do you still want to publish the frontend? (Y/n)

デプロイが完了すると、現在 Amplify で動作しているアプリケーションにアクセスするための URL が提供されます。

Amplify のデプロイ完了

表示された URL を Web ブラウザで開いてください。。マップスタイルを比較するためのアプリケーションの準備が整いました。この URL は、組織内で共有して利用できます。

アプリケーションを使う

Amplify でアプリケーションが動作するようになったので、マップスタイルをいくつかロードしてみます。このアプリケーションでは、マップのピッチを変えることで 3D スタイルを利用したり、比較したい地点を探すための検索バーを利用したりすることができます。次に、いくつかの例を挙げて、なぜこのスタイルが選ばれるのかを見てみましょう。

ライトマップとダークマップ

VectorEsriDarkGreyCanvas と VectorEsriLightGreyCanvas という 2 つの Esri スタイルを使用したこの例では、両方のマップを使用し、アプリケーション内でダークモードとライトモードの切り替えを行うことが望ましい場合があることが分かります。マップに表示される情報は同じですが、色は異なります。GitHub の amazon-location-samples リポジトリに、マップスタイルを切り替えるサンプルアプリケーションがあります。

Esri Light and Esri Dark の比較

マップの正確さ

もう一つのユースケースは、どちらのマップがより新しいかということです。Amazon Location は2 つのデータプロバイダを使用しているため、機能によって微妙な違いがある場合があります。この例では、Esri Navigation のスタイルと Here Explore のスタイルを比較しています。表示されている高速道路のインターチェンジは 2022 年 6 月に完成しており、Here では更新された構成が表示されていますが、Esri ではまだ更新されていません。非常に正確なデータを必要とするアプリケーションでは、あるプロバイダまたはスタイルが特定の領域でより最新で正確な表現を提供することがわかるかもしれません。

Esri Navigation と Here Explore の比較

地勢の情報

マップスタイルによって、地勢の情報が異なります。Amazon Location が提供する Esri Vector Topographic は、特にこのようなユースケースに適しています。次の例では、イエローストーン国立公園を Esri Vector Topographic マップで見ると、山の名前と標高を見ることができます。Esri Navigation マップには、このような情報は含まれていません。アウトドアレクリエーションを中心としたアプリケーションでは、Esri Vector Topographic マップの方が適している場合があります。

Esri Streets と Esri Topographic の比較

公共交通機関

公共交通機関やその他のナビゲーションの補助に焦点を当てたユースケースでは、より適したスタイルがあるかもしれませんこの例では、東京駅周辺を対象に、Esri Navigation スタイルと Here Explore スタイルを比較しています。この場合、Here Explore の方が、路線や駅など公共交通機関の情報が充実しています。

Esri Navigation と Here Explore の比較

トラック輸送と危険物

大型車両を運転する場合、橋の高さや走行制限は非常に重要です。このようなユースケースに対応するアプリケーションを構築する場合、Here Explore Truck マップは最適です。橋の高さや危険物規制道路を表示する Here Explore Truck マップは、大型車の安全な移動に必要な情報を提供します。

Here Explore と Here Explore Truck の比較

衛星写真とストリートマップの比較

最後のユースケースは、ストリートマップと比較した衛星（または航空）ビューです。Esri Raster Imagery タイルを使用すると、航空写真を見ることができます。これは、何かがどこにあるのかを明確にする必要がある精密な位置特定アプリケーションで役立ちます。例えば、駐車場にあるレンタルスクーターの位置は、道路マップでは視認できませんが、航空写真では一目瞭然です。

Here Explore と Esri Raster の比較

後片付け

アプリケーションを削除するには、アプリケーションディレクトリに移動してください。

cd amazon-location-samples/maplibre-gl-js-vue-amplify-compare-maps

そして、以下を実行します。

amplify delete

プロンプトが表示されたら “y” を選択します。

? Are you sure you want to continue? This CANNOT be undone. (This will delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI) (y/N)

まとめと次のステップ

この記事では、オープンソースのマップレンダリングライブラリを使用して、AWS Amplify で Amazon Location マップのスタイルを並べて比較する方法について説明しました。このツールを使用すると、ユースケースに最適なマップを決定し、異なるスタイルで特定のポイントを見ることができます。このサンプルアプリケーションはオープンソースであるため、コードを変更し、マーカーやポリゴン、その他の機能を追加して、異なるマップスタイルでアプリケーションがどのように見えるかをより正確に比較することができます。

この記事は、Considerations when choosing Amazon Location Services Map Styles を翻訳したものです。

Amazon Web Services ブログ