In this guide, you will learn the basics of visualizing a CARTO layer with the service. There are no previous requirements to complete this guide, but a basic knowledge of web development would be helpful.
After completing this guide, you will have your first Amazon Location map with a CARTO dataset!
Basic setup
There are two main steps for visualizing a CARTO layer: first you need to create a map resource in your AWS account followed by the creation of a web application that uses a rendering library to visualize the map with the corresponding CARTO layer.
At this point you will have a basic map with the Rivers Amazon Location map resource:
Adding data from CARTO
About Carto platform versions
In this documentation we use the term “CARTO 3” or “Maps API v3” to refer to the latest version of the CARTO platform launched on October 2021, and “CARTO 2” to refer to the previous version. We provide examples for both versions and we add notes when there are differences in the way you need to work with each of them. Note that each platform version has its own set of account credentials.
By providing your own CARTO map id you can load in any maps you have created in CARTO Builder, with all of the styling preconfigured.
async function initializeMap() {
...
const cartoMapId = 'ff6ac53f-741a-49fb-b615-d040bc5a96b8';
const {layers} = await deck.carto.fetchMap({cartoMapId});
const deckOverlay = new deck.MapboxOverlay({layers});
}
Finally we need to add the layer to the map:
async function initializeMap() {
...
map.addControl(deckOverlay);
}
All together
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.775.0.min.js"></script>
<script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script>
<script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^8.8.0/dist.min.js"></script>
</head>
<body style="margin: 0; padding: 0;">
<div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;"></div>
</body>
<script>
let map;
// instantiate a Cognito-backed credential provider
const identityPoolId = "us-east-2:303d12f6-e24e-4571-8a79-66cc7c6a6bdc"; // Cognito Identity Pool ID
const credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: identityPoolId,
});
/**
* Sign requests made by MapLibre GL JS using AWS SigV4.
*/
AWS.config.region = identityPoolId.split(":")[0];
const { Signer } = window.aws_amplify_core;
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();
const mapName = "Rivers"; // Amazon Location Service Map Name
map = new maplibregl.Map({
container: "map",
center: [-73.96, 40.7167],
zoom: 14,
style: mapName,
transformRequest,
});
map.addControl(new maplibregl.NavigationControl(), "top-left");
const cartoMapId = 'ff6ac53f-741a-49fb-b615-d040bc5a96b8';
const {layers} = await deck.carto.fetchMap({cartoMapId});
const deckOverlay = new deck.MapboxOverlay({layers});
map.addControl(deckOverlay);
}
initializeMap();
</script>
</html>
For this guide, we have already created a map resource called “Rivers” in our AWS account. If you want to create your own map resource, you can follow the instructions from the .
Follow the tutorial to create a basic map with the rendering library.
In order to visualize the CARTO dataset, we are going to use the function to add a map that was previously created in CARTO Builder.
