CARTO for deck.gl

CARTO for deck.gl

Builder Map

This example shows how to load a public map created in Builder.

 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
<html>
  <head>
    <script src="https://unpkg.com/deck.gl@beta/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@beta/dist.min.js"></script>
    
    <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />

  </head>

  <body style="margin: 0; padding: 0">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">
    deck.carto.setDefaultCredentials({
      apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
    });

    deck.carto.fetchMap({cartoMapId: 'ff6ac53f-741a-49fb-b615-d040bc5a96b8'})
      .then(({initialViewState, mapStyle, layers}) => {

        const MAP_STYLE = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;

        const deckgl = new deck.DeckGL({
          container: 'map',
          map: maplibregl,
          controller: true,
          mapStyle: MAP_STYLE,
          initialViewState,
          layers
        });
      });
  </script>
</html>