Let the composite renderer manage containers.

src/ol/renderer/Composite.js

@@ -4,7 +4,9 @@ goog.require('ol.renderer.MapRenderer');
 goog.require('ol.renderer.LayerRenderer');
 goog.require('ol.layer.Layer');
 goog.require('ol.Loc');
+
 goog.require('goog.array');
+goog.require('goog.dom');
 
 /**
  * @constructor
@@ -20,13 +22,12 @@ ol.renderer.Composite = function(container) {
      * @private
      */
     this.renderers_ = [];
-    
-    var target = document.createElement("div");
-    target.className = "ol-renderer-composite";
-    target.style.position = "absolute";
-    target.style.height = "100%";
-    target.style.width = "100%";
-    container.appendChild(target);
+
+    var target = goog.dom.createDom('div', {
+        'class': 'ol-renderer-composite',
+        'style': 'width:100%;height:100%;top:0;left:0;position:absolute'
+    });
+    goog.dom.appendChild(container, target);
 
     /**
      * @type Element
@@ -34,6 +35,12 @@ ol.renderer.Composite = function(container) {
      */
     this.target_ = target;
     
+    /**
+     * @type Object
+     * @private
+     */
+    this.layerContainers_ = {};
+    
 };
 
 goog.inherits(ol.renderer.Composite, ol.renderer.MapRenderer);
@@ -82,7 +89,15 @@ ol.renderer.Composite.prototype.getRenderer = function(layer) {
 ol.renderer.Composite.prototype.createRenderer = function(layer) {
     var Renderer = this.pickRendererType(layer);
     goog.asserts.assert(Renderer, "No supported renderer for layer: " + layer);
-    return new Renderer(this.target_, layer);
+
+    var container = goog.dom.createDom('div', {
+        'class': 'ol-renderer-composite-layer',
+        'style': 'width:100%;height:100%;top:0;left:0;position:absolute'
+    });
+    goog.dom.appendChild(this.target_, container);
+    var renderer = new Renderer(container, layer);
+    this.layerContainers_[goog.getUid(renderer)] = container;
+    return renderer;
 };
 
 /**

src/ol/renderer/LayerRenderer.js

@@ -21,18 +21,6 @@ ol.renderer.LayerRenderer = function(container, layer) {
      */
     this.layer_ = layer;
 
-    var target = goog.dom.createDom('div', {
-        'class': 'ol-renderer-layer',
-        'style': 'position:absolute;height:1px:width:1px'
-    });
-    goog.dom.appendChild(container, target);
-
-    /**
-     * @type Element
-     * @protected
-     */
-    this.target_ = target;
-    
 };
 
 /**

src/ol/renderer/TileLayerRenderer.js

@@ -244,7 +244,7 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
         pxTileLeft = pxTileRight;
     }
     if (newTiles) {
-        this.target_.appendChild(fragment);
+        this.container_.appendChild(fragment);
     }
     this.renderedResolution_ = resolution;
     this.renderedTop_ = topTileY;
@@ -285,7 +285,7 @@ ol.renderer.TileLayerRenderer.prototype.removeInvisibleTiles_ = function() {
         if (prune) {
             tile = this.renderedTiles_[xyz];
             delete this.renderedTiles_[xyz];
-            this.target_.removeChild(tile.getImg());
+            this.container_.removeChild(tile.getImg());
         }
     }
 };
@@ -299,7 +299,7 @@ ol.renderer.TileLayerRenderer.prototype.removeInvisibleTiles_ = function() {
  */
 ol.renderer.TileLayerRenderer.prototype.changeResolution_ = function(center, resolution) {
     this.renderedTiles_ = {};
-    goog.dom.removeChildren(this.target_);
+    goog.dom.removeChildren(this.container_);
 };