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

Proof of concept of how CartoCSS could be extended to allow properties to be set using scaling functions that take value, zoom or frame-offset as variables.

Browse Source
This commit is contained in:
Stuart Lynn 2015-09-04 15:58:59 -04:00
parent cd66a811d8
commit 85f11a73c8
6 changed files with 156 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/torque.full.js vendored
View File

File diff suppressed because one or more lines are too long

28
dist/torque.full.uncompressed.js vendored
View File

@ -4605,6 +4605,30 @@ var Filters = require('./torque_filters');
this._sprites = [];
},
processScaleFunction:function(input, opts){
if(typeof(input)!='string'){
return input;
}
var matches = input.match(/scale_(.*)\((.*)\)/)
if(matches){
var type = matches[1];
var params = matches[2].split(",");
var variable = params[0]
var domain = params.slice(1,3);
var range = params.slice(3,params.length);
var scale = {lin: d3.scale.linear, log: d3.scale.log, quant: d3.scale.quantize, sqrt: d3.scale.sqrt}[type]
var s = scale().domain(domain).range(range)
return s(opts[variable])
}
else{
return input;
}
},
//
// generate sprite based on cartocss style
@ -13932,7 +13956,7 @@ module.exports={
"url": "https://github.com/cartodb/carto",
"repository": {
"type": "git",
"url": "http://github.com/cartodb/carto.git"
"url": "git+ssh://git@github.com/cartodb/carto.git"
},
"author": {
"name": "CartoDB",
@ -14003,7 +14027,7 @@ module.exports={
"bugs": {
"url": "https://github.com/cartodb/carto/issues"
},
"homepage": "https://github.com/cartodb/carto",
"homepage": "https://github.com/cartodb/carto#readme",
"_id": "carto@0.15.1-cdb1",
"_shasum": "62534c2975cbee073f10c6c14a0c7e889c9469e7",
"_resolved": "https://github.com/CartoDB/carto/archive/master.tar.gz",

2
dist/torque.js vendored
View File

File diff suppressed because one or more lines are too long

24
dist/torque.uncompressed.js vendored
View File

@ -4612,6 +4612,30 @@ var Filters = require('./torque_filters');
this._sprites = [];
},
processScaleFunction:function(input, opts){
if(typeof(input)!='string'){
return input;
}
var matches = input.match(/scale_(.*)\((.*)\)/)
if(matches){
var type = matches[1];
var params = matches[2].split(",");
var variable = params[0]
var domain = params.slice(1,3);
var range = params.slice(3,params.length);
var scale = {lin: d3.scale.linear, log: d3.scale.log, quant: d3.scale.quantize, sqrt: d3.scale.sqrt}[type]
var s = scale().domain(domain).range(range)
return s(opts[variable])
}
else{
return input;
}
},
//
// generate sprite based on cartocss style

76
examples/leaflet_with_scaling_functions.html Normal file
View File

@ -0,0 +1,76 @@
<html>
<link rel="stylesheet" href="vendor/leaflet.css" />
<style>
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#title {
position: absolute;
top: 100px;
left: 50px;
color: white;
font-size: 27px;
font-family: Helvetica, sans-serif;
}
</style>
<body>
<div id="map"></div>
<div id="title">Average temperature collected by Britain's Royal Navy (1913-1925)</div>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>
<script>
// define the torque layer style using cartocss
// this creates a kind of density map
//color scale from http://colorbrewer2.org/
var CARTOCSS = [
'Map {',
'-torque-time-attribute: "time";',
'-torque-aggregation-function: "avg(abs(depth))";',
'-torque-frame-count: 200;',
'-torque-animation-duration: 20;',
'-torque-resolution: 1',
'}',
'#all_month_3 {',
' marker-width: "scale_sqrt(value,0,5,0,10)";',
' marker-fill-opacity: "scale_lin(frame-offset,0,5,1,0)";',
' marker-type: ellipse;',
' marker-fill: "scale_log(value,0.1,255,red,blue,green)";',
'}',
'#all_month_3[frame-offset=1]{}',
'#all_month_3[frame-offset=2]{}',
'#all_month_3[frame-offset=3]{}',
'#all_month_3[frame-offset=4]{}',
'#all_month_3[frame-offset=5]{}',
].join('\n');
var map = new L.Map('map', {
zoomControl: true,
center: [40, 0],
zoom: 3
});
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);
var torqueLayer = new L.TorqueLayer({
user : 'eschbacher',
table : 'all_month_3',
cartocss: CARTOCSS
});
torqueLayer.addTo(map);
torqueLayer.play();
</script>
</body>
</html>

24
lib/torque/renderer/point.js
View File

@ -105,6 +105,30 @@ var Filters = require('./torque_filters');
this._sprites = [];
},
processScaleFunction:function(input, opts){
if(typeof(input)!='string'){
return input;
}
var matches = input.match(/scale_(.*)\((.*)\)/)
if(matches){
var type = matches[1];
var params = matches[2].split(",");
var variable = params[0]
var domain = params.slice(1,3);
var range = params.slice(3,params.length);
var scale = {lin: d3.scale.linear, log: d3.scale.log, quant: d3.scale.quantize, sqrt: d3.scale.sqrt}[type]
var s = scale().domain(domain).range(range)
return s(opts[variable])
}
else{
return input;
}
},
//
// generate sprite based on cartocss style