JSFiddle - React, Tailwind, and code Playground

by VictorVelarde

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formula dataview</title>

    <link
      rel="stylesheet"
      type="text/css"
      href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
    />

    <link
      rel="stylesheet"
      type="text/css"
      href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
    />

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body class="as-app-body as-app">
    <div class="as-content">
      <main class="as-main">
        <div class="as-map-area">
          <!-- map -->
          <div id="map"></div>

          <!-- panel -->
          <div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
            <div class="as-panel__element as-p--16 as-body">
              <h1 class="as-title">Formula dataview</h1>
              <h4 class="as-subheader as-mb--12">
                Compute a simple formula with
                <em>carto.viz.dataview.Formula</em>. In this case, it is the SUM of estimated population (on screen)
              </h4>

              <hr/>
              <div id="result"></div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>

    <script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.2/index.min.js></script>

    <script>

      async function initialize() {
        carto.auth.setDefaultCredentials({ username: 'public' });

        const deckMap = carto.viz.createMap();

        const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
        await countriesLayer.addTo(deckMap);

        const dataview = new...