JSFiddle - React, Tailwind, and code Playground

by VictorVelarde

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Label clusters by count | CARTO VL</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="https://carto.com/developers/carto-vl/examples/maps/style.css">
</head>

<body>
  <div id="map"></div>
  <aside class="toolbox">
    <div class="box">
      <header>
        <h1>Montreal parking signs</h1>
      </header>
      <section>
        <p class="description open-sans">Symbolize, Label + Click interactivity with viewport Cluster count</p>
      </section>
      <footer id="js-footer"></footer>
    </div>
  </aside>

  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
      center: [-73.605089, 45.536127],
      zoom: 10,
      scrollZoom: false
    });

    const nav = new mapboxgl.NavigationControl({
      showCompass: false
    });
    map.addControl(nav, 'top-left');

    carto.setDefaultAuth({
      username: 'cartovl',
      apiKey: 'default_public'
    });


    const source = new carto.source.Dataset('montreal_parking_signs');
    const viz = new carto.Viz(`
            @count: clusterCount()
            @v_features: viewportFeatures(@count)

            width: ramp(linear(@count, viewportMIN(@count), viewportMAX(@count)), [5,50])
            color: opacity(#C91329,0.9)
            strokeWidth: 0
            resolution: 32
        `);
    const layer = new carto.Layer('layer', source, viz);

    // Create labeling layer centroids
    layer.on('loaded', () => {
      map.addSource('labels', { type: 'geojson', data: null });
      const labelSource = map.getSource('labels');

     ...