CartoLayer
Last updated
Last updated
This example shows how to use the CartoLayer with Amazon Location.
<!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;
deck.carto.setDefaultCredentials({accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfbHFlM3p3Z3UiLCJqdGkiOiI1YjI0OWE2ZCJ9.Y7zB30NJFzq5fPv8W5nkoH5lPXFWQP0uywDtqUg8y8c'});
// 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: [20, 49],
zoom: 4,
style: mapName,
transformRequest,
});
map.addControl(new maplibregl.NavigationControl(), "top-left");
const layer = new deck.carto.CartoLayer({
id: 'places',
connection: 'bqconn',
type: deck.carto.MAP_TYPES.QUERY,
data: 'SELECT geom, name FROM cartobq.public_account.populated_places',
pointRadiusMinPixels: 3,
getFillColor: [200, 0, 80],
});
const deckOverlay = new deck.MapboxOverlay({layers: [layer]});
map.addControl(deckOverlay);
}
initializeMap();
</script>
</html><!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: [20, 49],
zoom: 4,
style: mapName,
transformRequest,
});
map.addControl(new maplibregl.NavigationControl(), "top-left");
deck.carto.setDefaultCredentials({apiVersion: deck.carto.API_VERSIONS.V2});
const layer = new deck.carto.CartoLayer({
id: 'places',
type: deck.carto.MAP_TYPES.QUERY,
data: 'SELECT * FROM populated_places',
pointRadiusMinPixels: 3,
getFillColor: [200, 0, 80],
});
const deckOverlay = new deck.MapboxOverlay({layers: [layer]});
map.addControl(deckOverlay);
}
initializeMap();
</script>
</html>