Amazon Location ServiceのMapをWebアプリケーションに埋め込んでみた

#Amazon Location Service

若槻龍太

2022.10.26 14:54

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

Amazon Location Serviceは、地図（Map、マップ）や位置情報（Place、プレイス）などの地理情報リソースにAPIやSDKでアクセスして、アプリケーションに統合して利用することができるAWSサービスです。

今回は、Amazon Location ServiceのMapをWebアプリケーションに埋め込んで地図を表示してみました。

やってみた

Mapの作成

まずAmazon LocationコンソールでMapを作成します。

[Create Map]をクリック。

Map名を指定し、埋め込みたいMapのスタイルを選択します。

規約に同意して[Create map]をクリック。

Mapを作成できました。

そして作成したMapの[Embed map]でMapの埋め込みて順が示されているので、こちらに従って以降の手順を進めていきます。

Cognito Identity Poolの作成

匿名ユーザーがアプリケーションに埋め込まれたMapにアクセスできるように、Amazon CognitoコンソールでCognito Identity Poolを作成し、未認証のIDをサポートできるようにします。

Identity Pool名を指定し、[Enable access to unauthenticated identities]にチェックを入れ、[Create Pool]をクリック。

ここでIdentity Poolで使用するIAM Roleを新規作成します。

次のPolicy DocumentをUnauthenticated identities（2つあるうちの下側）で指定し、ローカルで起動したアプリケーションから先程作成したMapにアクセスできるようにします。[Allow]をクリックします。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "geo:GetMap*",
      "Resource": "arn:aws:geo:ap-northeast-1:XXXXXXXXXXXX:map/MyMap",
      "Condition": {
        "StringLike": {
          "aws:referer": [
            "https://www.example.com/*",
            "http://localhost:*/*"
          ]
        }
      }
    }
  ]
}

作成できました。この時に表示されるIdentity Pool IDを控えます。

アプリケーションを起動する

それではアプリケーションを起動してみます。

次のindex.htmlを作成します。

<html>
  <head>
    <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>
    <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">
      const { Amplify } = aws_amplify_core;
      const { createMap } = AmplifyMapLibre;

      Amplify.configure({
        Auth: {
          identityPoolId: "REPLACE_WITH_POOL_ID", //Identity Pool IDで置き換える
          region: "ap-northeast-1",
        },
        geo: {
          AmazonLocationService: {
            maps: {
              items: {
                "MyMap": {
                  style: "Default style"
                },
              },
              default: "MyMap",
            },
            region: "ap-northeast-1",
          },
        }
      });

      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>

上記のindexファイルと同じディレクトリで下記コマンドを実行し、サーバーを起動します。