Scaffolding 依存関係構成マップの初期化アプリケーションを実行します。

Amazon Location Service で Amplify ライブラリを使用する

次のチュートリアルは、Amazon Location で AWS Amplify を使用する方法を説明します。Amplify は MapLibre GL JS を使用して、 JavaScriptベースのアプリケーションでマップをレンダリングします。

Amplify は、Amazon Location Service を利用する Amplify Geo など、さまざまなカテゴリのサービスへのインターフェイスを提供する一連のオープンソースのクライアントライブラリです。 AWS Amplify Geo JavaScript ライブラリの詳細をご覧ください。

注記

このチュートリアルは、「マップを使用する - アプリケーションにマップを追加するには」の手順をすでに実行していることを前提としています。

アプリケーションの構築： Scaffolding

このチュートリアルでは、を使用して JavaScript HTML ページにマップを構築するウェブアプリケーションを作成します。

まず、マップのコンテナを含む HTML ページ (index.html) を作成します。

mapの id が付いた div 要素を入力し、マップの寸法をマップビューに適用します。寸法はビューポートから継承されます。


<html>
  <head>
    <style>
      body { margin: 0; }
      #map { height: 100vh; } /* 100% of viewport height */
    </style>
  </head>

  <body>
    <!-- map container -->
    <div id="map" />
  </body>
</html>

アプリケーションの構築：依存関係の追加

次の依存関係をアプリケーションに追加します。

AWS Amplify マップライブラリとジオライブラリ。
AWS Amplify コアライブラリ。
AWS Amplify 認証ライブラリ。
AWS Amplify スタイルシート。


<!-- CSS dependencies -->
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

<!-- JavaScript dependencies -->
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  // application-specific code
</script>

これで、マップのコンテナを含む空のページが作成されます。

アプリケーションの構築：設定

を使用してアプリケーションを設定するには JavaScript：

「マップを使用する - ステップ 2、認証を設定する」で作成した認証されていないアイデンティティプールの識別子を入力します。


// Cognito Identity Pool ID
const identityPoolId = "region:identityPoolID"; // for example: us-east-1:123example-1234-5678
// extract the Region from the Identity Pool ID
const region = identityPoolId.split(":")[0];

アイデンティティプールやマップリソース (ここではデフォルトの explore.map という名前で表示) など、作成したリソースを使用するように AWS Amplify を設定します。


// Configure Amplify
const { Amplify } = aws_amplify_core;
const { createMap } = AmplifyMapLibre;

Amplify.configure({
  Auth: {
    identityPoolId,
    region,
  },
  geo: {
    AmazonLocationService: {
      maps: {
        items: {
          "explore.map": {
            style: "Default style"
          },
        },
        default: "explore.map",
      },
      region,
    },
  }
});

アプリケーションの構築：マップの初期化

ページが読み込まれた後にマップを表示するには、マップを初期化する必要があります。マップの初期位置を調整したり、コントロールを追加したり、データをオーバーレイしたりできます。


async function initializeMap() {
  const map = await createMap(
    {
      container: "map",
      center: [-123.1187, 49.2819],
      zoom: 10,
      hash: true,
    }
  );

  map.addControl(new maplibregl.NavigationControl(), "top-left");
}

initializeMap();

注記

使用する各データプロバイダーのワードマークまたはテキストアトリビューションを、アプリケーションまたはドキュメントに記載する必要があります。アトリビューション文字列は、スタイル記述子のレスポンスのsources.esri.attribution、sources.here.attribution、sources.grabmaptiles.attribution キーに含まれています。Amplify は自動的にアトリビューションを提供します。Amazon Location リソースをデータプロバイダーと併用する場合は、サービスの利用規約を必ずお読みください。

Java アプリケーションを実行する

このサンプルアプリケーションは、ローカル Web サーバーで使用するか、ブラウザで開いて実行できます。

ローカル Web サーバーを使用するには、Node.js の一部としてインストールされた npx を使用するか、任意の他の Web サーバーを使用できます。npx を使用するには、index.html と同じディレクトリ内から npx serve を入力してください。これによってアプリケーションに localhost:5000 が提供されます。

注記

認証されていない Amazon Cognito ロール用に作成したポリシーに referer 条件が含まれている場合、localhost: のURL によるテストがブロックされる可能性があります。この場合、ポリシーに含まれる URL を提供する Web サーバーでテストできます。

チュートリアルを完了すると、最終的なアプリケーションは次の例のようになります。


<html>
  <head>
    <!-- CSS dependencies -->
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

    <!-- JavaScript dependencies -->
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <style>
      body { margin: 0; }
      #map { height: 100vh; }
    </style>
  </head>

  <body>
    <div id="map" />
    <script type="module">
      // Cognito Identity Pool ID
      const identityPoolId = "region:identityPoolId"; // for example: us-east-1:123example-1234-5678
      // extract the Region from the Identity Pool ID
      const region = identityPoolId.split(":")[0];

      // Configure Amplify
      const { Amplify } = aws_amplify_core;
      const { createMap } = AmplifyMapLibre;

      Amplify.configure({
        Auth: {
          identityPoolId,
          region,
        },
        geo: {
          AmazonLocationService: {
            maps: {
              items: {
                "explore.map": {
                  style: "Default style"
                },
              },
              default: "explore.map",
            },
            region,
          },
        }
      });

      async function initializeMap() {
        const map = await createMap(
          {
            container: "map",
            center: [-123.1187, 49.2819],
            zoom: 10,
            hash: true,
          }
        );

        map.addControl(new maplibregl.NavigationControl(), "top-left");
      }

      initializeMap();
    </script>
  </body>
</html>

このアプリケーションを実行すると、選択したマップスタイルを使用して全画面マップが表示されます。このサンプルは、Amazon Location Service コンソールの任意のマップリソースページの [マップを埋め込む] タブにも記載されています。

このチュートリアルを完了したら、「AWS Amplify」ドキュメントの「マップを表示する」トピックに移動して、マップにマーカーを表示する方法などの詳細を確認してください。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

MapLibre iOS 用ネイティブ SDK

チュートリアル： Tangram