Trips Layer

This example shows how to use the TripsLayer to render animated paths that represent vehicle trips.

CARTO 3

CARTO + Google Maps examples - CodeSandboxcodesandbox

<!DOCTYPE html>
<html>

<head>
  <title>Extrusion</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>
  <script src="https://unpkg.com/@deck.gl/carto@^8.8.0/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=AIzaSyDvHtBZM79O5uGTBT1ZOWOKW2_FVMstHNs&callback=initMap&libraries=&v=beta"
    async></script>

</body>

<script type="text/javascript">
  let map;
  const LOOP_LENGTH = 1800;
  const ANIMATION_SPEED = 0.4;
  let time = 0;
  let layerData = [];
  let deckOverlay;

  function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 40.73, lng: -74 },
      zoom: 13,
      tilt: 45,
      mapId: '2a9fc80dfecb64f8',
      fullscreenControl: false,
      streetViewControl: false,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM,
      },
    });

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

    // Fetch Data from CARTO
    deck.carto.fetchLayerData({
      type: deck.carto.MAP_TYPES.QUERY,
      source: `SELECT geom, vendor, 
                        TO_JSON_STRING(timestamps) AS timestamps 
                   FROM cartobq.public_account.new_york_trips`,
      connection: 'bqconn',
      format: deck.carto.FORMATS.GEOJSON
    }).then(({ data: geojsonData }) => {
      // TripsLayer needs data in the following format
      layerData = geojsonData.features.map(f => ({
        vendor: f.properties.vendor,
        timestamps: JSON.parse(f.properties.timestamps),
        path: f.geometry.coordinates
      }));
    });

    deckOverlay = new deck.GoogleMapsOverlay({});

    deckOverlay.setMap(map);

    initAnimation();
  }

  function animate() {
    time = (time + ANIMATION_SPEED) % LOOP_LENGTH;
    window.requestAnimationFrame(animate);
  }

  function initAnimation() {

    setInterval(() => {
      deckOverlay.setProps({
        layers: [
          new deck.TripsLayer({
            id: 'trips-layer',
            data: layerData,
            getPath: d => d.path,
            getTimestamps: d => d.timestamps,
            getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
            opacity: 0.3,
            widthMinPixels: 2,
            rounded: true,
            trailLength: 180,
            currentTime: time,
            shadowEnabled: false
          })
        ]
      });
    }, 50);

    window.requestAnimationFrame(animate);
  }

</script>

</html>

CARTO 2

CARTO + Google Maps examples - CodeSandboxcodesandbox

<!DOCTYPE html>
<html>

<head>
  <title>Extrusion</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>
  <script src="https://unpkg.com/@deck.gl/carto@^8.8.0/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=AIzaSyDvHtBZM79O5uGTBT1ZOWOKW2_FVMstHNs&callback=initMap&libraries=&v=beta"
    async></script>

</body>

<script type="text/javascript">
  let map;
  const LOOP_LENGTH = 1800;
  const ANIMATION_SPEED = 0.4;
  let time = 0;
  let layerData = [];
  let deckOverlay;

  function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 40.73, lng: -74 },
      zoom: 13,
      tilt: 45,
      mapId: '2a9fc80dfecb64f8',
      fullscreenControl: false,
      streetViewControl: false,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM,
      },
    });

    deck.carto.setDefaultCredentials({
      username: 'public',
      apiKey: 'default_public',
      apiVersion: deck.carto.API_VERSIONS.V2,
    });

    // Fetch data from CARTO
    const query = 'SELECT the_geom, vendor, timestamps FROM new_york_trips';
    const url = `https://public.carto.com/api/v2/sql?q=${query}&format=geojson`;
    fetch(url)
      .then(response => response.json())
      .then((geojsonData) => {
        // TripsLayer needs data in the following format
        layerData = geojsonData.features.map(f => ({
          vendor: f.properties.vendor,
          timestamps: f.properties.timestamps,
          path: f.geometry.coordinates[0]
        }));
      });

    deckOverlay = new deck.GoogleMapsOverlay({});

    deckOverlay.setMap(map);

    initAnimation();
  }

  function animate() {
    time = (time + ANIMATION_SPEED) % LOOP_LENGTH;
    window.requestAnimationFrame(animate);
  }

  function initAnimation() {

    setInterval(() => {
      deckOverlay.setProps({
        layers: [
          new deck.TripsLayer({
            id: 'trips-layer',
            data: layerData,
            getPath: d => d.path,
            getTimestamps: d => d.timestamps,
            getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
            opacity: 0.3,
            widthMinPixels: 2,
            rounded: true,
            trailLength: 180,
            currentTime: time,
            shadowEnabled: false
          })
        ]
      });
    }, 50);

    window.requestAnimationFrame(animate);
  }

</script>

</html>