Allow renderer to have a buffer.

src/ol/renderer/Composite.js

@@ -24,10 +24,24 @@ ol.renderer.Composite = function(container) {
      * @private
      */
     this.renderers_ = [];
+    
+    /**
+     * Pixel buffer for renderer container.
+     *
+     * @type {number}
+     * @private
+     */
+    this.buffer_ = 128;
+    
+    var containerSize = this.getContainerSize();
+    var width = containerSize.width + (2 * this.buffer_);
+    var height = containerSize.height + (2 * this.buffer_);
 
     var target = goog.dom.createDom('div', {
         'class': 'ol-renderer-composite',
-        'style': 'width:100%;height:100%;top:0;left:0;position:absolute'
+        'style': 'width:' + width + 'px;height:' + height + 'px;' +
+            'top:-' + this.buffer_ + 'px;left:-' + this.buffer_ + 'px;' +
+            'position:absolute'
     });
     goog.dom.appendChild(container, target);
 
@@ -38,6 +52,8 @@ ol.renderer.Composite = function(container) {
     this.target_ = target;
 
     /**
+     * The cumulative offset from the original position of the target element.
+     *
      * @type {goog.math.Coordinate}
      * @private
      */
@@ -48,11 +64,23 @@ ol.renderer.Composite = function(container) {
      * @private
      */
     this.layerContainers_ = {};
-
     
 };
 goog.inherits(ol.renderer.Composite, ol.renderer.MapRenderer);
 
+/**
+ * Adjust the position of the renderer target by some offset.
+ *
+ * @param {number} x The x-offset (in pixel space)
+ * @param {number} y The y-offset (in pixel space)
+ */
+ol.renderer.Composite.prototype.shiftTarget = function(x, y) {
+    var newX = this.targetOffset_.x + x;
+    var newY = this.targetOffset_.y + y;
+    this.targetOffset_ = new goog.math.Coordinate(newX, newY);
+    goog.style.setPosition(this.target_, newX-this.buffer_, newY-this.buffer_);
+};
+
 /**
  * @param {Array.<ol.layer.Layer>} layers
  * @param {ol.Loc} center
@@ -65,24 +93,23 @@ ol.renderer.Composite.prototype.draw = function(layers, center, resolution, anim
     if (this.renderedResolution_) {
         if (resolution !== this.renderedResolution_) {
             // TODO: apply transition to old target
-            this.targetOffset_ = new goog.math.Coordinate(0, 0);
+            this.shiftTarget(0, 0);
-            goog.style.setPosition(this.target_, this.targetOffset_);
         }
     }
     this.renderedResolution_ = resolution;
     
     // shift target element to account for center change
     if (this.renderedCenter_) {
-        this.targetOffset_ = new goog.math.Coordinate(
+        this.shiftTarget(
-            this.targetOffset_.x + Math.round((this.renderedCenter_.getX() - center.getX()) / resolution),
+            Math.round((this.renderedCenter_.getX() - center.getX()) / resolution),
-            this.targetOffset_.y + Math.round((center.getY() - this.renderedCenter_.getY()) / resolution)
+            Math.round((center.getY() - this.renderedCenter_.getY()) / resolution)
         );
-        goog.style.setPosition(this.target_, this.targetOffset_);
     }
     this.renderedCenter_ = center;
 
     // update each layer renderer
     var renderer, container;
+
     for (var i=0, ii=layers.length; i<ii; ++i) {
         renderer = this.getOrCreateRenderer(layers[i]);
         renderer.setContainerOffset(this.targetOffset_);

src/ol/renderer/LayerRenderer.js

@@ -1,6 +1,7 @@
 goog.provide('ol.renderer.LayerRenderer');
 
 goog.require('goog.math.Coordinate');
+goog.require('goog.math.Size');
 
 /**
  * A single layer renderer that will be created by the composite map renderer.
@@ -17,6 +18,12 @@ ol.renderer.LayerRenderer = function(container, layer) {
      */
     this.container_ = container;
 
+    /**
+     * @type {goog.math.Size}
+     * @private
+     */
+    this.containerSize_ = null;
+
     /**
      * Pixel offset between the layer renderer container and the composite
      * renderer container.  These will always be integer values.
@@ -34,6 +41,19 @@ ol.renderer.LayerRenderer = function(container, layer) {
 
 };
 
+/**
+ * @return {goog.math.Size}
+ * @protected
+ */
+ol.renderer.LayerRenderer.prototype.getContainerSize = function() {
+    // TODO: listen for resize and set this.constainerSize_ null
+    // https://github.com/openlayers/ol3/issues/2
+    if (goog.isNull(this.containerSize_)) {
+        this.containerSize_ = goog.style.getSize(this.container_);
+    }
+    return this.containerSize_;
+};
+
 /**
  * Set the pixel offset between the layer renderer container and the composite
  * renderer container.

src/ol/renderer/MapRenderer.js

@@ -1,6 +1,7 @@
 goog.provide('ol.renderer.MapRenderer');
 
 goog.require('goog.style');
+goog.require('goog.math.Size');
 
 /**
  * @constructor
@@ -13,6 +14,12 @@ ol.renderer.MapRenderer = function(container) {
      * @protected
      */
     this.container_ = container;
+
+    /**
+     * @type {goog.math.Size}
+     * @private
+     */
+    this.containerSize_ = null;
     
     /**
      * @type {ol.Loc}
@@ -28,6 +35,20 @@ ol.renderer.MapRenderer = function(container) {
     
 };
 
+/**
+ * @return {goog.math.Size}
+ * @protected
+ */
+ol.renderer.MapRenderer.prototype.getContainerSize = function() {
+    // TODO: listen for resize and set this.constainerSize_ null
+    // https://github.com/openlayers/ol3/issues/2
+    if (goog.isNull(this.containerSize_)) {
+        this.containerSize_ = goog.style.getSize(this.container_);
+    }
+    return this.containerSize_;
+};
+
+
 /**
  * @param {Array.<ol.layer.Layer>} layers
  * @param {ol.Loc} center

src/ol/renderer/TileLayerRenderer.js

@@ -82,12 +82,6 @@ ol.renderer.TileLayerRenderer = function(container, layer) {
      */
     this.renderedZ_ = undefined;
     
-    /**
-     * @type {goog.math.Size}
-     * @private
-     */
-    this.containerSize_ = null;
-    
 };
 
 goog.inherits(ol.renderer.TileLayerRenderer, ol.renderer.LayerRenderer);
@@ -114,18 +108,6 @@ ol.renderer.TileLayerRenderer.prototype.getPreferredResAndZ_ = function(resoluti
     return [r, z];
 };
 
-/**
- * @return {goog.math.Size}
- */
-ol.renderer.TileLayerRenderer.prototype.getContainerSize_ = function() {
-    // TODO: listen for resize and set this.constainerSize_ null
-    // https://github.com/openlayers/ol3/issues/2
-    if (goog.isNull(this.containerSize_)) {
-        this.containerSize_ = goog.style.getSize(this.container_);
-    }
-    return this.containerSize_;
-};
-
 /**
  * Tiles rendered at the current resolution;
  * @type {Object}
@@ -147,7 +129,7 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
     var tileZ = pair[1];
     var scale = resolution / tileResolution;
     
-    var containerSize = this.getContainerSize_();
+    var containerSize = this.getContainerSize();
     var xRight = this.xRight_;
     var yDown = this.yDown_;
 
@@ -155,7 +137,7 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
     var halfMapHeight = (resolution * containerSize.height) / 2;
     var centerX = center.getX();
     var centerY = center.getY();
-
+    
     // calculate vector from tile origin to map top-left (in integer pixel space)
     var tileOrigin = this.tileOrigin_;
     var mapOrigin = [centerX - halfMapWidth, centerY + halfMapHeight];