diff --git a/examples/navy_leaflet.html b/examples/navy_leaflet.html
index a156e8f..c026ff7 100644
--- a/examples/navy_leaflet.html
+++ b/examples/navy_leaflet.html
@@ -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>
diff --git a/lib/torque/leaflet/torque.js b/lib/torque/leaflet/torque.js
index a60b3ab..c9a4dfe 100644
--- a/lib/torque/leaflet/torque.js
+++ b/lib/torque/leaflet/torque.js
@@ -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;