Amazon Location での MapLibre ツールとライブラリの使用

Amazon Location でインタラクティブアプリケーションを作成するための重要なツールの 1 つは です MapLibre。MapLibre は主に、ウェブまたはモバイルアプリケーションでマップを表示するためのレンダリングエンジンです。ただし、プラグインのサポートも含まれており、Amazon Location の他の機能を操作する機能も備えています。以下では、作業したい領域に基づいて、使用できるツールについて説明します。

注記

Amazon Location のいずれかの機能を使用する場合には、使用する言語のAWS SDK をインストールします。

• マップ

  アプリケーションにマップを表示するには、Amazon Location から提供されたデータを使用して画面に描画するマップレンダリングエンジンが必要です。マップレンダリングエンジンには、マップを画面移動したりズームしたり、マーカーやプッシュピン、その他の注釈をマップに追加したりする機能もあります。

  Amazon Location Service では、レンダリングエンジンを使用してマップをMapLibreレンダリングすることを推奨しています。 MapLibre GL JS は でマップを表示するためのエンジンであり JavaScript、 MapLibre Native は iOS または Android のマップを提供します。

  MapLibre には、コア機能を拡張するプラグインエコシステムもあります。詳細については、https://maplibre.org/maplibre-gl-js-docs/plugins/ を参照してください。

• 場所検索

  検索ユーザーインターフェイスの作成を簡素化するには、ウェブ用のMapLibre ジオコーダーを使用できます (Android アプリケーションは Android Places プラグイン を使用できます）。

  Amazon Location for Maplibre ジオコーダーライブラリを使用して、 アプリケーションで で Amazon Location を使用するプロセスを簡素化amazon-location-for-maplibre-gl-geocoderします JavaScript。

• ルート

  マップにルートを表示するには、MapLibre方向 を使用します。

• ジオフェンスとトラッカー

  MapLibre にはジオフェンスと追跡用の特定のレンダリングやツールはありませんが、レンダリング機能とプラグインを使用して、ジオフェンスと追跡対象デバイスをマップに表示できます。

  追跡対象のデバイスは MQTT を使用するか、手動で Amazon Location Service へアップデートを送信できます。ジオフェンスイベントに応答するには、AWS Lambda を使用できます。

Amazon Location Service に追加機能を提供するオープンソースライブラリが多数用意されています。たとえば、空間分析機能を提供する Turf などです。

多くのライブラリは、オープンスタンダードの GeoJSON 形式のデータを使用しています。Amazon Location Service は、アプリケーションでの GeoJSON JavaScript の使用をサポートするライブラリを提供します。詳細については、次のセクション「Amazon Location SDK とライブラリ」を参照してください。

Amazon Location MapLibre Geocoder プラグイン

Amazon Location MapLibre ジオコーダープラグインは、 maplibre-gl-geocoderライブラリを使用してマップレンダリングとジオコーディングを操作するときに、Amazon Location 機能を JavaScript アプリケーションに簡単に組み込みできるように設計されています。

インストール

次のコマンドを使用して、モジュールで使用する Amazon Location MapLibre ジオコーダープラグインを NPM からインストールできます。

npm install @aws/amazon-location-for-maplibre-gl-geocoder

スクリプトを使用して、ブラウザで直接使用できるように HTML ファイルにインポートできます。

<script src="https://www.unpkg.com/@aws/amazon-location-for-maplibre-gl-geocoder@1">/script<

モジュールの使用

このコードは、Amazon Location のジオコーディング機能を備えた Maplibre GL JavaScript マップを設定します。Amazon Cognito ID プールを介した認証を使用して、Amazon Location リソースにアクセスします。マップは指定されたスタイルと中央座標でレンダリングされ、 はマップ上の場所を検索できます。

// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { LocationClient } from "@aws-sdk/client-location";
// Import the utility functions
import { withIdentityPoolId } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationWithMaplibreGeocoder
import { buildAmazonLocationMaplibreGeocoder, AmazonLocationMaplibreGeocoder } from "@aws/amazon-location-for-maplibre-gl-geocoder"

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing the Amazon Location resource
const placeIndex = "PlaceIndexName" // Name of your places resource in your AWS Account. 

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await withIdentityPoolId("Identity Pool ID");

const client = new LocationClient({
  region: "Region", // Region containing Amazon Location resources
  ...authHelper.getLocationClientConfig(), // Configures the client to use credentials obtained via Amazon Cognito
});

// Render the map
const map = new maplibregl.Map({
    container: "map",
    center: [-123.115898, 49.295868],
    zoom: 10,
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
    ...authHelper.getMapAuthenticationOptions(),
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object. 
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placeIndex, {enableAll: true});
    
// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());

ブラウザでの使用

この例では、Amazon Location Client を使用して、Amazon Cognito を使用して認証するリクエストを行います。

注記

これらの例の一部では、Amazon Location Client を使用しています。Amazon Location Client は AWS SDK for JavaScript V3 に基づいており、HTML ファイルで参照されるスクリプトを使用して Amazon Location を呼び出すことができます。

HTML ファイルに以下を含めます。

< Import the Amazon Location With Maplibre Geocoder>
<script src="https://www.unpkg.com/@aws/amazon-location-with-maplibre-geocoder@1"></script>
<Import the Amazon Location Client>
<script src="https://www.unpkg.com/@aws/amazon-location-client@1"></script>
<!Import the utility library>
<script src="https://www.unpkg.com/@aws/amazon-location-utilities-auth-helper@1"></script>

ファイルに以下を含めます JavaScript 。

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing Amazon Location resource

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
  ...authHelper.getMapAuthenticationOptions(),
});

// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(client, placesName, {enableAll: true});

// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map. 
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());

Amazon Location MapLibre ジオコーダープラグインで使用される関数とコマンドを以下に示します。

• buildAmazonLocationMaplibreGeocoder

  このクラスは、他のすべての呼び出しへのエントリポイントAmazonLocationMaplibreGeocderである のインスタンスを作成します。

  const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placesIndex, {enableAll: true});

• getPlacesGeocoder

  マップに直接追加できる、すぐに使用できる IControl オブジェクトを返します。

  const geocoder = getPlacesGeocoder();
  
  // Initialize map
  let map = await initializeMap();
  
  // Add the geocoder to the map. 
  map.addControl(geocoder);