diff --git a/src/ol/layer/base.js b/src/ol/layer/base.js
index 22f1495c1c..b16210563c 100644
--- a/src/ol/layer/base.js
+++ b/src/ol/layer/base.js
@@ -54,6 +54,15 @@ ol.layer.Base = function(options) {
 ol.inherits(ol.layer.Base, ol.Object);
 
 
+/**
+ * Create a renderer for this layer.
+ * @abstract
+ * @param {ol.renderer.Map} mapRenderer The map renderer.
+ * @return {ol.renderer.Layer} A layer renderer.
+ */
+ol.layer.Base.prototype.createRenderer = function(mapRenderer) {};
+
+
 /**
  * @return {ol.LayerState} Layer state.
  */
diff --git a/src/ol/layer/image.js b/src/ol/layer/image.js
index ce1241d08c..31c6fee146 100644
--- a/src/ol/layer/image.js
+++ b/src/ol/layer/image.js
@@ -2,6 +2,9 @@ goog.provide('ol.layer.Image');
 
 goog.require('ol');
 goog.require('ol.layer.Layer');
+goog.require('ol.renderer.Type');
+goog.require('ol.renderer.canvas.ImageLayer');
+goog.require('ol.renderer.webgl.ImageLayer');
 
 
 /**
@@ -25,6 +28,21 @@ ol.layer.Image = function(opt_options) {
 ol.inherits(ol.layer.Image, ol.layer.Layer);
 
 
+/**
+ * @inheritDoc
+ */
+ol.layer.Image.prototype.createRenderer = function(mapRenderer) {
+  var renderer = null;
+  var type = mapRenderer.getType();
+  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
+    renderer = new ol.renderer.canvas.ImageLayer(this);
+  } else if (ol.ENABLE_WEBGL && type === ol.renderer.Type.WEBGL) {
+    renderer = new ol.renderer.webgl.ImageLayer(/** @type {ol.renderer.webgl.Map} */ (mapRenderer), this);
+  }
+  return renderer;
+};
+
+
 /**
  * Return the associated {@link ol.source.Image source} of the image layer.
  * @function
diff --git a/src/ol/layer/tile.js b/src/ol/layer/tile.js
index 8a68aa7216..6749513d13 100644
--- a/src/ol/layer/tile.js
+++ b/src/ol/layer/tile.js
@@ -4,6 +4,9 @@ goog.require('ol');
 goog.require('ol.layer.Layer');
 goog.require('ol.layer.TileProperty');
 goog.require('ol.obj');
+goog.require('ol.renderer.Type');
+goog.require('ol.renderer.canvas.TileLayer');
+goog.require('ol.renderer.webgl.TileLayer');
 
 
 /**
@@ -36,6 +39,21 @@ ol.layer.Tile = function(opt_options) {
 ol.inherits(ol.layer.Tile, ol.layer.Layer);
 
 
+/**
+ * @inheritDoc
+ */
+ol.layer.Tile.prototype.createRenderer = function(mapRenderer) {
+  var renderer = null;
+  var type = mapRenderer.getType();
+  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
+    renderer = new ol.renderer.canvas.TileLayer(this);
+  } else if (ol.ENABLE_WEBGL && type === ol.renderer.Type.WEBGL) {
+    renderer = new ol.renderer.webgl.TileLayer(/** @type {ol.renderer.webgl.Map} */ (mapRenderer), this);
+  }
+  return renderer;
+};
+
+
 /**
  * Return the level as number to which we will preload tiles up to.
  * @return {number} The level to preload tiles up to.
diff --git a/src/ol/layer/vector.js b/src/ol/layer/vector.js
index c7b3d6edd3..b6133a4d25 100644
--- a/src/ol/layer/vector.js
+++ b/src/ol/layer/vector.js
@@ -3,6 +3,9 @@ goog.provide('ol.layer.Vector');
 goog.require('ol');
 goog.require('ol.layer.Layer');
 goog.require('ol.obj');
+goog.require('ol.renderer.Type');
+goog.require('ol.renderer.canvas.VectorLayer');
+goog.require('ol.renderer.webgl.VectorLayer');
 goog.require('ol.style.Style');
 
 
@@ -78,6 +81,21 @@ ol.layer.Vector = function(opt_options) {
 ol.inherits(ol.layer.Vector, ol.layer.Layer);
 
 
+/**
+ * @inheritDoc
+ */
+ol.layer.Vector.prototype.createRenderer = function(mapRenderer) {
+  var renderer = null;
+  var type = mapRenderer.getType();
+  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
+    renderer = new ol.renderer.canvas.VectorLayer(this);
+  } else if (ol.ENABLE_WEBGL && type === ol.renderer.Type.WEBGL) {
+    renderer = new ol.renderer.webgl.VectorLayer(/** @type {ol.renderer.webgl.Map} */ (mapRenderer), this);
+  }
+  return renderer;
+};
+
+
 /**
  * @return {number|undefined} Render buffer.
  */
diff --git a/src/ol/layer/vectortile.js b/src/ol/layer/vectortile.js
index 20ed72c21e..4a4dd8af3a 100644
--- a/src/ol/layer/vectortile.js
+++ b/src/ol/layer/vectortile.js
@@ -6,6 +6,8 @@ goog.require('ol.layer.TileProperty');
 goog.require('ol.layer.Vector');
 goog.require('ol.layer.VectorTileRenderType');
 goog.require('ol.obj');
+goog.require('ol.renderer.Type');
+goog.require('ol.renderer.canvas.VectorTileLayer');
 
 
 /**
@@ -49,6 +51,19 @@ ol.layer.VectorTile = function(opt_options) {
 ol.inherits(ol.layer.VectorTile, ol.layer.Vector);
 
 
+/**
+ * @inheritDoc
+ */
+ol.layer.VectorTile.prototype.createRenderer = function(mapRenderer) {
+  var renderer = null;
+  var type = mapRenderer.getType();
+  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
+    renderer = new ol.renderer.canvas.VectorTileLayer(this);
+  }
+  return renderer;
+};
+
+
 /**
  * Return the level as number to which we will preload tiles up to.
  * @return {number} The level to preload tiles up to.
diff --git a/src/ol/renderer/canvas/map.js b/src/ol/renderer/canvas/map.js
index 62f922e739..6db282e133 100644
--- a/src/ol/renderer/canvas/map.js
+++ b/src/ol/renderer/canvas/map.js
@@ -7,21 +7,13 @@ goog.require('ol');
 goog.require('ol.array');
 goog.require('ol.css');
 goog.require('ol.dom');
-goog.require('ol.layer.Image');
 goog.require('ol.layer.Layer');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.layer.VectorTile');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.Immediate');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.Type');
-goog.require('ol.renderer.canvas.ImageLayer');
-goog.require('ol.renderer.canvas.TileLayer');
-goog.require('ol.renderer.canvas.VectorLayer');
-goog.require('ol.renderer.canvas.VectorTileLayer');
 goog.require('ol.source.State');
 
 
@@ -68,25 +60,6 @@ ol.renderer.canvas.Map = function(container, map) {
 ol.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
 
 
-/**
- * @inheritDoc
- */
-ol.renderer.canvas.Map.prototype.createLayerRenderer = function(layer) {
-  if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
-    return new ol.renderer.canvas.ImageLayer(layer);
-  } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
-    return new ol.renderer.canvas.TileLayer(layer);
-  } else if (ol.ENABLE_VECTOR_TILE && layer instanceof ol.layer.VectorTile) {
-    return new ol.renderer.canvas.VectorTileLayer(layer);
-  } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
-    return new ol.renderer.canvas.VectorLayer(layer);
-  } else {
-    ol.DEBUG && console.assert(false, 'unexpected layer configuration');
-    return null;
-  }
-};
-
-
 /**
  * @param {ol.render.EventType} type Event type.
  * @param {olx.FrameState} frameState Frame state.
diff --git a/src/ol/renderer/map.js b/src/ol/renderer/map.js
index de571dd3ed..fb432f55b9 100644
--- a/src/ol/renderer/map.js
+++ b/src/ol/renderer/map.js
@@ -67,15 +67,6 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
 };
 
 
-/**
- * @abstract
- * @param {ol.layer.Layer} layer Layer.
- * @protected
- * @return {ol.renderer.Layer} layerRenderer Layer renderer.
- */
-ol.renderer.Map.prototype.createLayerRenderer = function(layer) {};
-
-
 /**
  * @inheritDoc
  */
@@ -216,7 +207,7 @@ ol.renderer.Map.prototype.getLayerRenderer = function(layer) {
   if (layerKey in this.layerRenderers_) {
     return this.layerRenderers_[layerKey];
   } else {
-    var layerRenderer = this.createLayerRenderer(layer);
+    var layerRenderer = layer.createRenderer(this);
     this.layerRenderers_[layerKey] = layerRenderer;
     this.layerRendererListeners_[layerKey] = ol.events.listen(layerRenderer,
         ol.events.EventType.CHANGE, this.handleLayerRendererChange_, this);
diff --git a/src/ol/renderer/webgl/map.js b/src/ol/renderer/webgl/map.js
index d4752071c9..de165137c1 100644
--- a/src/ol/renderer/webgl/map.js
+++ b/src/ol/renderer/webgl/map.js
@@ -7,18 +7,12 @@ goog.require('ol.array');
 goog.require('ol.css');
 goog.require('ol.dom');
 goog.require('ol.events');
-goog.require('ol.layer.Image');
 goog.require('ol.layer.Layer');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
 goog.require('ol.render.webgl.Immediate');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.Type');
-goog.require('ol.renderer.webgl.ImageLayer');
-goog.require('ol.renderer.webgl.TileLayer');
-goog.require('ol.renderer.webgl.VectorLayer');
 goog.require('ol.source.State');
 goog.require('ol.structs.LRUCache');
 goog.require('ol.structs.PriorityQueue');
@@ -233,23 +227,6 @@ ol.renderer.webgl.Map.prototype.bindTileTexture = function(tile, tileSize, tileG
 };
 
 
-/**
- * @inheritDoc
- */
-ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) {
-  if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
-    return new ol.renderer.webgl.ImageLayer(this, layer);
-  } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
-    return new ol.renderer.webgl.TileLayer(this, layer);
-  } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
-    return new ol.renderer.webgl.VectorLayer(this, layer);
-  } else {
-    ol.DEBUG && console.assert(false, 'unexpected layer configuration');
-    return null;
-  }
-};
-
-
 /**
  * @param {ol.render.EventType} type Event type.
  * @param {olx.FrameState} frameState Frame state.