Build interactive maps with OpenStreetMap data on AWS
Tags: aws, geospatial, openstreetmap, amazonlocationservice
Published: 2022-12-29 00:22:18

[OpenStreetMap (OSM)](https://www.openstreetmap.org/) is a free, editable map of the world. Over 1.8 million map makers have contributed to OSM since 2004, updating more than 500,000 features daily. AWS has recently [announced](https://aws.amazon.com/about-aws/whats-new/2022/12/amazon-location-service-open-data-maps-preview/) the public preview of Open Data Maps for [Amazon Location Service](https://aws.amazon.com/location/?trk=6e28124c-8eec-47ae-ad48-a206c820781a&sc_channel=el). This means that you can now access global base maps built from OSM and other open data sources like Natural Earth to add interactive maps to web and mobile applications.

OSM data is free and the open-source community has created an amazing toolchain to work with it, from storage to processing and rendering — visit [Swith2OSM](https://switch2osm.org/) to learn more about the OSM ecosystem. You can also run your own "map stack" on AWS. In fact, you can follow the [Serverless Vector Tiles on AWS](https://github.com/addresscloud/serverless-tiles) tutorial to build and deploy your own map tiles using [Amazon S3](https://aws.amazon.com/s3/), [Amazon Route 53](https://aws.amazon.com/route53/), [AWS Certificate Manager](https://aws.amazon.com/certificate-manager/), and [Amazon CloudFront](https://aws.amazon.com/cloudfront/). However, it may become a challenge to maintain your solution over time in a scalable way, especially when you deal with an OSM extract for a large area. As a result, you may delay or not refresh the data at all, resulting in degradation of location data quality over time and negatively impacting the end-user experience.

To address those challenges, you can use [Open Data Maps](https://docs.aws.amazon.com/location/latest/developerguide/open-data.html?trk=a6fc3d04-52bb-413b-a4e2-ca42bd19a9da&sc_channel=el) from Amazon Location Service, a fully-managed location-based service from AWS. Amazon Location Service regularly refreshes its OSM data with thorough quality and consistency checks, enabling you to build applications with up-to-date location information. You can rely on the security, reliability, and performance of Amazon Location Service to build geospatial solutions at scale. 

In this post, you will learn how to build an interactive map with the new Open Data Maps option from Amazon Location Service. [Create an AWS account](https://portal.aws.amazon.com/billing/signup?trk=15e85350-e523-45c8-9d71-2f9249a4f19f&sc_channel=el), if you don’t have one already, and let’s dive right in.

![A web map with navigation controls, and a marker with popup information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drmdm4iadqdw1nb2xze6.png)

## Create AWS resources

You will use an [AWS CloudFormation](https://aws.amazon.com/cloudformation/) template to create a number of AWS resources, including an Amazon Location Service’s map resource, an [Amazon Cognito](https://aws.amazon.com/cognito/) Identity Pool, plus an IAM role and policy. The Identity Pool, and IAM role and policy are necessary to grant access to the map resource. This way a frontend application can send signed HTTP requests to Amazon Cognito and receive temporary, scoped-down credentials that are valid for an hour. Then, it can use those credentials to request map tiles from [Amazon Location Service’s Maps API](https://docs.aws.amazon.com/location/latest/developerguide/map-concepts.html?trk=500d08ff-28e5-4847-98fe-8e188c0d22c7&sc_channel=el) and render them in the browser. 

For this project, you will allow for unauthenticated guest access to your application — see [Granting access to Amazon Location Service](https://docs.aws.amazon.com/location/latest/developerguide/how-to-access.html?trk=ba130305-2b66-448e-bd13-8da9ea0e19d2&sc_channel=el) to explore more options. Click [this link](https://console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/quickcreate?stackName=open-data-maps-demo&templateURL=https://amazon-location-blog-assets.s3.us-west-2.amazonaws.com/amazon-location-open-data-launch/template.yml) to deploy this CloudFormation template into your AWS account. It will open the AWS Management Console and initiate the deployment process. Check the **I acknowledge that AWS CloudFormation might create IAM resources** box; then select the **Create stack** button.

![Deploy the CloudFormation template to your AWS account using the AWS CloudFormation console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhg3i1jisv6p111xbnww.png)

Once the deployment process is complete, go to the **Outputs** section to get the Identity Pool ID.

![Access the CloudFormation stack outputs in the AWS CloudFormation console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgls1jolkbflj0y0n1fg.png)

## Build a web map

Create an empty HTML file, `index.html`, and add the following content to it. 

```html
<html>
  <head>
    <link
      href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/amazon-location-helpers@1.1"></script>
    <script>
      async function initializeApp() {
        const map = await AmazonLocation.createMap(
          {
            identityPoolId: "YOUR_COGNITO_IDENTITY_POOL",
          },
          {
            container: "map",
            center: [-114.07, 51.0553],
            zoom: 16,
            style: "OpenDataMap",
          }
        );

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

        const popup = new maplibregl.Popup({ offset: 35 }).setHTML(
          `<h3>Prince's Island Park</h3>
           <img width="200" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Calgary1-Szmurlo.jpg/320px-Calgary1-Szmurlo.jpg" />`
        );

        const marker = new maplibregl.Marker()
          .setLngLat([-114.07, 51.0553])
          .setPopup(popup)
          .addTo(map);
      }

      initializeApp();
    </script>
  </body>
</html>
```

Enter your Cognito Identity Pool ID and save the changes. Now, if you open the HTML file in your browser, you will see an interactive map with navigation controls and a marker with popup information.

![A web map with navigation controls, and a marker with popup information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktdmywyxigzu8n6pwjs5.png)

## Clean up

If you would like to remove the AWS resources created in this project, delete the CloudFormation stack called `open-data-maps-demo`.

![Use the AWS CloudFormation console to delete all the resources created in this project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug4dzrir4bk5nbcgus2p.png)

## Wrap up

AWS has recently added Open Data as a new data provider for Amazon Location Service. This allows you to use global base maps, built from OSM and other open data sources, to build geospatial web and mobile applications. In this post, you learned how to use Amazon Location Service’s Maps API to build a simple web map using OSM data. The source code for this project is available on [GitHub](https://github.com/mepa1363/amazon-location-osm-map). I’d love to hear your feedback, so please reach out to me if you have any questions and comments, or ideas on what I should build and write about next.