OpenStreetMap (OSM) 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 the public preview of Open Data Maps for Amazon Location Service. 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 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 tutorial to build and deploy your own map tiles using Amazon S3, Amazon Route 53, AWS Certificate Manager, and Amazon 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 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, if you don’t have one already, and let’s dive right in.
Create AWS resources
You will use an AWS CloudFormation template to create a number of AWS resources, including an Amazon Location Service’s map resource, an Amazon 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 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 to explore more options. Click this link 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.
Once the deployment process is complete, go to the Outputs section to get the Identity Pool ID.
Build a web map
Create an empty HTML file, index.html, and add the following content to it.
<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.
Clean up
If you would like to remove the AWS resources created in this project, delete the CloudFormation stack called open-data-maps-demo.
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. 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.
Top comments (0)