Your search returned no results

Try another search term or view Stack Exchange, where we have active conversations with Developers about GIS.

    http://gis.stackexchange.com/
    Support channel in Stack Exchange

    Thousands of developers around the world have helped make CartoDB a success, and we have active conversations with them about GIS in Stack Exchange.

    Go to Stack Exchange

    Torque API

    L.TorqueLayer(options)

    A layer to be added to a Leaflet map. It works as a regular tiled layer within the Leaflet tile pane, but instead of containing <img> elements, it’s composed of a single <canvas> where all markers are drawn.

    var torqueLayer = new L.TorqueLayer({
      user: 'viz2',
      table: 'ow',
      cartocss: '<cartocss here>'
    });
    
    map.addLayer(torqueLayer);

    Options

    Name Description
    cartocss A string object, the CartoCSS style for the map. Default value is null
    loop A boolean object that defines the animation loop. Default value is true. If false, the animation is paused when it reaches the last frame
    resolution Spatial resolution in pixels. A resolution of 1 means no spatial aggregation of the data. Its value must be a power of 2
    steps Number of steps that the animation is divided into
    animationDuration Duration, in seconds, of the animation
    zIndex Z-Index CSS property of the layer
    attribution Attribution to be added in the bottom right of the map
    maxZoom Maximum zoom for the layer.
    tileSize Size, in pixels of the tiles
    Using a CARTO table directly
    Name Description
    user A string object, your CARTO account name. Default value is null
    table A string object, the CARTO table name where data is found (also known as a dataset.) Default value is null
    Using a custom SQL query
    Name Description
    query A string object, the SQL query to be performed to fetch the data. Default value is null.

    You must use this param or table, but not at the same time

    Tip: For a Torque category layer that is created dynamically with cartodb.createLayer, the SQL query must explicitly include how to build the torque_category column. You must include both the sql and table_name parameters. See this createLayer with torque category layer example.

    Providing a TileJSON file
    Name Description
    tileJSON A URL pointing to a valid TileJSON file from which to get the Torque tile templates

    Time Methods

    Method Options Returns Description
    setStep(step) time numeric this the value must be between 0 and the total number of steps in the animation
    play()   this starts the animation
    stop()   this stops the animation and set time to step 0
    pause()   this stops the animation but keep the current time (play enables the animation again)
    toggle()   this toggles (pause/play) the animation
    getStep()   current animation step (integer) gets the current animation step. A step is considered an animation frame
    getTime()   current animation time (Date) gets the real animation time
    isRunning()   true/false describes whether the Torque layer is playing or is stopped

    Note: Torque.js interprets the beginning and ending date/time from your “Time Column” as one block, then divides that up into Steps, depending on the number you set. It does not necessarily draw one frame for each row.

    Layer Control Methods

    Method Options Returns Description
    hide() none this hides the Torque layer
    show() none this shows the Torque layer

    Style Methods

    Method Options Returns Description
    setCartoCSS(cartocss) cartocss string this style the map rendering using client-side CartoCSS (not available with Named maps)

    Torque supports a limited subset of CartoCSS rules defined in the torque-reference. To see the full list of supported rules, read the Torque CartoCSS documentation. value and zoom variables can be used. value is the value of aggregation. zoom is the current zoom being rendered.

    TorqueLayer currently expects marker styling.

    Example

    This is how a minimal example of a stylesheet for a Torque visualisation would look like.

    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; 
    }
    #layer[value = 4] { // Use of the value variable, generated by the function specified in -torque-aggregation-function
      marker-fill: #FABADA; 
    }
    #layer[zoom = 12] { // Use of the zoom variable
      marker-width: 10;
    }

    Data Methods

    Method Options Returns Description
    setSQL(sql statement) SQL string this Change the SQL on the data table (not available with named maps)
    error(callback) callback function with a list of errors as argument this specifies a callback function to run if there are query errors

    Example

    SQL Example to limit the data used in the Torque map.

    torqueLayer.setSQL("SELECT * FROM table LIMIT 100");

    Events

    Events in Torque follow the format:

    torqueLayer.on('event-type', function([callback_obj]) {
      // do something
    });
    Events Callback Object Description
    change:steps current step When a map changes steps, this event is triggered
    change:time current time, step number When a map changes time, this event is triggered
    play none Triggered when the Torque layer is played
    pause none Triggered when the Torque layer is paused
    stop none Triggered when the Torque layer is stopped
    load none Triggered when the Torque layer is loaded

    Example

    An event example to print the current step to the console log.

    torqueLayer.on('change:steps', function(step) {
      // do something with step
      console.log('Current step is ' + step);
    });

    Google Maps Layers

    GMapsTorqueLayer(options)

    This class does exactly the same as L.TorqueLayer but using Google Maps instead. The main difference is that this class is not a layer but is an overlay, so in order to add it to the a map use, layer.setMap instead of overlayMapTypes. See the Overlay View reference in Google Maps API doc.

    Options

    Name Description
    map A google.maps.Map instance