Pluggable renderers

externs/olx.js

@@ -8290,3 +8290,49 @@ olx.style.AtlasManagerOptions.prototype.maxSize;
  * @api
  */
 olx.style.AtlasManagerOptions.prototype.space;
+
+
+/**
+ * @typedef {{handles: function(ol.renderer.Type):boolean,
+ *     create: function(Element, ol.Map):ol.renderer.Map}}
+ */
+olx.MapRendererPlugin;
+
+
+/**
+ * Determine if this renderer handles the provided layer.
+ * @type {function(ol.renderer.Type):boolean}
+ * @api
+ */
+olx.MapRendererPlugin.prototype.handles;
+
+
+/**
+ * Create the map renderer.
+ * @type {function(Element, ol.Map):ol.renderer.Map}
+ * @api
+ */
+olx.MapRendererPlugin.prototype.create;
+
+
+/**
+ * @typedef {{handles: function(ol.renderer.Type, ol.layer.Layer):boolean,
+ *     create: function(ol.renderer.Map, ol.layer.Layer):ol.renderer.Layer}}
+ */
+olx.LayerRendererPlugin;
+
+
+/**
+ * Determine if this renderer handles the provided layer.
+ * @type {function(ol.renderer.Type, ol.layer.Layer):boolean}
+ * @api
+ */
+olx.LayerRendererPlugin.prototype.handles;
+
+
+/**
+ * Create a layer renderer.
+ * @type {function(ol.renderer.Map, ol.layer.Layer):ol.renderer.Layer}
+ * @api
+ */
+olx.LayerRendererPlugin.prototype.create;

src/ol/layer/base.js

@@ -51,17 +51,24 @@ ol.layer.Base = function(options) {
     managed: true
   });
 
+  /**
+   * The layer type.
+   * @type {ol.LayerType}
+   * @protected;
+   */
+  this.type;
+
 };
 ol.inherits(ol.layer.Base, ol.Object);
 
 
 /**
- * Create a renderer for this layer.
+ * Get the layer type (used when creating a layer renderer).
- * @abstract
+ * @return {ol.LayerType} The layer type.
- * @param {ol.renderer.Map} mapRenderer The map renderer.
- * @return {ol.renderer.Layer} A layer renderer.
  */
-ol.layer.Base.prototype.createRenderer = function(mapRenderer) {};
+ol.layer.Base.prototype.getType = function() {
+  return this.type;
+};
 
 
 /**

src/ol/layer/group.js

@@ -70,12 +70,6 @@ ol.layer.Group = function(opt_options) {
 ol.inherits(ol.layer.Group, ol.layer.Base);
 
 
-/**
- * @inheritDoc
- */
-ol.layer.Group.prototype.createRenderer = function(mapRenderer) {};
-
-
 /**
  * @private
  */

src/ol/layer/image.js

@@ -1,10 +1,8 @@
 goog.provide('ol.layer.Image');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.layer.Layer');
-goog.require('ol.renderer.Type');
-goog.require('ol.renderer.canvas.ImageLayer');
-goog.require('ol.renderer.webgl.ImageLayer');
 
 
 /**
@@ -24,25 +22,18 @@ goog.require('ol.renderer.webgl.ImageLayer');
 ol.layer.Image = function(opt_options) {
   var options = opt_options ? opt_options : {};
   ol.layer.Layer.call(this,  /** @type {olx.layer.LayerOptions} */ (options));
+
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.IMAGE;
+
 };
 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

src/ol/layer/tile.js

@@ -1,12 +1,10 @@
 goog.provide('ol.layer.Tile');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 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');
 
 
 /**
@@ -35,25 +33,18 @@ ol.layer.Tile = function(opt_options) {
   this.setPreload(options.preload !== undefined ? options.preload : 0);
   this.setUseInterimTilesOnError(options.useInterimTilesOnError !== undefined ?
     options.useInterimTilesOnError : true);
+
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.TILE;
+
 };
 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.

src/ol/layer/vector.js

@@ -1,11 +1,9 @@
 goog.provide('ol.layer.Vector');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 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');
 
 
@@ -70,25 +68,18 @@ ol.layer.Vector = function(opt_options) {
    */
   this.updateWhileInteracting_ = options.updateWhileInteracting !== undefined ?
     options.updateWhileInteracting : false;
+
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.VECTOR;
+
 };
 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.
  */

src/ol/layer/vectortile.js

@@ -1,13 +1,12 @@
 goog.provide('ol.layer.VectorTile');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.asserts');
 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');
 
 
 /**
@@ -47,23 +46,17 @@ ol.layer.VectorTile = function(opt_options) {
    */
   this.renderMode_ = options.renderMode || ol.layer.VectorTileRenderType.HYBRID;
 
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.VECTOR_TILE;
+
 };
 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.

src/ol/layertype.js

@@ -0,0 +1,12 @@
+goog.provide('ol.LayerType');
+
+/**
+ * A layer type used when creating layer renderers.
+ * @enum {string}
+ */
+ol.LayerType = {
+  IMAGE: 'IMAGE',
+  TILE: 'TILE',
+  VECTOR_TILE: 'VECTOR_TILE',
+  VECTOR: 'VECTOR'
+};

src/ol/map.js

@@ -15,6 +15,7 @@ goog.require('ol.MapEventType');
 goog.require('ol.MapProperty');
 goog.require('ol.Object');
 goog.require('ol.ObjectEventType');
+goog.require('ol.PluginType');
 goog.require('ol.TileQueue');
 goog.require('ol.View');
 goog.require('ol.ViewHint');
@@ -30,15 +31,42 @@ goog.require('ol.has');
 goog.require('ol.interaction');
 goog.require('ol.layer.Group');
 goog.require('ol.obj');
-goog.require('ol.renderer.Map');
+goog.require('ol.plugins');
 goog.require('ol.renderer.Type');
+goog.require('ol.renderer.canvas.ImageLayer');
 goog.require('ol.renderer.canvas.Map');
+goog.require('ol.renderer.canvas.TileLayer');
+goog.require('ol.renderer.canvas.VectorLayer');
+goog.require('ol.renderer.canvas.VectorTileLayer');
+goog.require('ol.renderer.webgl.ImageLayer');
 goog.require('ol.renderer.webgl.Map');
+goog.require('ol.renderer.webgl.TileLayer');
+goog.require('ol.renderer.webgl.VectorLayer');
 goog.require('ol.size');
 goog.require('ol.structs.PriorityQueue');
 goog.require('ol.transform');
 
 
+if (ol.ENABLE_CANVAS) {
+  ol.plugins.register(ol.PluginType.MAP_RENDERER, ol.renderer.canvas.Map);
+  ol.plugins.registerMultiple(ol.PluginType.LAYER_RENDERER, [
+    ol.renderer.canvas.ImageLayer,
+    ol.renderer.canvas.TileLayer,
+    ol.renderer.canvas.VectorLayer,
+    ol.renderer.canvas.VectorTileLayer
+  ]);
+}
+
+if (ol.ENABLE_WEBGL) {
+  ol.plugins.register(ol.PluginType.MAP_RENDERER, ol.renderer.webgl.Map);
+  ol.plugins.registerMultiple(ol.PluginType.LAYER_RENDERER, [
+    ol.renderer.webgl.ImageLayer,
+    ol.renderer.webgl.TileLayer,
+    ol.renderer.webgl.VectorLayer
+  ]);
+}
+
+
 /**
  * @const
  * @type {string}
@@ -330,7 +358,7 @@ ol.Map = function(options) {
    * @type {ol.renderer.Map}
    * @private
    */
-  this.renderer_ = new /** @type {Function} */ (optionsInternal.rendererConstructor)(this.viewport_, this);
+  this.renderer_ = optionsInternal.mapRendererPlugin.create(this.viewport_, this);
 
   /**
    * @type {function(Event)|undefined}
@@ -1441,11 +1469,6 @@ ol.Map.createOptionsInternal = function(options) {
   values[ol.MapProperty.VIEW] = options.view !== undefined ?
     options.view : new ol.View();
 
-  /**
-   * @type {function(new: ol.renderer.Map, Element, ol.Map)}
-   */
-  var rendererConstructor = ol.renderer.Map;
-
   /**
    * @type {Array.<ol.renderer.Type>}
    */
@@ -1465,23 +1488,27 @@ ol.Map.createOptionsInternal = function(options) {
     rendererTypes = ol.DEFAULT_RENDERER_TYPES;
   }
 
-  var i, ii;
+  /**
-  for (i = 0, ii = rendererTypes.length; i < ii; ++i) {
+   * @type {olx.MapRendererPlugin}
-    /** @type {ol.renderer.Type} */
+   */
+  var mapRendererPlugin;
+
+  var mapRendererPlugins = ol.plugins.getMapRendererPlugins();
+  outer: for (var i = 0, ii = rendererTypes.length; i < ii; ++i) {
     var rendererType = rendererTypes[i];
-    if (ol.ENABLE_CANVAS && rendererType == ol.renderer.Type.CANVAS) {
+    for (var j = 0, jj = mapRendererPlugins.length; j < jj; ++j) {
-      if (ol.has.CANVAS) {
+      var candidate = mapRendererPlugins[j];
-        rendererConstructor = ol.renderer.canvas.Map;
+      if (candidate.handles(rendererType)) {
-        break;
+        mapRendererPlugin = candidate;
-      }
+        break outer;
-    } else if (ol.ENABLE_WEBGL && rendererType == ol.renderer.Type.WEBGL) {
-      if (ol.has.WEBGL) {
-        rendererConstructor = ol.renderer.webgl.Map;
-        break;
       }
     }
   }
 
+  if (!mapRendererPlugin) {
+    throw new Error('Unable to create a map renderer for types: ' +  rendererTypes.join(', '));
+  }
+
   var controls;
   if (options.controls !== undefined) {
     if (Array.isArray(options.controls)) {
@@ -1527,7 +1554,7 @@ ol.Map.createOptionsInternal = function(options) {
     keyboardEventTarget: keyboardEventTarget,
     logos: logos,
     overlays: overlays,
-    rendererConstructor: rendererConstructor,
+    mapRendererPlugin: mapRendererPlugin,
     values: values
   };
 

src/ol/plugins.js

@@ -0,0 +1,73 @@
+goog.provide('ol.plugins');
+
+goog.require('ol.PluginType');
+
+/**
+ * The registry of map renderer plugins.
+ * @type {Array<olx.MapRendererPlugin>}
+ * @private
+ */
+ol.plugins.mapRendererPlugins_ = [];
+
+
+/**
+ * Get all registered map renderer plugins.
+ * @return {Array<olx.MapRendererPlugin>} The registered map renderer plugins.
+ */
+ol.plugins.getMapRendererPlugins = function() {
+  return ol.plugins.mapRendererPlugins_;
+};
+
+
+/**
+ * The registry of layer renderer plugins.
+ * @type {Array<olx.LayerRendererPlugin>}
+ * @private
+ */
+ol.plugins.layerRendererPlugins_ = [];
+
+
+/**
+ * Get all registered layer renderer plugins.
+ * @return {Array<olx.LayerRendererPlugin>} The registered layer renderer plugins.
+ */
+ol.plugins.getLayerRendererPlugins = function() {
+  return ol.plugins.layerRendererPlugins_;
+};
+
+
+/**
+ * Register a plugin.
+ * @param {ol.PluginType} type The plugin type.
+ * @param {*} plugin The plugin.
+ */
+ol.plugins.register = function(type, plugin) {
+  var plugins;
+  switch (type) {
+    case ol.PluginType.MAP_RENDERER: {
+      plugins = ol.plugins.mapRendererPlugins_;
+      plugins.push(/** @type {olx.MapRendererPlugin} */ (plugin));
+      break;
+    }
+    case ol.PluginType.LAYER_RENDERER: {
+      plugins = ol.plugins.layerRendererPlugins_;
+      plugins.push(/** @type {olx.LayerRendererPlugin} */ (plugin));
+      break;
+    }
+    default: {
+      throw new Error('Unsupported plugin type: ' + type);
+    }
+  }
+};
+
+
+/**
+ * Register multiple plugins.
+ * @param {ol.PluginType} type The plugin type.
+ * @param {Array} plugins The plugins.
+ */
+ol.plugins.registerMultiple = function(type, plugins) {
+  for (var i = 0, ii = plugins.length; i < ii; ++i) {
+    ol.plugins.register(type, plugins[i]);
+  }
+};

src/ol/plugintype.js

@@ -0,0 +1,11 @@
+goog.provide('ol.PluginType');
+
+/**
+ * A plugin type used when registering a plugin.  The supported plugin types are
+ * 'MAP_RENDERER', and 'LAYER_RENDERER'.
+ * @enum {string}
+ */
+ol.PluginType = {
+  MAP_RENDERER: 'MAP_RENDERER',
+  LAYER_RENDERER: 'LAYER_RENDERER'
+};

src/ol/renderer/canvas/imagelayer.js

@@ -1,8 +1,10 @@
 goog.provide('ol.renderer.canvas.ImageLayer');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.ViewHint');
 goog.require('ol.extent');
+goog.require('ol.renderer.Type');
 goog.require('ol.renderer.canvas.IntermediateCanvas');
 goog.require('ol.transform');
 
@@ -11,6 +13,7 @@ goog.require('ol.transform');
  * @constructor
  * @extends {ol.renderer.canvas.IntermediateCanvas}
  * @param {ol.layer.Image} imageLayer Single image layer.
+ * @api
  */
 ol.renderer.canvas.ImageLayer = function(imageLayer) {
 
@@ -32,6 +35,28 @@ ol.renderer.canvas.ImageLayer = function(imageLayer) {
 ol.inherits(ol.renderer.canvas.ImageLayer, ol.renderer.canvas.IntermediateCanvas);
 
 
+/**
+ * Determine if this renderer handles the provided layer.
+ * @param {ol.renderer.Type} type The renderer type.
+ * @param {ol.layer.Layer} layer The candidate layer.
+ * @return {boolean} The renderer can render the layer.
+ */
+ol.renderer.canvas.ImageLayer['handles'] = function(type, layer) {
+  return type === ol.renderer.Type.CANVAS && layer.getType() === ol.LayerType.IMAGE;
+};
+
+
+/**
+ * Create a layer renderer.
+ * @param {ol.renderer.Map} mapRenderer The map renderer.
+ * @param {ol.layer.Layer} layer The layer to be rendererd.
+ * @return {ol.renderer.canvas.ImageLayer} The layer renderer.
+ */
+ol.renderer.canvas.ImageLayer['create'] = function(mapRenderer, layer) {
+  return new ol.renderer.canvas.ImageLayer(/** @type {ol.layer.Image} */ (layer));
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/renderer/canvas/map.js

@@ -22,6 +22,7 @@ goog.require('ol.source.State');
  * @extends {ol.renderer.Map}
  * @param {Element} container Container.
  * @param {ol.Map} map Map.
+ * @api
  */
 ol.renderer.canvas.Map = function(container, map) {
 
@@ -61,6 +62,27 @@ ol.renderer.canvas.Map = function(container, map) {
 ol.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
 
 
+/**
+ * Determine if this renderer handles the provided layer.
+ * @param {ol.renderer.Type} type The renderer type.
+ * @return {boolean} The renderer can render the layer.
+ */
+ol.renderer.canvas.Map['handles'] = function(type) {
+  return type === ol.renderer.Type.CANVAS;
+};
+
+
+/**
+ * Create the map renderer.
+ * @param {Element} container Container.
+ * @param {ol.Map} map Map.
+ * @return {ol.renderer.canvas.Map} The map renderer.
+ */
+ol.renderer.canvas.Map['create'] = function(container, map) {
+  return new ol.renderer.canvas.Map(container, map);
+};
+
+
 /**
  * @param {ol.render.EventType} type Event type.
  * @param {olx.FrameState} frameState Frame state.

src/ol/renderer/canvas/tilelayer.js

@@ -3,12 +3,14 @@
 goog.provide('ol.renderer.canvas.TileLayer');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.ViewHint');
 goog.require('ol.array');
 goog.require('ol.dom');
 goog.require('ol.extent');
+goog.require('ol.renderer.Type');
 goog.require('ol.renderer.canvas.IntermediateCanvas');
 goog.require('ol.transform');
 
@@ -17,6 +19,7 @@ goog.require('ol.transform');
  * @constructor
  * @extends {ol.renderer.canvas.IntermediateCanvas}
  * @param {ol.layer.Tile|ol.layer.VectorTile} tileLayer Tile layer.
+ * @api
  */
 ol.renderer.canvas.TileLayer = function(tileLayer) {
 
@@ -80,6 +83,28 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
 ol.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.IntermediateCanvas);
 
 
+/**
+ * Determine if this renderer handles the provided layer.
+ * @param {ol.renderer.Type} type The renderer type.
+ * @param {ol.layer.Layer} layer The candidate layer.
+ * @return {boolean} The renderer can render the layer.
+ */
+ol.renderer.canvas.TileLayer['handles'] = function(type, layer) {
+  return type === ol.renderer.Type.CANVAS && layer.getType() === ol.LayerType.TILE;
+};
+
+
+/**
+ * Create a layer renderer.
+ * @param {ol.renderer.Map} mapRenderer The map renderer.
+ * @param {ol.layer.Layer} layer The layer to be rendererd.
+ * @return {ol.renderer.canvas.TileLayer} The layer renderer.
+ */
+ol.renderer.canvas.TileLayer['create'] = function(mapRenderer, layer) {
+  return new ol.renderer.canvas.TileLayer(/** @type {ol.layer.Tile} */ (layer));
+};
+
+
 /**
  * @private
  * @param {ol.Tile} tile Tile.

src/ol/renderer/canvas/vectorlayer.js

@@ -1,12 +1,14 @@
 goog.provide('ol.renderer.canvas.VectorLayer');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.render.EventType');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.ReplayGroup');
+goog.require('ol.renderer.Type');
 goog.require('ol.renderer.canvas.Layer');
 goog.require('ol.renderer.vector');
 
@@ -15,6 +17,7 @@ goog.require('ol.renderer.vector');
  * @constructor
  * @extends {ol.renderer.canvas.Layer}
  * @param {ol.layer.Vector} vectorLayer Vector layer.
+ * @api
  */
 ol.renderer.canvas.VectorLayer = function(vectorLayer) {
 
@@ -66,6 +69,28 @@ ol.renderer.canvas.VectorLayer = function(vectorLayer) {
 ol.inherits(ol.renderer.canvas.VectorLayer, ol.renderer.canvas.Layer);
 
 
+/**
+ * Determine if this renderer handles the provided layer.
+ * @param {ol.renderer.Type} type The renderer type.
+ * @param {ol.layer.Layer} layer The candidate layer.
+ * @return {boolean} The renderer can render the layer.
+ */
+ol.renderer.canvas.VectorLayer['handles'] = function(type, layer) {
+  return type === ol.renderer.Type.CANVAS && layer.getType() === ol.LayerType.VECTOR;
+};
+
+
+/**
+ * Create a layer renderer.
+ * @param {ol.renderer.Map} mapRenderer The map renderer.
+ * @param {ol.layer.Layer} layer The layer to be rendererd.
+ * @return {ol.renderer.canvas.VectorLayer} The layer renderer.
+ */
+ol.renderer.canvas.VectorLayer['create'] = function(mapRenderer, layer) {
+  return new ol.renderer.canvas.VectorLayer(/** @type {ol.layer.Vector} */ (layer));
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/renderer/canvas/vectortilelayer.js

@@ -1,16 +1,18 @@
 goog.provide('ol.renderer.canvas.VectorTileLayer');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.TileState');
 goog.require('ol.dom');
 goog.require('ol.extent');
+goog.require('ol.layer.VectorTileRenderType');
 goog.require('ol.proj');
 goog.require('ol.proj.Units');
-goog.require('ol.layer.VectorTileRenderType');
 goog.require('ol.render.ReplayType');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.ReplayGroup');
 goog.require('ol.render.replay');
+goog.require('ol.renderer.Type');
 goog.require('ol.renderer.canvas.TileLayer');
 goog.require('ol.renderer.vector');
 goog.require('ol.size');
@@ -21,6 +23,7 @@ goog.require('ol.transform');
  * @constructor
  * @extends {ol.renderer.canvas.TileLayer}
  * @param {ol.layer.VectorTile} layer VectorTile layer.
+ * @api
  */
 ol.renderer.canvas.VectorTileLayer = function(layer) {
 
@@ -57,6 +60,28 @@ ol.renderer.canvas.VectorTileLayer = function(layer) {
 ol.inherits(ol.renderer.canvas.VectorTileLayer, ol.renderer.canvas.TileLayer);
 
 
+/**
+ * Determine if this renderer handles the provided layer.
+ * @param {ol.renderer.Type} type The renderer type.
+ * @param {ol.layer.Layer} layer The candidate layer.
+ * @return {boolean} The renderer can render the layer.
+ */
+ol.renderer.canvas.VectorTileLayer['handles'] = function(type, layer) {
+  return type === ol.renderer.Type.CANVAS && layer.getType() === ol.LayerType.VECTOR_TILE;
+};
+
+
+/**
+ * Create a layer renderer.
+ * @param {ol.renderer.Map} mapRenderer The map renderer.
+ * @param {ol.layer.Layer} layer The layer to be rendererd.
+ * @return {ol.renderer.canvas.VectorTileLayer} The layer renderer.
+ */
+ol.renderer.canvas.VectorTileLayer['create'] = function(mapRenderer, layer) {
+  return new ol.renderer.canvas.VectorTileLayer(/** @type {ol.layer.VectorTile} */ (layer));
+};
+
+
 /**
  * @const
  * @type {!Object.<string, Array.<ol.render.ReplayType>>}

src/ol/renderer/map.js

@@ -7,6 +7,7 @@ goog.require('ol.events.EventType');
 goog.require('ol.extent');
 goog.require('ol.functions');
 goog.require('ol.layer.Layer');
+goog.require('ol.plugins');
 goog.require('ol.style');
 goog.require('ol.transform');
 
@@ -206,12 +207,24 @@ ol.renderer.Map.prototype.getLayerRenderer = function(layer) {
   if (layerKey in this.layerRenderers_) {
     return this.layerRenderers_[layerKey];
   } else {
-    var layerRenderer = layer.createRenderer(this);
+    var layerRendererPlugins = ol.plugins.getLayerRendererPlugins();
-    this.layerRenderers_[layerKey] = layerRenderer;
+    var renderer;
-    this.layerRendererListeners_[layerKey] = ol.events.listen(layerRenderer,
+    var type = this.getType();
-        ol.events.EventType.CHANGE, this.handleLayerRendererChange_, this);
+    for (var i = 0, ii = layerRendererPlugins.length; i < ii; ++i) {
-
+      var plugin = layerRendererPlugins[i];
-    return layerRenderer;
+      if (plugin.handles(type, layer)) {
+        renderer = plugin.create(this, layer);
+        break;
+      }
+    }
+    if (renderer) {
+      this.layerRenderers_[layerKey] = renderer;
+      this.layerRendererListeners_[layerKey] = ol.events.listen(renderer,
+          ol.events.EventType.CHANGE, this.handleLayerRendererChange_, this);
+    } else {
+      throw new Error('Unable to create renderer for layer: ' + layer.getType());
+    }
+    return renderer;
   }
 };
 
@@ -245,7 +258,7 @@ ol.renderer.Map.prototype.getMap = function() {
 
 /**
  * @abstract
- * @return {string} Type
+ * @return {ol.renderer.Type} Type
  */
 ol.renderer.Map.prototype.getType = function() {};
 

src/ol/renderer/webgl/imagelayer.js

@@ -1,10 +1,12 @@
 goog.provide('ol.renderer.webgl.ImageLayer');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.functions');
+goog.require('ol.renderer.Type');
 goog.require('ol.renderer.webgl.Layer');
 goog.require('ol.source.ImageVector');
 goog.require('ol.transform');
@@ -19,6 +21,7 @@ if (ol.ENABLE_WEBGL) {
    * @extends {ol.renderer.webgl.Layer}
    * @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
    * @param {ol.layer.Image} imageLayer Tile layer.
+   * @api
    */
   ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) {
 
@@ -47,6 +50,31 @@ if (ol.ENABLE_WEBGL) {
   ol.inherits(ol.renderer.webgl.ImageLayer, ol.renderer.webgl.Layer);
 
 
+  /**
+   * Determine if this renderer handles the provided layer.
+   * @param {ol.renderer.Type} type The renderer type.
+   * @param {ol.layer.Layer} layer The candidate layer.
+   * @return {boolean} The renderer can render the layer.
+   */
+  ol.renderer.webgl.ImageLayer['handles'] = function(type, layer) {
+    return type === ol.renderer.Type.WEBGL && layer.getType() === ol.LayerType.IMAGE;
+  };
+
+
+  /**
+   * Create a layer renderer.
+   * @param {ol.renderer.Map} mapRenderer The map renderer.
+   * @param {ol.layer.Layer} layer The layer to be rendererd.
+   * @return {ol.renderer.webgl.ImageLayer} The layer renderer.
+   */
+  ol.renderer.webgl.ImageLayer['create'] = function(mapRenderer, layer) {
+    return new ol.renderer.webgl.ImageLayer(
+      /** @type {ol.renderer.webgl.Map} */ (mapRenderer),
+      /** @type {ol.layer.Image} */ (layer)
+    );
+  };
+
+
   /**
    * @param {ol.ImageBase} image Image.
    * @private

src/ol/renderer/webgl/map.js

@@ -28,6 +28,7 @@ if (ol.ENABLE_WEBGL) {
    * @extends {ol.renderer.Map}
    * @param {Element} container Container.
    * @param {ol.Map} map Map.
+   * @api
    */
   ol.renderer.webgl.Map = function(container, map) {
     ol.renderer.Map.call(this, container, map);
@@ -162,6 +163,27 @@ if (ol.ENABLE_WEBGL) {
   ol.inherits(ol.renderer.webgl.Map, ol.renderer.Map);
 
 
+  /**
+   * Determine if this renderer handles the provided layer.
+   * @param {ol.renderer.Type} type The renderer type.
+   * @return {boolean} The renderer can render the layer.
+   */
+  ol.renderer.webgl.Map['handles'] = function(type) {
+    return type === ol.renderer.Type.WEBGL;
+  };
+
+
+  /**
+   * Create the map renderer.
+   * @param {Element} container Container.
+   * @param {ol.Map} map Map.
+   * @return {ol.renderer.webgl.Map} The map renderer.
+   */
+  ol.renderer.webgl.Map['create'] = function(container, map) {
+    return new ol.renderer.webgl.Map(container, map);
+  };
+
+
   /**
    * @param {ol.Tile} tile Tile.
    * @param {ol.Size} tileSize Tile size.

src/ol/renderer/webgl/tilelayer.js

@@ -4,11 +4,13 @@
 goog.provide('ol.renderer.webgl.TileLayer');
 
 goog.require('ol');
-goog.require('ol.TileState');
+goog.require('ol.LayerType');
 goog.require('ol.TileRange');
+goog.require('ol.TileState');
 goog.require('ol.array');
 goog.require('ol.extent');
 goog.require('ol.math');
+goog.require('ol.renderer.Type');
 goog.require('ol.renderer.webgl.Layer');
 goog.require('ol.renderer.webgl.tilelayershader');
 goog.require('ol.size');
@@ -24,6 +26,7 @@ if (ol.ENABLE_WEBGL) {
    * @extends {ol.renderer.webgl.Layer}
    * @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
    * @param {ol.layer.Tile} tileLayer Tile layer.
+   * @api
    */
   ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
 
@@ -86,6 +89,31 @@ if (ol.ENABLE_WEBGL) {
   ol.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer);
 
 
+  /**
+   * Determine if this renderer handles the provided layer.
+   * @param {ol.renderer.Type} type The renderer type.
+   * @param {ol.layer.Layer} layer The candidate layer.
+   * @return {boolean} The renderer can render the layer.
+   */
+  ol.renderer.webgl.TileLayer['handles'] = function(type, layer) {
+    return type === ol.renderer.Type.WEBGL && layer.getType() === ol.LayerType.TILE;
+  };
+
+
+  /**
+   * Create a layer renderer.
+   * @param {ol.renderer.Map} mapRenderer The map renderer.
+   * @param {ol.layer.Layer} layer The layer to be rendererd.
+   * @return {ol.renderer.webgl.TileLayer} The layer renderer.
+   */
+  ol.renderer.webgl.TileLayer['create'] = function(mapRenderer, layer) {
+    return new ol.renderer.webgl.TileLayer(
+      /** @type {ol.renderer.webgl.Map} */ (mapRenderer),
+      /** @type {ol.layer.Tile} */ (layer)
+    );
+  };
+
+
   /**
    * @inheritDoc
    */

src/ol/renderer/webgl/vectorlayer.js

@@ -1,9 +1,11 @@
 goog.provide('ol.renderer.webgl.VectorLayer');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.ViewHint');
 goog.require('ol.extent');
 goog.require('ol.render.webgl.ReplayGroup');
+goog.require('ol.renderer.Type');
 goog.require('ol.renderer.vector');
 goog.require('ol.renderer.webgl.Layer');
 goog.require('ol.transform');
@@ -16,6 +18,7 @@ if (ol.ENABLE_WEBGL) {
    * @extends {ol.renderer.webgl.Layer}
    * @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
    * @param {ol.layer.Vector} vectorLayer Vector layer.
+   * @api
    */
   ol.renderer.webgl.VectorLayer = function(mapRenderer, vectorLayer) {
 
@@ -68,6 +71,31 @@ if (ol.ENABLE_WEBGL) {
   ol.inherits(ol.renderer.webgl.VectorLayer, ol.renderer.webgl.Layer);
 
 
+  /**
+   * Determine if this renderer handles the provided layer.
+   * @param {ol.renderer.Type} type The renderer type.
+   * @param {ol.layer.Layer} layer The candidate layer.
+   * @return {boolean} The renderer can render the layer.
+   */
+  ol.renderer.webgl.VectorLayer['handles'] = function(type, layer) {
+    return type === ol.renderer.Type.WEBGL && layer.getType() === ol.LayerType.VECTOR;
+  };
+
+
+  /**
+   * Create a layer renderer.
+   * @param {ol.renderer.Map} mapRenderer The map renderer.
+   * @param {ol.layer.Layer} layer The layer to be rendererd.
+   * @return {ol.renderer.webgl.VectorLayer} The layer renderer.
+   */
+  ol.renderer.webgl.VectorLayer['create'] = function(mapRenderer, layer) {
+    return new ol.renderer.webgl.VectorLayer(
+      /** @type {ol.renderer.webgl.Map} */ (mapRenderer),
+      /** @type {ol.layer.Vector} */ (layer)
+    );
+  };
+
+
   /**
    * @inheritDoc
    */

src/ol/typedefs.js

@@ -370,8 +370,7 @@ ol.LRUCacheEntry;
  *            keyboardEventTarget: (Element|Document),
  *            logos: (Object.<string, (string|Element)>),
  *            overlays: ol.Collection.<ol.Overlay>,
- *            rendererConstructor:
+ *            mapRendererPlugin: olx.MapRendererPlugin,
- *                function(new: ol.renderer.Map, Element, ol.Map),
  *            values: Object.<string, *>}}
  */
 ol.MapOptionsInternal;