JSFiddle - React, Tailwind, and code Playground

by felixp

HTML

<html>
  <head>
    <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://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/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: 'd7980bef-1b8a-4c7b-8bce-5c769443b8c2'})
      .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>