GIS奮闘記

現役GISエンジニアの技術紹介ブログ。主にPythonを使用。

スポンサーリンク

Amazon Location Service を使ってみよう!

さて、本日は Amazon Location Service を使用してみようと思います。とうとう AW が GIS の世界に進出してきましたね。サービス開始時からどんな感じかずっと気になっていたので今回紹介したいと思います。

Amazon Location Service とは

Amazon Location Service とは、デベロッパーがマップ、特定のポイント (POI)、ジオコーディング、ルーティング、トラッキング、ジオフェンシングなどの位置情報機能を、データセキュリティ、ユーザーのプライバシー、データ品質、コストを犠牲にすることなくアプリケーションに簡単に追加できるフルマネージドサービスです。(出典:AWS)

機能

  • Maps・・・開発するアプリにマップを表示したり、マップにデータを追加したりすることができます。
  • Place indexes・・・場所検索、ジオコーディング、逆ジオコーディングなどができます。
  • Route calculators・・・ルート検索ができます。
  • Geofence collections・・・ジオフェンスを使用することができます。
  • Trackers・・・デバイスのトラッキングなどができます。

f:id:sanvarie:20210723213418p:plain

今回試してみること

Amazon Location Service で作成したマップをブラウザ上で表示してみようと思います。

手順

  1. マップの作成
  2. AWS Cognito の設定
  3. マップの表示

1.マップの作成

Esri と HERE のマップが使えるみたいです。今回は Esri Light を使用してみます。

f:id:sanvarie:20210723213935p:plain

f:id:sanvarie:20210723214007p:plain

マップを作成するとコンソール上でマップを使うことができるようになります。

f:id:sanvarie:20210723214225p:plain

2.AWS Cognito の設定

マップの表示には Cognito Identity Pool ID というものをコード内にセットする必要があります。以下のようなサイトを参照し設定をしてください。

qiita.com

qiita.com

3.マップの表示

マップの表示をするためのサンプルコードです。コード内の以下の変数にそれぞれ値を設定してください。

  • identityPoolId ・・・AWS Cognito を設定し取得してください。ap-northeast-1:--***** のような形式です。
  • mapName ・・・作成したマップ名をセットしてください。
<!-- index.html -->
<html>
  <head>
    <link
      href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
      }
 
      #map {
        height: 100vh;
      }
    </style>
  </head>
 
  <body>
    <!-- map container -->
    <div id="map" />
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.784.0.min.js"></script>
    <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script>
    <script>
      // use Signer from @aws-amplify/core
      const { Signer } = window.aws_amplify_core;
 
      // configuration
      const identityPoolId = "";
      const mapName = ""; // Amazon Location Service Map Name
 
      // extract the region from the Identity Pool ID
      AWS.config.region = identityPoolId.split(":")[0];
 
      // instantiate a Cognito-backed credential provider
      const credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: identityPoolId,
      });
 
      /**
       * Sign requests made by MapLibre GL JS using AWS SigV4.
       */
      function transformRequest(url, resourceType) {
        if (resourceType === "Style" && !url.includes("://")) {
          // resolve to an AWS URL
          url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`;
        }
 
        if (url.includes("amazonaws.com")) {
          // only sign AWS requests (with the signature as part of the query string)
          return {
            url: Signer.signUrl(url, {
              access_key: credentials.accessKeyId,
              secret_key: credentials.secretAccessKey,
              session_token: credentials.sessionToken,
            }),
          };
        }
 
        // don't sign
        return { url };
      }
 
      /**
       * Initialize a map.
       */
      async function initializeMap() {
        // load credentials and set them up to refresh
        await credentials.getPromise();
 
        // Initialize the map
        const map = new maplibregl.Map({
          container: "map",
          center: [139.716073, 35.562479], // initial map centerpoint
          zoom: 17, // initial map zoom
          style: mapName,
          transformRequest,
        });
 
        map.addControl(new maplibregl.NavigationControl(), "top-left");
      }
 
      initializeMap();
    </script>
  </body>
</html>

上手くマップが表示されました!初期起動時の場所は蒲田駅にしてみました。

f:id:sanvarie:20210723215007p:plain

さいごに

まだサービスが公開されてから日が浅いので機能はこれからどんどん充実してくるのではないかと思います。また、料金も他のサービスと比べると安いですしアプリ内でちょっと地図を使うくらいだったら Amazon Location Service がファーストチョイスになる日も近いかもしれませんね。次回以降のエントリーで Amazon Location Service を使用したジオコーディングの仕方なども紹介してみようと思います。本日は以上です。