Introduction to Amazon Location Service
Tags: aws, amazonlocationservice
Published: 2021-04-20 01:15:12

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](https://aws.amazon.com/location/). 

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](https://aws.amazon.com/location/pricing/). 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:

![img](https://sigit.cloud/static/1a542e0e7dc9f4a5baa3b99a35c3095d/6d370/als-console.png)

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](https://aws.amazon.com/location/data-providers/esri/) and [HERE](https://aws.amazon.com/location/data-providers/here-technologies/). 

Access your map from the Menu on the Explore page:

![img](https://sigit.cloud/static/073909e371f028087fbbe828b7e12b86/98235/menu-explore.png)

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

![img](https://sigit.cloud/static/98c81f7e9671089595dbcf0424a8df25/64b85/manage-resources.png)

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**". 

![img](https://sigit.cloud/static/149945c3b08be9cd9a4bbc2ac183b4ef/6d370/here-berlin.png)

Now we have 2 maps available to try out:

![img](https://sigit.cloud/static/464ce32f7dbd800d007e3d0b78ff4c41/6d370/2-maps.png)

**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](https://aws.amazon.com/cognito/) for user access control. In this example, we will use Unauthenticated Identities from [Cognito Identity Pools](https://docs.aws.amazon.com/cognito/latest/developerguide/identity-pools.html) for [simple lab purposes only](https://docs.aws.amazon.com/location/latest/developerguide/tutorial-mapbox-identity-pool.html), 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](https://docs.aws.amazon.com/location/latest/developerguide/best-practices.html).

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. 

```yaml
{
    "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](https://github.com/aws-samples/amazon-location-samples/tree/main/mapbox-gl-js). 

```html
<!-- 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 

```html
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. 

```html
// 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.

![img](https://sigit.cloud/static/b5896b95264c60df311eb9f9fb6e37a3/6d370/vscode-test.png)

**explore.map** loaded:

![img](https://sigit.cloud/static/4a5074a4d8c33d54dfe7271ce1e3c23a/6d370/esri.png)

**here-test** loaded:

![img](https://sigit.cloud/static/7d16e33b17a4b0da3215a2a6e2e199de/6d370/here1.png)

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

![img](https://sigit.cloud/static/4b829532831fa8b8af5c287f0db05a99/6d370/here2.png)



**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/