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

Merge branch 'vector_marker' into multi_variable_with_scaling

Browse Source
This commit is contained in:
Stuart Lynn 2015-09-09 14:47:38 -04:00
commit 05aa3db45c
7 changed files with 183 additions and 15 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

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

@ -4492,6 +4492,30 @@ var Profiler = require('../profiler');
} }
} }
function renderVector(ctx, st){
var angle = st['marker-angle']
var color = st['marker-stroke']
var mag = st['marker-mag']
var max_mag = st['marker-max-mag'] ? st['marker-max-mag'] : 10
var max_line_length = st['marker-width']
var scaled_mag = (mag/max_mag)*max_line_length
ctx.lineWidth = 1
// ctx.strokeStyle='green'
// ctx.strokeRect(-max_line_length,-max_line_length,max_line_length*2,max_line_length*2)
ctx.translate(max_line_length/2.0, -max_line_length/2.0)
ctx.rotate(angle)
ctx.strokeStyle = color
ctx.moveTo(0,-max_line_length*2)
ctx.lineTo(0,max_line_length*2)
ctx.stroke();
}
function renderRectangle(ctx, st) { function renderRectangle(ctx, st) {
ctx.fillStyle = st['marker-fill']; ctx.fillStyle = st['marker-fill'];
var pixel_size = st['marker-width']; var pixel_size = st['marker-width'];
@ -4537,6 +4561,7 @@ module.exports = {
renderPoint: renderPoint, renderPoint: renderPoint,
renderSprite: renderSprite, renderSprite: renderSprite,
renderRectangle: renderRectangle, renderRectangle: renderRectangle,
renderVector: renderVector,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
}; };
@ -4644,6 +4669,7 @@ var Filters = require('./torque_filters');
setShader: function(shader) { setShader: function(shader) {
// clean sprites // clean sprites
this._sprites = []; this._sprites = [];
this._shader = shader; this._shader = shader;
this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 }); this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
@ -4752,7 +4778,10 @@ var Filters = require('./torque_filters');
var mt = st['marker-type']; var mt = st['marker-type'];
if (mt && mt === 'rectangle') { if (mt && mt === 'rectangle') {
cartocss.renderRectangle(ctx, st); cartocss.renderRectangle(ctx, st);
} else { } else if(mt && mt === 'vector') {
cartocss.renderVector(ctx,st);
}
else{
cartocss.renderPoint(ctx, st); cartocss.renderPoint(ctx, st);
} }
} }

2
dist/torque.js vendored
View File

File diff suppressed because one or more lines are too long

31
dist/torque.uncompressed.js vendored
View File

@ -4499,6 +4499,30 @@ var Profiler = require('../profiler');
} }
} }
function renderVector(ctx, st){
var angle = st['marker-angle']
var color = st['marker-stroke']
var mag = st['marker-mag']
var max_mag = st['marker-max-mag'] ? st['marker-max-mag'] : 10
var max_line_length = st['marker-width']
var scaled_mag = (mag/max_mag)*max_line_length
ctx.lineWidth = 1
// ctx.strokeStyle='green'
// ctx.strokeRect(-max_line_length,-max_line_length,max_line_length*2,max_line_length*2)
ctx.translate(max_line_length/2.0, -max_line_length/2.0)
ctx.rotate(angle)
ctx.strokeStyle = color
ctx.moveTo(0,-max_line_length*2)
ctx.lineTo(0,max_line_length*2)
ctx.stroke();
}
function renderRectangle(ctx, st) { function renderRectangle(ctx, st) {
ctx.fillStyle = st['marker-fill']; ctx.fillStyle = st['marker-fill'];
var pixel_size = st['marker-width']; var pixel_size = st['marker-width'];
@ -4544,6 +4568,7 @@ module.exports = {
renderPoint: renderPoint, renderPoint: renderPoint,
renderSprite: renderSprite, renderSprite: renderSprite,
renderRectangle: renderRectangle, renderRectangle: renderRectangle,
renderVector: renderVector,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
}; };
@ -4651,6 +4676,7 @@ var Filters = require('./torque_filters');
setShader: function(shader) { setShader: function(shader) {
// clean sprites // clean sprites
this._sprites = []; this._sprites = [];
this._shader = shader; this._shader = shader;
this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 }); this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
@ -4759,7 +4785,10 @@ var Filters = require('./torque_filters');
var mt = st['marker-type']; var mt = st['marker-type'];
if (mt && mt === 'rectangle') { if (mt && mt === 'rectangle') {
cartocss.renderRectangle(ctx, st); cartocss.renderRectangle(ctx, st);
} else { } else if(mt && mt === 'vector') {
cartocss.renderVector(ctx,st);
}
else{
cartocss.renderPoint(ctx, st); cartocss.renderPoint(ctx, st);
} }
} }

81
examples/vector_test.html Normal file
View File

@ -0,0 +1,81 @@
<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="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-frame-count:1;',
' -torque-animation-duration:1;',
' -torque-time-attribute:"date";',
' -torque-aggregation-function:"avg(angle*40)";',
' -torque-resolution:4;',
' -torque-data-aggregation:linear;',
'}',
'#wind {',
' marker-width: 4;',
' marker-fill-opacity: 1.0;',
' marker-stroke: red; ',
' marker-max-mag: 7; ',
' marker-type: vector;',
' marker-mag : 7;',
'}'
]
for(var i=0 ; i < 255; i++){
CARTOCSS.push('#wind[value <= '+(255-i)+'] { marker-angle:'+ (255-i)/40+'; marker-stroke: rgb('+i+','+(255-i)+',255); }')
}
console.log(CARTOCSS)
CARTOCSS = CARTOCSS.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 : 'stuartlynn',
table : 'wind',
cartocss: CARTOCSS
});
torqueLayer.addTo(map);
torqueLayer.play();
</script>
</body>
</html>

25
lib/torque/renderer/cartocss_render.js
View File

@ -42,6 +42,30 @@
} }
} }
function renderVector(ctx, st){
var angle = st['marker-angle']
var color = st['marker-stroke']
var mag = st['marker-mag']
var max_mag = st['marker-max-mag'] ? st['marker-max-mag'] : 10
var max_line_length = st['marker-width']
var scaled_mag = (mag/max_mag)*max_line_length
ctx.lineWidth = 1
// ctx.strokeStyle='green'
// ctx.strokeRect(-max_line_length,-max_line_length,max_line_length*2,max_line_length*2)
ctx.translate(max_line_length/2.0, -max_line_length/2.0)
ctx.rotate(angle)
ctx.strokeStyle = color
ctx.moveTo(0,-max_line_length*2)
ctx.lineTo(0,max_line_length*2)
ctx.stroke();
}
function renderRectangle(ctx, st) { function renderRectangle(ctx, st) {
ctx.fillStyle = st['marker-fill']; ctx.fillStyle = st['marker-fill'];
var pixel_size = st['marker-width']; var pixel_size = st['marker-width'];
@ -87,5 +111,6 @@ module.exports = {
renderPoint: renderPoint, renderPoint: renderPoint,
renderSprite: renderSprite, renderSprite: renderSprite,
renderRectangle: renderRectangle, renderRectangle: renderRectangle,
renderVector: renderVector,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
}; };

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

@ -94,6 +94,7 @@ var Filters = require('./torque_filters');
setShader: function(shader) { setShader: function(shader) {
// clean sprites // clean sprites
this._sprites = []; this._sprites = [];
this._shader = shader; this._shader = shader;
this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 }); this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
@ -202,7 +203,10 @@ var Filters = require('./torque_filters');
var mt = st['marker-type']; var mt = st['marker-type'];
if (mt && mt === 'rectangle') { if (mt && mt === 'rectangle') {
cartocss.renderRectangle(ctx, st); cartocss.renderRectangle(ctx, st);
} else { } else if(mt && mt === 'vector') {
cartocss.renderVector(ctx,st);
}
else{
cartocss.renderPoint(ctx, st); cartocss.renderPoint(ctx, st);
} }
} }