Optimizing positions for rendering

Calculating pixel positions from origin and grid index causes alignment
issues in the grid. By going back to incremental positioning, we get a
result without blank spaces between tiles again.

lib/OpenLayers/Layer/Grid.js

@@ -875,34 +875,23 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * resolution - {Number}
      *
      * Returns:
-     * {Object} Object containing properties tilelon, tilelat, tileoffsetx,
+     * {Object} Object containing properties tilelon, tilelat, startcol,
-     * tileoffsety, startcol, startrow
+     * startrow
      */
     calculateGridLayout: function(bounds, origin, resolution) {
         var tilelon = resolution * this.tileSize.w;
         var tilelat = resolution * this.tileSize.h;
         
-        var ratio = resolution / this.map.getResolution(),
-            tileSize = {
-                w: Math.round(this.tileSize.w * ratio),
-                h: Math.round(this.tileSize.h * ratio)
-            };
-
         var offsetlon = bounds.left - origin.lon;
         var tilecol = Math.floor(offsetlon/tilelon) - this.buffer;
-        var tilecolremain = offsetlon/tilelon - tilecol;
-        var tileoffsetx = -tilecolremain * tileSize.w;
         
         var rowSign = this.tileOriginCorner.substr(0, 1) === "t" ? 1 : -1;
 
         var offsetlat = rowSign * (origin.lat - bounds.top + tilelat);  
         var tilerow = Math[~rowSign ? 'floor' : 'ceil'](offsetlat/tilelat) - this.buffer * rowSign;
-        var tilerowremain = tilerow - offsetlat/tilelat;
-        var tileoffsety = rowSign * tilerowremain * tileSize.h;
         
         return { 
           tilelon: tilelon, tilelat: tilelat,
-          tileoffsetx: tileoffsetx, tileoffsety: tileoffsety,
           startcol: tilecol, startrow: tilerow
         };
 
@@ -991,15 +980,19 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         var tileLayout = this.calculateGridLayout(bounds, origin, serverResolution);
         this.gridLayout = tileLayout;
         
-        var startX = Math.round(tileLayout.tileoffsetx); // heaven help us
-        var startY = Math.round(tileLayout.tileoffsety);
-        
         var tilelon = tileLayout.tilelon;
         var tilelat = tileLayout.tilelat;
         
         var layerContainerDivLeft = this.map.layerContainerOriginPx.x;
         var layerContainerDivTop = this.map.layerContainerOriginPx.y;
 
+        var tileBounds = this.getTileBoundsForGridIndex(0, 0);
+        var startPx = this.map.getViewPortPxFromLonLat(
+            new OpenLayers.LonLat(tileBounds.left, tileBounds.top)
+        );
+        startPx.x = Math.round(startPx.x) - layerContainerDivLeft;
+        startPx.y = Math.round(startPx.y) - layerContainerDivTop;
+
         var tileData = [], center = this.map.getCenter();
 
         var rowidx = 0;
@@ -1012,10 +1005,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             
             var colidx = 0;
             do {
-                var tileBounds = this.getTileBoundsForGridIndex(rowidx, colidx);
+                tileBounds = this.getTileBoundsForGridIndex(rowidx, colidx);
-                var x = startX + colidx * tileSize.w - layerContainerDivLeft;
+                var px = startPx.clone();
-                var y = startY + rowidx * tileSize.h - layerContainerDivTop;
+                px.x = px.x + colidx * Math.round(tileSize.w);
-                var px = new OpenLayers.Pixel(x, y);
+                px.y = px.y + rowidx * Math.round(tileSize.h);
                 var tile = row[colidx];
                 if (!tile) {
                     tile = this.addTile(tileBounds, px);
@@ -1219,17 +1212,12 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         var tileLayout = this.gridLayout;
         tileLayout.startrow += sign * rowSign;
 
-        var bounds = this.getTileBoundsForGridIndex(rowIndex, 0);
+        var modelRow = grid[rowIndex];
-        var position = this.map.getViewPortPxFromLonLat(
-            new OpenLayers.LonLat(bounds.left, bounds.top)
-        );
-        var y = Math.round(position.y - this.map.layerContainerOriginPx.y);
-
         var row = grid[prepend ? 'pop' : 'shift']();
         for (var i=0, len=row.length; i<len; i++) {
             var tile = row[i];
-            var position = tile.position.clone();
+            var position = modelRow[i].position.clone();
-            position.y = y;
+            position.y += tileSize.h * sign;
             tile.moveTo(this.getTileBoundsForGridIndex(rowIndex, i), position);
         }
         grid[prepend ? 'unshift' : 'push'](row);
@@ -1251,17 +1239,11 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         var tileLayout = this.gridLayout;
         tileLayout.startcol += sign;
 
-        var bounds = this.getTileBoundsForGridIndex(0, colIndex);
-        var position = this.map.getViewPortPxFromLonLat(
-            new OpenLayers.LonLat(bounds.left, bounds.top)
-        );
-        var x = Math.round(position.x - this.map.layerContainerOriginPx.x);
-
         for (var i=0, len=grid.length; i<len; i++) {
             var row = grid[i];
+            var position = row[colIndex].position.clone();
             var tile = row[prepend ? 'pop' : 'shift']();            
-            var position = tile.position.clone();
+            position.x += tileSize.w * sign;
-            position.x = x;
             tile.moveTo(this.getTileBoundsForGridIndex(i, colIndex), position);
             row[prepend ? 'unshift' : 'push'](tile);
         }

lib/OpenLayers/Layer/KaMap.js

@@ -92,8 +92,8 @@ OpenLayers.Layer.KaMap = OpenLayers.Class(OpenLayers.Layer.Grid, {
      * resolution - {Number}
      *
      * Returns:
-     * {Object} Object containing properties tilelon, tilelat, tileoffsetx,
+     * {Object} Object containing properties tilelon, tilelat, startcol,
-     * tileoffsety, startcol, startrow
+     * startrow
      */
     calculateGridLayout: function(bounds, origin, resolution) {
         var tilelon = resolution*this.tileSize.w;
@@ -101,17 +101,12 @@ OpenLayers.Layer.KaMap = OpenLayers.Class(OpenLayers.Layer.Grid, {
         
         var offsetlon = bounds.left;
         var tilecol = Math.floor(offsetlon/tilelon) - this.buffer;
-        var tilecolremain = offsetlon/tilelon - tilecol;
-        var tileoffsetx = -tilecolremain * this.tileSize.w;
         
         var offsetlat = bounds.top;  
         var tilerow = Math.floor(offsetlat/tilelat) + this.buffer;
-        var tilerowremain = tilerow - offsetlat/tilelat;
-        var tileoffsety = -(tilerowremain+1) * this.tileSize.h;
         
         return { 
           tilelon: tilelon, tilelat: tilelat,
-          tileoffsetx: tileoffsetx, tileoffsety: tileoffsety,
           startcol: tilecol, startrow: tilerow
         };
     },    

lib/OpenLayers/Tile/Image.js

@@ -217,8 +217,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         if (this.layer instanceof OpenLayers.Layer.Grid) {
             ratio = this.layer.getServerResolution() / this.layer.map.getResolution();
         }
-        style.left = (this.position.x | 0) + "px";
+        style.left = this.position.x + "px";
-        style.top = (this.position.y | 0) + "px";
+        style.top = this.position.y + "px";
         style.width = Math.round(ratio * size.w) + "px";
         style.height = Math.round(ratio * size.h) + "px";
     },