resets x value with each row
This commit is contained in:
parent
086c77c379
commit
3ead777645
@ -16,14 +16,14 @@
|
||||
// define the torque layer style using cartocss
|
||||
var CARTOCSS = [
|
||||
'Map {',
|
||||
'-torque-time-attribute: "cartodb_id";',
|
||||
'-torque-time-attribute: "date";',
|
||||
'-torque-aggregation-function: "count(cartodb_id)";',
|
||||
'-torque-frame-count: 1;',
|
||||
'-torque-frame-count: 760;',
|
||||
'-torque-animation-duration: 15;',
|
||||
'-torque-resolution: 20',
|
||||
'-torque-resolution: 2',
|
||||
'}',
|
||||
'#layer {',
|
||||
' marker-width: 1;',
|
||||
' marker-width: 3;',
|
||||
' marker-fill-opacity: 0.8;',
|
||||
' marker-fill: #FEE391; ',
|
||||
' comp-op: "lighten";',
|
||||
@ -33,6 +33,8 @@
|
||||
' [value > 5] { marker-fill: #CC4C02; }',
|
||||
' [value > 6] { marker-fill: #993404; }',
|
||||
' [value > 7] { marker-fill: #662506; }',
|
||||
' [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;}',
|
||||
' [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}',
|
||||
'}'
|
||||
].join('\n');
|
||||
|
||||
@ -53,34 +55,7 @@
|
||||
cartocss: CARTOCSS
|
||||
});
|
||||
torqueLayer.addTo(map);
|
||||
torqueLayer.play();
|
||||
var rect = document.createElement("div");
|
||||
rect.setAttribute('style', "position:absolute; background-color: #fff; width: 100px; height: 30px;");
|
||||
document.getElementById("map").appendChild(rect);
|
||||
var curBounds = [];
|
||||
var curRect;
|
||||
document.onmousemove = function(e){
|
||||
rect.style.display = "block";
|
||||
rect.style.left = e.clientX + 20;
|
||||
rect.style.top = e.clientY - 20;
|
||||
rect.style.padding = 10;
|
||||
var val = torqueLayer.getValueForPos(e.clientX, e.clientY);
|
||||
if (val != null){
|
||||
rect.textContent = val.value;
|
||||
if([[val.bbox[0].lat, val.bbox[0].lon],[val.bbox[1].lat, val.bbox[1].lon]] !== curBounds){
|
||||
curBounds = [[val.bbox[0].lat, val.bbox[0].lon],[val.bbox[1].lat, val.bbox[1].lon]];
|
||||
if(curRect){
|
||||
map.removeLayer(curRect);
|
||||
}
|
||||
curRect = L.rectangle(curBounds, {color: "#ff7800", weight: 1}).addTo(map);
|
||||
}
|
||||
}
|
||||
};
|
||||
document.onmouseout = function(e){
|
||||
if (e.toElement == null && e.relatedTarget == null) {
|
||||
rect.style.display = "none";
|
||||
}
|
||||
}
|
||||
torqueLayer.play()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -385,11 +385,11 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
},
|
||||
|
||||
getValueForBBox: function(x, y, w, h) {
|
||||
var xf = x + w, yf = y + h;
|
||||
var xf = x + w, yf = y + h, _x=x;
|
||||
var sum = 0;
|
||||
while(y<yf){
|
||||
while(x<xf){
|
||||
var thisValue = this.getValueForPos(x,y);
|
||||
while(_x<xf){
|
||||
var thisValue = this.getValueForPos(_x,y);
|
||||
if (thisValue){
|
||||
var bb = thisValue.bbox;
|
||||
var xy = this._map.latLngToContainerPoint([bb[1].lat, bb[1].lon]);
|
||||
@ -397,8 +397,9 @@ L.TorqueLayer = L.CanvasLayer.extend({
|
||||
sum += thisValue.value;
|
||||
}
|
||||
}
|
||||
x += this.options.resolution;
|
||||
_x += this.options.resolution;
|
||||
}
|
||||
_x = x;
|
||||
y += this.options.resolution;
|
||||
}
|
||||
return sum;
|
||||
|
Loading…
Reference in New Issue
Block a user