Amazon Location + CartoMap

by borja_munoz

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Amazon Location - CartoMap</title>
    
    <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/[email protected]/dist/aws-amplify-core.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>   

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  position: absolute; 
  top: 0; 
  bottom: 0; 
  width: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  margin: 0;
  padding: 0;
}

JavaScript

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

  let mapLibreMap = new maplibregl.Map({
    container: "map",
    style: mapName,
    transformRequest,
  });

  mapLibreMap.on('load', () => {

    deck.carto.fetchMap({
      cartoMapId: 'dac32075-7dfd-46eb-8967-3e146e86d91c'
    }).then(cartoMap => 
      new deck.Deck({
        ...cartoMap,
        controller: true,
        onViewStateChange: ({viewState}) => {
          mapLibreMap.jumpTo({
            center: [viewState.longitude, viewState.latitude],
            zoom: viewState.zoom,
            bearing: viewState.bearing,
            pitch: viewState.pitch
          });
        },
      }));
  
  })
}

initializeMap();