deck+Google TripsLayer

by carto

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl+Google</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://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb"
    ></script> 
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </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

const DATA_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json';

const LOOP_LENGTH = 1800;
const THEME = {
  trailColor0: [255, 0, 0],
  trailColor1: [0, 0, 255]
};

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.72, lng: -74},
    bearing: 0,
    gestureHandling: 'greedy',
    mapId: 'fae05836df2dc8bb',
    tilt: 45,
    zoom: 15
  });

  let currentTime = 0;
  const props = {
    id: 'trips',
    data: DATA_URL,
    getPath: d => d.path,
    getTimestamps: d => d.timestamps,
    getColor: d => (d.vendor === 0 ? THEME.trailColor0 : THEME.trailColor1),
    opacity: 0.6,
    widthMinPixels: 12,
    trailLength: 180,
    currentTime,
    shadowEnabled: false
  };

  const overlay = new deck.GoogleMapsOverlay({});
  const animate = () => {
    currentTime = (currentTime + 1) % LOOP_LENGTH;
    const tripsLayer = new deck.TripsLayer({
      ...props, currentTime
    });
    overlay.setProps({
      layers: [tripsLayer]
    });

    window.requestAnimationFrame(animate);
  };
	window.requestAnimationFrame(animate);  

  overlay.setMap(map);
}

initMap();