fetchMap - deck.gl v9

by felixp

HTML

<html>

  <head>
    <script src="https://unpkg.com/[email protected]/runtime.js"></script>
    
    <script src="https://unpkg.com/deck.gl@^9.0.0-alpha.6/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css"/>
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

body
#map {
  width: 100vw, 
  height: 100vh
}

JavaScript

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

  map = new maplibregl.Map({
    container: 'map',
    center: [initialViewState.longitude, initialViewState.latitude],
    zoom: initialViewState.zoom,
    pitch: initialViewState.pitch,
    bearing: initialViewState.bearing,
    style: `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`
  });

  // Add the deck.gl layers as an overlay
  deckOverlay = new deck.MapboxOverlay({
    interleaved: true,
    layers
  });
  map.addControl(deckOverlay);
});