Torque/CartoDB

by abenrob

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<div id='map'></div>
<script src='//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js'></script>
<script src='https://cartodb-libs.global.ssl.fastly.net/torque.full.js'></script>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

var map = L.map('map')
    .setView([39.828175, -98.5795], 4);
var CartoDB_DarkMatterNoLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 18
}).addTo(map);

var style =
    'Map {'+
        '-torque-frame-count:1024;'+
        '-torque-animation-duration:5;'+
        '-torque-time-attribute:"report_date";'+
        '-torque-aggregation-function:"count(cartodb_id)";'+
        '-torque-resolution:4;'+
        '-torque-data-aggregation:cumulative;'+
    '}'+

    '#fires_format_2013{'+
        'comp-op: lighter;'+
        'marker-fill-opacity: 0.4;'+
        'marker-line-color: #FFF;'+
        'marker-line-width: 0;'+
        'marker-line-opacity: 1;'+
        'marker-type: ellipse;'+
        'marker-width: 4;'+
        'marker-fill: #FF9900;'+
    '}'+
    '#fires_format_2013[frame-offset=1] {'+
        'marker-width:6;'+
        'marker-fill-opacity:0.2;'+
    '}'+
    '#fires_format_2013[frame-offset=2] {'+
        'marker-width:8;'+
        'marker-fill-opacity:0.1;'+
    '}'+
    '#fires_format_2013[frame-offset=3] {'+
        'marker-width:10;'+
        'marker-fill-opacity:0.06666666666666667; '+
    '}'+
    '#fires_format_2013[frame-offset=4] {'+
        'marker-width:12;'+
        'marker-fill-opacity:0.05; '+
    '}'+
    '#fires_format_2013[frame-offset=5] {'+
        'marker-width:14;'+
        'marker-fill-opacity:0.04; '+
    '}'+
    '#fires_format_2013[frame-offset=6] {'+
        'marker-width:16;'+
        'marker-fill-opacity:0.03333333333333333; '+
    '};'

var torqueLayer = new L.TorqueLayer({
    user: 'abenrob',
    table: 'fires_format_2013',
    cartocss: style,
    blendmode: 'lighter',
    loop: false, // does not work
    tiler_protocol: 'https',
    tiler_port:...