diff --git a/examples/utfgrid.html b/examples/utfgrid.html
index e76221e820..0c5befa9c6 100644
--- a/examples/utfgrid.html
+++ b/examples/utfgrid.html
@@ -4,7 +4,7 @@
     <script src='./OpenLayers.js' type='text/javascript'></script>
     <style>
         .olTileImage { border: 1px solid #DDD !important; }
-        #themap { width:800px; height:400px; border:1px black solid; }
+        #themap { width:512px; height:380px; border:1px black solid; }
         #debugdiv { float:right; }
     </style>
 </head>
@@ -14,25 +14,28 @@
     <div id="selector">
         <ul id="controlToggle">
             <li>
-                <input type="radio" name="type" value="move" id="moveHandler" onclick="toggleControl(this);" checked="checked" />
+                <input type="radio" name="type" value="move" id="moveHandler" 
+                onclick="toggleControl(this);" checked="checked" />
                 <label for="moveHandler">Move</label>
             </li>
             <li>
-                <input type="radio" name="type" value="hover" id="hoverHandler" onclick="toggleControl(this);" />
+                <input type="radio" name="type" value="hover" id="hoverHandler" 
+                onclick="toggleControl(this);" />
                 <label for="hoverHandler">Hover</label>
             </li>
             <li>
-                <input type="radio" name="type" value="click" id="clickHandler" onclick="toggleControl(this);" />
+                <input type="radio" name="type" value="click" id="clickHandler" 
+                onclick="toggleControl(this);" />
                 <label for="clickHandler">Click</label>
             </li>
             <li>
-                <input type="radio" name="type" value="click_callback" id="clickHandlerCustom" onclick="toggleControl(this);" />
+                <input type="radio" name="type" value="click_callback" id="clickHandlerCustom" 
+                onclick="toggleControl(this);" />
                 <label for="clickHandlerCustom">Click with custom callback</label>
             </li>
         </ul>
     </div>
     <div id="themap"></div>
-    <div id="debugdiv"></div>
     <div id="attrsdiv"></div>
     <script>
         /*
@@ -42,14 +45,15 @@
             projection: new OpenLayers.Projection("EPSG:900913"),
             units: "m",
             maxResolution: 156543.0339,
-            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
+            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
+            controls: [] // No default controls; no pan zoom for demo
         });
 
         /*
          * Controls
          */
         var callback = function(attributes) {
-            var msg = "got it - " + attributes.NAME;
+            var msg = "<strong>In 2005, " + attributes.NAME + " had a population of " + attributes.POP2005 + " people.</strong>";
             var element = OpenLayers.Util.getElement('attrsdiv');
             element.innerHTML = msg;
         }
@@ -88,28 +92,25 @@
             control = controls[el.value];
             control.activate();
         }
-        map.addControl(new OpenLayers.Control.Navigation());
-        map.addControl(new OpenLayers.Control.LayerSwitcher());
 
         /*
          * Layers
          */
 
-        var layer = new OpenLayers.Layer.XYZ( 
-            'TestLayer', 
-            "http://tiles/world/${z}/${x}/${y}.png", 
-            {'type':'png', 'sphericalMercator': true}
+        var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+            "http://vmap0.tiles.osgeo.org/wms/vmap0",
+            {layers: 'basic'}  
         );
-        map.addLayer(layer);
+        map.addLayer(ol_wms);
 
-        var layer2 = new OpenLayers.Layer.UTFGrid( 
-            'GridLayer', 
-            "http://tiles/world_utfgrid/${z}/${x}/${y}.json",
-            {'type':'json', 'sphericalMercator': true, 'visible': 'false'}
+        var grid_layer = new OpenLayers.Layer.UTFGrid( 
+            'Invisible UTFGrid Layer', 
+            //"http://tiles/world_utfgrid/${z}/${x}/${y}.json"
+            "./utfgrid/${z}/${x}/${y}.json"
         );
-        map.addLayer(layer2);
+        map.addLayer(grid_layer);
 
-        map.zoomTo(2);
+        map.zoomTo(1);
     </script>
 </body>
 </html>
diff --git a/lib/OpenLayers/Control/UTFGrid.js b/lib/OpenLayers/Control/UTFGrid.js
index 0a2070a494..ae15f442a6 100644
--- a/lib/OpenLayers/Control/UTFGrid.js
+++ b/lib/OpenLayers/Control/UTFGrid.js
@@ -33,12 +33,6 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
     element: null,
     debugElement: null,
     
-    /** 
-     * Property: lastXy
-     * {<OpenLayers.Pixel>}
-     */
-    lastXy: null,
-
     /**
      * Constructor: OpenLayers.Control.UTFGrid
      * Parameters:
@@ -50,7 +44,7 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
         'stopMove': false,
         'single': true,
         'double': false,
-        'pixelTolerance': 0,
+        'pixelTolerance': 4,
         'stopSingle': false,
         'stopDouble': false
     },
@@ -115,7 +109,6 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
         if (options.div) {
             this.element = OpenLayers.Util.getElement(options.div);
         }
-
         this.resetHandler();
     }, 
 
@@ -123,27 +116,15 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
      * Method: handleEvent
      */
     handleEvent: function(evt) {
-        var lonLat;
-
         if (evt == null) {
             this.reset();
             return;
-        } else {
-            if (this.lastXy == null ||
-                Math.abs(evt.xy.x - this.lastXy.x) > this.granularity ||
-                Math.abs(evt.xy.y - this.lastXy.y) > this.granularity)
-            {
-                this.lastXy = evt.xy;
-                return;
-            }
-
-            lonLat = this.map.getLonLatFromPixel(evt.xy);
-            if (!lonLat) { 
-                // map may not have been properly initialized
-                return;
-            }    
-            this.lastXy = evt.xy;
         }
+
+        var lonLat = this.map.getLonLatFromPixel(evt.xy);
+        if (!lonLat) { 
+            return;
+        }    
         
         var layers = this.findLayers();
         if (layers.length > 0) {
@@ -164,8 +145,7 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
                                 Math.floor((info.i) / resolution)
                             ));
                         attrs = data.data[data.keys[code]];
-                        if (attrs)
-                            this.callback(attrs);
+                        this.callback(attrs);
                     }
                 }
             }
@@ -198,11 +178,11 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
      */
     callback: function(attrs) {
         if (attrs !== null && typeof(attrs) !== 'undefined') {
-            val = "<p>Attributes</p><ul>";
+            val = "<table>";
             for(var index in attrs) {
-                val += "<li>" + index + " : " + attrs[index] + "</li>";
+                val += "<tr><th>" + index + "</th><td>" + attrs[index] + "</td></tr>";
             }
-            val += "</ul>";
+            val += "</table>";
             this.element.innerHTML = val;
             return true;
         } else {