cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4 from gcba/master

Browse Source 
Cumulative Expire Feature
Very nice!
This commit is contained in:
Andrew W. Hill 2013-01-15 15:10:34 -08:00
commit 9ec1d213dd
2 changed files with 139 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
examples/cumexpires.html Normal file
View File

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Time</title>
<link rel="shortcut icon" href="http://cartodb.com/favicon/favicon_32x32.ico" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../lib/cartodb.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../lib/wax.g.js"></script>
<script type="text/javascript" src="../lib/cartodb-gmapsv3.js"></script>
<script type="text/javascript" src="../lib/dat.gui.min.js"></script>
<script type="text/javascript" src="../lib/underscore-min.js"></script>
<script type="text/javascript" src="../lib/backbone.js"></script>
<script type="text/javascript" src="../lib/class.js"></script>
<script type="text/javascript" src="../lib/backbone.cartodb.js"></script>
<script type="text/javascript" src="../src/canvas_tile_layer.js"></script>
<script type="text/javascript" src="../src/grid_layer.js"></script>
<script type="text/javascript" src="../src/torque.js"></script>
<script type="text/javascript">
var gui;
function initialize() {
// initialise the google map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(-34.6036, -58.3817),
zoom: 12,
mapTypeId:google.maps.MapTypeId.SATELLITE,
mapTypeControl:false,
minZoom:1,
scrollwheel: false,
panControl: false,
zoomControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
});
var map_style = {};
map_style.google_maps_customization_style = [
{
stylers:[
{ invert_lightness:true },
{ weight:1 },
{ saturation:-100 },
{ lightness:-40 }
]
},
{
elementType:"labels",
stylers:[
{ visibility:"simplified" }
]
}
];
var Soft = function () {
this.Soft = function () {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles:map_style.google_maps_customization_style});
}
}
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles:map_style.google_maps_customization_style});
var TorqueOptions = {
user: "gcbadata",
table: "torque_expiration",
column: "start_ts",
expiration_column: "end_ts",
cumulative: true,
cumulative_expires: true,
resolution: 2,
steps: 30,
fps: 12,
fitbounds: false,
clock: true,
blendmode: 'source-over',
trails: false,
point_type:'circle',
cellsize:2
}
var torque = null;
Torque(function (env) {
Torque.app = new env.app.Instance();
torque = new Torque.app.addLayer(map, TorqueOptions);
Torque.env = env;
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div class="torque_time"></div>
<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
</body>
</html>

39
src/grid_layer.js
View File

@ -119,6 +119,13 @@ TimePlayer.prototype.pre_cache_months = function (rows, coord, zoom) {
if (this.options.cumulative) {
for (var j = 1; j < this.MAX_UNITS; ++j) {
values[base_idx + j] += values[base_idx + j - 1];
if (this.options.cumulative_expires) {
for ( var u = 0; u < row.dates_end.length; ++u ) {
if ( row.dates_end[u] != null && row.dates_end[u] < (j+1) ) {
values[base_idx + j - 1 ] -= row.vals[u]
}
}
}
if (values[base_idx + j] > this.MAX_VALUE) {
this.MAX_VALUE = values[base_idx + j];
this.MAX_VALUE_LOG = Math.log(this.MAX_VALUE);
@ -149,8 +156,35 @@ TimePlayer.prototype.get_time_data = function (tile, coord, zoom) {
// se contains the deforestation for each entry in sd
// take se and sd as a matrix [se|sd]
var numTiles = 1 << zoom;
var sql = "WITH hgrid AS ( " +
var sql = ""
if ( this.options.cumulative_expires == true) {
sql = "WITH hgrid AS ( " +
" SELECT CDB_RectangleGrid( " +
" CDB_XYZ_Extent({0}, {1}, {2}), ".format(coord.x, coord.y, zoom) +
" CDB_XYZ_Resolution({0}) * {1}, ".format(zoom, this.resolution) +
" CDB_XYZ_Resolution({0}) * {1} ".format(zoom, this.resolution) +
" ) as cell " +
" ) " +
" SELECT " +
" x, y, array_agg(c) vals, array_agg(d) dates , array_agg(de) dates_end" +
" FROM ( " +
" SELECT " +
" round(CAST (st_xmax(hgrid.cell) AS numeric),4) x, " +
" round(CAST (st_ymax(hgrid.cell) AS numeric),4) y, " +
" {0} c, ".format(this.countby) +
" floor((date_part('epoch',{0})- {1})/{2}) d, ".format(this.t_column, this.MIN_DATE, this.step) +
" floor((date_part('epoch',{0})- {1})/{2}) de ".format(this.options.expiration_column, this.MIN_DATE, this.step) +
" FROM " +
" hgrid, {0} i ".format(this.table) +
" WHERE " +
" ST_Intersects(i.the_geom_webmercator, hgrid.cell) " +
" GROUP BY " +
" hgrid.cell, " +
" floor((date_part('epoch',{0})- {1})/{2}), ".format(this.t_column, this.MIN_DATE, this.step) +
" floor((date_part('epoch',{0})- {1})/{2})".format(this.options.expiration_column, this.MIN_DATE, this.step) +
" ) f GROUP BY x, y";
} else {
sql = "WITH hgrid AS ( " +
" SELECT CDB_RectangleGrid( " +
" CDB_XYZ_Extent({0}, {1}, {2}), ".format(coord.x, coord.y, zoom) +
" CDB_XYZ_Resolution({0}) * {1}, ".format(zoom, this.resolution) +
@ -170,6 +204,7 @@ TimePlayer.prototype.get_time_data = function (tile, coord, zoom) {
" GROUP BY " +
" hgrid.cell, floor((date_part('epoch',{0})- {1})/{2})".format(this.t_column, this.MIN_DATE, this.step) +
" ) f GROUP BY x, y";
}
var prof = Profiler.get('tile fetch');
prof.start();