JSFiddle - React, Tailwind, and code Playground

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Texas Renewal Plants</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    <style>
      #map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

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

    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyuxJgAf5h8Q_MPhhQNml9A7uJtwgiRlg&callback=initMap&libraries=&v=beta"
      async
    ></script>
    
  </body>

  <script type="text/javascript">
    let map;
    let overlay;
    let mapLayers;
    // const LOOP_LENGTH = 11 * 3600;
    // let currentTime = 0;
    let animationCurrentTime = 0;
    let heading = 0;

    deck.carto.setDefaultCredentials({
      apiVersion: deck.carto.API_VERSIONS.V3,
      apiBaseUrl: 'https://gcp-us-east1.api.carto.com'
    });

    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 31, lng: -100 },
        zoom: 7,
        tilt: 45,
        heading: 0,
        mapId: '2fccc3b36c22a0e2',
        disableDefaultUI: true,
      });
      
      deck.carto.fetchMap({mapId: '25d46f73-443d-4883-94a3-9d046faf62f9'}).then(({layers}) => {
        mapLayers = [
        layers.clone({
         //  modelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
        })];
        overlay = new deck.GoogleMapsOverlay({layers});
        overlay.setMap(map);
      });  

      window.requestAnimationFrame(animate);
    }

    function animate() {
      // currentTime = (currentTime + 50) % LOOP_LENGTH;
      animationCurrentTime = animationCurrentTime + 1;
      heading = (heading + 0.01) % 360;

      map.moveCamera({heading});

      // We clone the layers for each frame
      if...