CARTO + Amazon Location

CARTO + Amazon Location

Hello World

This example shows how to create your first map using CARTO and Amazon Location.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!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" />
  </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");

      map.on('load', () => {
        addCartoLayer();
      })
    }

    async function addCartoLayer() {
      map.addLayer(
        {
          id: 'rivers_carto',
          type: 'line',
          source: {
            type: 'vector',
            url: 'https://maps-api-v2.us.carto.com/user/public/bigquery/tileset?source=cartobq.maps.eurivers&format=tilejson&api_key=default_public&client=amazon-location'
          },
          'source-layer': 'default',
          "paint": {
            "line-color": {
              "property": "bearing",
              "type": "interval",
              "stops": [
                [{"zoom": 0, "value": 0}, "rgba(255, 0, 128, 1)"],
                [{"zoom": 0, "value": 18}, "rgba(212, 7, 146, 1)"],
                [{"zoom": 0, "value": 37}, "rgba(212, 7, 146, 1)"],
                [{"zoom": 0, "value": 56}, "rgba(170, 13, 164, 1)"],
                [{"zoom": 0, "value": 75}, "rgba(128, 20, 181, 1)"],
                [{"zoom": 0, "value": 94}, "rgba(85, 26, 199, 1)"],
                [{"zoom": 0, "value": 113}, "rgba(43, 33, 217, 1)"],
                [{"zoom": 0, "value": 132}, "rgba(0, 39, 235, 1)"],
                [{"zoom": 0, "value": 151}, "rgba(3, 72, 217, 1)"],
                [{"zoom": 0, "value": 170}, "rgba(43, 33, 217, 1)"],
                [{"zoom": 0, "value": 189}, "rgba(9, 138, 181, 1)"],
                [{"zoom": 0, "value": 208}, "rgba(12, 170, 164, 1)"],
                [{"zoom": 0, "value": 227}, "rgba(15, 203, 146, 1)"],
                [{"zoom": 0, "value": 246}, "rgba(18, 236, 128, 1)"],
                [{"zoom": 0, "value": 265}, "rgba(58, 197, 128, 1)"],
                [{"zoom": 0, "value": 284}, "rgba(97, 157, 128, 1)"],
                [{"zoom": 0, "value": 303}, "rgba(136, 118, 128, 1)"],
                [{"zoom": 0, "value": 322}, "rgba(176, 79, 128, 1)"],
                [{"zoom": 0, "value": 341}, "rgba(215, 39, 128, 1)"],
                [{"zoom": 0, "value": 360}, "rgba(255, 0, 128, 1)"]
              ]
            }
          }
        }
      );
    }

    initializeMap();

  </script>

</html>