Make torque layer with Carto.js v4

DTbelieveIT commented 6 years ago

Hello guys,I have a question~ It is possible to animate Map datas with the new carto.js v4.0 . I want to find the example used torque.js with carto.js v4.0 , but I can't find it.

dgaubert commented 6 years ago

cc: @CartoDB/frontend

DTbelieveIT commented 6 years ago

@dgaubert Thank you,I find the way to build the example just now : ) This is the example

<!DOCTYPE html>
<html>
  <head>
    <title>Carto V4 with Torque.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }     
    </style>

    <!-- Include Leaflet -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
    <!-- Include torque.js -->
    <script src="./dist/torque.full.uncompressed.js"></script>
    <!-- Include CARTO.js V4 -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.2/carto.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function main() {
          var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
              attribution: 'Test torque with cartoV4'
          });

          var map = new L.map('map', {
              center: [25,25], // Western Egypt
              zoom: 4
          });

          map.addLayer(layer);

        //----------define the torque layer style using cartocss-----------
        var CARTOCSS = [
            'Map {',
            '-torque-time-attribute: "date";',
            '-torque-aggregation-function: "count(cartodb_id)";',
            '-torque-frame-count: 760;',
            '-torque-animation-duration: 15;',
            '-torque-resolution: 2',
            '}',
            '#layer {',
            '  marker-width: 3;',
            '  marker-fill-opacity: 0.8;',
            '  marker-fill: #FEE391; ',
            '  comp-op: "lighten";',
            '  [value > 2] { marker-fill: #FEC44F; }',
            '  [value > 3] { marker-fill: #FE9929; }',
            '  [value > 4] { marker-fill: #EC7014; }',
            '  [value > 5] { marker-fill: #CC4C02; }',
            '  [value > 6] { marker-fill: #993404; }',
            '  [value > 7] { marker-fill: #662506; }',
            '  [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;}',
            '  [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}',
            '}'
        ].join('\n');

        var torqueLayer = new L.TorqueLayer({
          user       : 'viz2',
          table      : 'ow',
          zIndex: 100,
          cartocss: CARTOCSS
        });
        torqueLayer.error(function(err){
          for(error in err){
            console.warn(err[error]);
          }
        });
        torqueLayer.addTo(map);
        torqueLayer.play()

        // ---------carto V4 define client----------
        const client = new carto.Client({
            apiKey: 'noNeedAPIKeyIfPublicDataset',
            username: 'oboix'
        });
        // define source of data => dataset of your account
        const source = new carto.source.Dataset(`populated_places_spf`);
        // define CartoCSS code to style data on map
        const style = new carto.style.CartoCSS(`
            #layer[adm0name = "Spain"]{
                marker-fill: #fbb4ae;
                marker-allow-overlap: true;
            }
            #layer[adm0name = "Portugal"]{
                marker-fill: #ccebc5;
                marker-allow-overlap: true;
            }
            #layer[adm0name = "France"]{
                marker-fill: #b3cde3;
                marker-allow-overlap: true;
            }`);
        // create CARTO layer from source and style variables
        const Cartolayer = new carto.layer.Layer(source, style);

        // add CARTO layer to the client
        client.addLayer(Cartolayer);

        // get tile from client and add them to the map object
        client.getLeafletLayer().addTo(map);

      }

      window.onload = main;
    </script>
  </body>
</html>

CartoDB / torque

Make torque layer with Carto.js v4 #295