fetchMap with basemap

Docs: https://deck.gl/docs/api-reference/carto/fetch-map

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>CartoMap</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- Only required for H3 Layer -->
    <script src="https://unpkg.com/h3-js@^3.0.0"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

    <!-- 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 {
  height: 100%;
}

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

JavaScript

const cartoMapIds = [
  'f361d154-09b5-42b6-8a89-46d56f762fb9', // Grid
  '4b34fd92-7890-4bab-8601-008aefebc359', // Hex bin
  'b45bb22f-6b2e-4a35-8d46-c8272251f450', // Heatmap
  '86094c6b-16f7-44fa-aca9-c3dc0617c362', // H3
  'ff6ac53f-741a-49fb-b615-d040bc5a96b8', // 3D polygons
  'ba2ef0ba-e7bb-4a9a-a2a0-e8ade556b3d2'  // Tiles
];
const cartoMapId = 'f2fe468e-5db3-414e-a0f5-2b4f3bb189ac';

deck.carto.fetchMap({cartoMapId})
  .then(({initialViewState, mapStyle, layers}) => {
    mapStyle = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;
    const deckgl = new deck.DeckGL({
      container: 'map',
      controller: true,
      mapStyle,
      initialViewState: {longitude: 0, latitude: 0, zoom: 1},
      layers
    });
  }
 );