Introduction to Amazon Location Service

Amazon Location Service makes it easy for developers to add location data to applications without sacrificing data security and user privacy. You can read more about Amazon Location Service here.

In this blog, I just want to share how to try Amazon Location Service with simple hands-on lab. This blog assumes you have basic AWS services understanding and an AWS account to try stuff.

Amazon Location Service is in Preview. During the Preview period, you will not incur Amazon Location Service charges for the use of the service. You may incur fees for the use of other AWS services such as Amazon EventBridge, AWS Lambda, and Amazon CloudWatch.

Exploring the 4 Amazon Location Service Capabilities: Maps, Place, Geofence, and Tracker

In this blog, we will focus on Maps. Let's jump directly by logging in to your AWS account, then select Amazon Location Service, you will see the console as follow:

Use the Try it! button to go to the Explore page.

Map

As simple as it's name, this capability helps you to display map inside your web page or iOS, and Android applications. Maps help you visualize location information and are the foundations of many location-based service capabilities. Amazon Location Service provides map tiles of different styles sourced from global location data providers Esri and HERE.

Access your map from the Menu on the Explore page:

Under the Manage Resources, you can see the Maps tab.

There is a default map named "explore.map" already created with Esri as the data source. You can see more details by clicking the map for more information.

Creating a new map

Now let's create a new map by clicking the "Create map button, this time, we will use "Here Berlin" as the data source. Here, I name this map as "here-test".

Now we have 2 maps available to try out:

Loading the maps into HTML page

Now let's try to load the maps above into a simple HTML page for testing. We are going to use Amazon Cognito for user access control. In this example, we will use Unauthenticated Identities from Cognito Identity Pools for simple lab purposes only, in real-life application, you want to use Authenticated Identities so that only authenticated users can use your map. Always follow Best practices for Amazon Location Service.

Use the following IAM policy for unauthenticated IAM role in your Cognito Identity Pool. Note that I am using us-east-1 region and the "111111111111" will need to be replaced with your own AWS account ID. I also put both maps into the IAM policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "geo:GetMapGlyphs",
                "geo:GetMapSprites",
                "geo:GetMapStyleDescriptor",
                "geo:GetMapTile"
            ],
            "Resource": [
                "arn:aws:geo:us-east-1:111111111111:map/explore.map",
                "arn:aws:geo:us-east-1:111111111111:map/here-test"
            ]
        }
    ]
}

Now let's prepare our HTML page as follow. This file is available from aws-samples github, learn more here.

<!-- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -->
<!-- SPDX-License-Identifier: MIT-0 -->
<html>
  <head>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
      }

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

  <body>
    <div id="map" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-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
      // Cognito Identity Pool ID
      const identityPoolId = "us-east-1:aaaa-aaaa-aaaaaaa-aaaa-aaa-aaa";
      // Amazon Location Service Map Name
      // const mapName = "explore.map";
      const mapName = "here-test";

      // extract the region from the Identity Pool ID
      AWS.config.region = identityPoolId.split(":")[0];

      // instantiate a credential provider
      const credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: identityPoolId,
      });

      /**
       * Sign requests made by Mapbox GL 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();

        // actually initialize the map
        const map = new mapboxgl.Map({
          container: "map",
          center: [-123.1187, 49.2819], // initial map centerpoint
          zoom: 10, // initial map zoom
          style: mapName,
          transformRequest,
        });

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

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

Note that you have to change 2 things:

First, the

const identityPoolId = "us-east-1:aaaa-aaaa-aaaaaaa-aaaa-aaa-aaa";

change this to your own Cognito Identity Pool ID.

Second, change the map parameter you want. Here I have put both and just put the other commented. Save the file and test with your local web server.

// const mapName = "explore.map";
      const mapName = "here-test";

I am using Visual Studio Code as editor, and I use the built-in web server to test the page.

explore.map loaded:

here-test loaded:

Use ctrl+ mouse left click drag to show the 2.5D buildings map feature on this map:

Summary

Amazon Location Services makes it easy for developers to add location data to applications without sacrificing data security and user privacy. With this service, developers can access Location Based Services (LBS) with consistent AWS managed API.

References

GitHub samples for Amazon Location Service: https://github.com/aws-samples/amazon-location-samples

Amazon Location Service Developer Guide: https://docs.aws.amazon.com/location/index.html

Best practices for Amazon Location Service: https://docs.aws.amazon.com/location/latest/developerguide/best-practices.html

Disclaimer

https://sigit.cloud/disclaimer/

Blog

Introduction to Amazon Location Service

sigitp

Join Our Newsletter. No Spam, Only the good stuff.

Related