JSFiddle - React, Tailwind, and code Playground

by VictorVelarde

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Add layer | CARTO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <script src="https://libs.cartocdn.com/carto-vl/v1.4.4/carto-vl.min.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
  <link href="https://carto.com/developers/carto-vl/v1.4.4/examples/maps/style.css" rel="stylesheet">
</head>

<body>
  <div id="map"></div>
  <aside class="toolbox">
    <div class="box">
      <header>
        <h1>Load vector basemap</h1>
      </header>      
    </div>
  </aside>
  
  <script>
  	const cartoBasemap = carto.basemaps.voyager;
    
    console.time("map-load");
    
    const map = new mapboxgl.Map({
      container: 'map',
      style: cartoBasemap,
      center: [0, 0],
      zoom: 1,
      scrollZoom: false
    });

		map.on('load', function() {
    	alert('a')
    	console.timeEnd("map-load");
    });

  </script>
</body>

</html>