From 5c71ec4922dc20258acaf5c72280b91112c9ba2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Tue, 10 Dec 2013 10:50:25 +0100
Subject: [PATCH]  Add gutter support to ol.renderer.dom.TileLayer

---
 src/ol/renderer/dom/domtilelayerrenderer.js | 40 +++++++++++++++------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/ol/renderer/dom/domtilelayerrenderer.js b/src/ol/renderer/dom/domtilelayerrenderer.js
index 68733fbc16..467efe6200 100644
--- a/src/ol/renderer/dom/domtilelayerrenderer.js
+++ b/src/ol/renderer/dom/domtilelayerrenderer.js
@@ -97,6 +97,7 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
   if (goog.isNull(tileGrid)) {
     tileGrid = ol.tilegrid.getForProjection(projection);
   }
+  var tileGutter = tileSource.getGutter();
   var z = tileGrid.getZForResolution(view2DState.resolution);
   var tileResolution = tileGrid.getResolution(z);
   var center = view2DState.center;
@@ -185,7 +186,7 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
     }
     tilesToDraw = tilesToDrawByZ[tileLayerZKey];
     for (tileCoordKey in tilesToDraw) {
-      tileLayerZ.addTile(tilesToDraw[tileCoordKey]);
+      tileLayerZ.addTile(tilesToDraw[tileCoordKey], tileGutter);
     }
     tileLayerZ.finalizeAddTiles();
   }
@@ -320,8 +321,9 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
 
 /**
  * @param {ol.Tile} tile Tile.
+ * @param {number} tileGutter Tile gutter.
  */
-ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile) {
+ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
   var tileCoord = tile.tileCoord;
   goog.asserts.assert(tileCoord.z == this.tileCoordOrigin_.z);
   var tileCoordKey = tileCoord.toString();
@@ -330,20 +332,36 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile) {
   }
   var tileSize = this.tileGrid_.getTileSize(tileCoord.z);
   var image = tile.getImage(this);
-  var style = image.style;
-  // Bootstrap sets the style max-width: 100% for all images, which breaks
-  // prevents the tile from being displayed in FireFox.  Workaround by
-  // overriding the max-width style.
-  style.maxWidth = 'none';
-  style.position = 'absolute';
-  style.left =
+  var imageStyle = image.style;
+  // Bootstrap sets the style max-width: 100% for all images, which
+  // prevents the tile from being displayed in FireFox.  Workaround
+  // by overriding the max-width style.
+  imageStyle.maxWidth = 'none';
+  var tileElement;
+  var tileElementStyle;
+  if (tileGutter > 0) {
+    tileElement = goog.dom.createElement(goog.dom.TagName.DIV);
+    tileElementStyle = tileElement.style;
+    tileElementStyle.overflow = 'hidden';
+    tileElementStyle.width = tileSize[0] + 'px';
+    tileElementStyle.height = tileSize[1] + 'px';
+    imageStyle.position = 'absolute';
+    imageStyle.left = -tileGutter + 'px';
+    imageStyle.top = -tileGutter + 'px';
+    goog.dom.appendChild(tileElement, image);
+  } else {
+    tileElement = image;
+    tileElementStyle = imageStyle;
+  }
+  tileElementStyle.position = 'absolute';
+  tileElementStyle.left =
       ((tileCoord.x - this.tileCoordOrigin_.x) * tileSize[0]) + 'px';
-  style.top =
+  tileElementStyle.top =
       ((this.tileCoordOrigin_.y - tileCoord.y) * tileSize[1]) + 'px';
   if (goog.isNull(this.documentFragment_)) {
     this.documentFragment_ = document.createDocumentFragment();
   }
-  goog.dom.appendChild(this.documentFragment_, image);
+  goog.dom.appendChild(this.documentFragment_, tileElement);
   this.tiles_[tileCoordKey] = tile;
 };