CartoMap autorefresh

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>CartoMap</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>

   
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
     <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb&callback=initMap" async
    ></script>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

deck.carto.setDefaultCredentials({
  apiBaseUrl: 'https://direct-gcp-us-east1.api.carto.com' // Use direct endpoint to avoid caching
});

async function initMap() { // Will be invoked by callback from Google script
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {lat :40.4203, lng: -3.7053}, bearing: 0, tilt: 0, zoom: 17,
    gestureHandling: 'greedy',
    mapId: '3754c817b510f791'
  });
  
  let overlay;
  
  const {layers} = await deck.carto.fetchMap({
    cartoMapId: 'ff45a59b-6f39-484e-8923-0eebf97a83eb',
    autoRefresh: 5,
    onNewData:({layers}) => {
      overlay.setProps({layers});
    }
  });
  
  overlay = new deck.GoogleMapsOverlay({layers});
  overlay.setMap(map);
}