Hello World

This example shows how to create your first map using CARTO and 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;

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

PreviousExamples NextCartoLayer

Last updated 1 year ago

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