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

Merge pull request #156 from CartoDB/data-peek

Browse Source 
Adds getValueForBbox
This commit is contained in:
Francisco Dans 2015-03-17 14:59:50 +01:00
commit c3dd3af184
5 changed files with 157 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
NEWS
View File

@ -1,4 +1,5 @@
2.11.1
- Added getValueForBBox to TorqueLayer's API
2.11.0
- Do not fix values in the edge (#147)

7
doc/API.md
View File

@ -102,6 +102,13 @@ torqueLayer.setSQL("SELECT * FROM table LIMIT 100");
| Method | options | returns | Description |
|-----------|:-----------|:----------|:---------------------------------------|
| ```getValueForPos(x, y[, step])```| | an object like { bbox:[], value: VALUE } if there is value for the pos, null otherwise | allows to get the value for the coordinate (in map reference system) for a concrete step. If step is not specified the animation one is used. This method is expensive in terms of CPU so be careful. It returns the value from the raster data not the rendered data |
| ```getValueForBBox(xstart, ystart, xend, yend)```| | a number | returns an accumulated numerical value from all the torque areas within the specified bounds |
| ```getActivePointsBBox(step)```| | list of bbox | returns the list of bounding boxes active for ``step``
| ```invalidate()```| | | forces a reload of the layer data.
### Interaction methods (only available for Leaflet)
| Method | options | returns | Description |
|-----------|:-----------|:----------|:---------------------------------------|
| ```getActivePointsBBox(step)```| | list of bbox | returns the list of bounding boxes active for ``step``
| ```invalidate()```| | | forces a reload of the layer data.

95
examples/data_peek.html Normal file
View File

@ -0,0 +1,95 @@
<html>
<link rel="stylesheet" href="vendor/leaflet.css" />
<style>
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
<body>
<div id="map"></div>
<script src="vendor/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>
<script>
// define the torque layer style using cartocss
var CARTOCSS = [
'Map {',
'-torque-time-attribute: "cartodb_id";',
'-torque-aggregation-function: "count(cartodb_id)";',
'-torque-frame-count: 1;',
'-torque-animation-duration: 15;',
'-torque-resolution: 2',
'}',
'#layer {',
'image-filters: colorize-alpha(blue, cyan, lightgreen, yellow , orange, red);',
'marker-file: url(http://s3.amazonaws.com/com.cartodb.assets.static/alphamarker.png);',
'marker-fill-opacity: 0.4;',
'marker-width: 35;',
'}'
].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 : 'fdansv',
table : 'snow',
cartocss: CARTOCSS
});
torqueLayer.addTo(map);
torqueLayer.play();
var rect = document.createElement("div");
var size = 50;
rect.setAttribute('style', "position:absolute; background-color: #fff; width: 100px; height: 30px;");
document.getElementById("map").appendChild(rect);
var curBounds = [];
var curRect;
var lastX =0, lastY=0;
var calc = function(e){
var x = e.clientX || lastX;
var y = e.clientY || lastY;
lastX = x;
lastY = y;
rect.style.display = "block";
rect.style.left = x + 20;
rect.style.top = y - 20;
rect.style.padding = 10;
var val = torqueLayer.getValueForBBox(x-size/2, y-size/2, size, size);
rect.textContent = val;
var nw = map.containerPointToLatLng([x-size/2, y-size/2]);
var se = map.containerPointToLatLng([x+size/2, y+size/2]);
curBounds = [[nw.lat, nw.lng], [se.lat, se.lng]];
if(curRect){
map.removeLayer(curRect);
}
curRect = L.rectangle(curBounds, {color: "#ff7800", weight: 1}).addTo(map);
};
document.onmousemove = calc;
document.onmouseout = function(e){
if (e.toElement == null && e.relatedTarget == null) {
rect.style.display = "none";
}
};
document.onkeypress = function(e){
if(e.keyCode === 97){
size +=4;
}
if(e.keyCode === 115){
size -=4;
}
calc(e);
}
</script>
</body>
</html>

36
lib/torque/gmaps/torque.js
View File

@ -297,6 +297,42 @@ GMapsTorqueLayer.prototype = torque.extend({},
this.animator.stop();
this._removeTileLoader();
google.maps.event.removeListener(this._cacheListener);
},
getValueForPos: function(x, y, step) {
step = step === undefined ? this.key: step;
var t, tile, pos, value = null, xx, yy;
for(t in this._tiles) {
tile = this._tiles[t];
pos = this.getTilePos(tile.coord);
xx = x - pos.x;
yy = y - pos.y;
if (xx >= 0 && yy >= 0 && xx < this.renderer.TILE_SIZE && yy <= this.renderer.TILE_SIZE) {
value = this.renderer.getValueFor(tile, step, xx, yy);
}
if (value !== null) {
return value;
}
}
return null;
},
getValueForBBox: function(x, y, w, h) {
var xf = x + w, yf = y + h;
var sum = 0;
for(_y = y; y<yf; y+=this.options.resolution){
for(_x = x; x<xf; x+=this.options.resolution){
var thisValue = this.getValueForPos(_x,_y);
if (thisValue){
var bb = thisValue.bbox;
var proj = this.getProjection()
var xy = proj.fromLatLngToContainerPixel(new google.maps.LatLng(bb[1].lat, bb[1].lon));
if(xy.x < xf && xy.y < yf){
sum += thisValue.value;
}
}
}
}
return sum;
}
});

18
lib/torque/leaflet/torque.js
View File

@ -384,6 +384,24 @@ L.TorqueLayer = L.CanvasLayer.extend({
return null;
},
getValueForBBox: function(x, y, w, h) {
var xf = x + w, yf = y + h, _x=x;
var sum = 0;
for(_y = y; _y<yf; _y+=this.options.resolution){
for(_x = x; _x<xf; _x+=this.options.resolution){
var thisValue = this.getValueForPos(_x,_y);
if (thisValue){
var bb = thisValue.bbox;
var xy = this._map.latLngToContainerPoint([bb[1].lat, bb[1].lon]);
if(xy.x < xf && xy.y < yf){
sum += thisValue.value;
}
}
}
}
return sum;
},
invalidate: function() {
this.provider.reload();
}