Merge pull request #6855 from tschaub/pluggable

Pluggable renderers

doc/tutorials/closure.md

@@ -124,7 +124,7 @@ goog.require('ol.source.OSM');
 
 
 /**
- * @type {ol.Map}
+ * @type {ol.PluggableMap}
  */
 app.map = new ol.Map({
   target: 'map',

examples/icon-sprite-webgl.js

@@ -80,7 +80,7 @@ var vector = new ol.layer.Vector({
 });
 
 var map = new ol.Map({
-  renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({

examples/layer-clipping-webgl.js

@@ -19,7 +19,7 @@ if (!ol.has.WEBGL) {
 
   var map = new ol.Map({
     layers: [osm],
-    renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     target: 'map',
     controls: ol.control.defaults({
       attributionOptions: /** @type {olx.control.AttributionOptions} */ ({

examples/side-by-side.js

@@ -22,7 +22,7 @@ var map1 = new ol.Map({
 if (ol.has.WEBGL) {
   var map2 = new ol.Map({
     target: 'webglMap',
-    renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     layers: [layer],
     view: view
   });

examples/symbol-atlas-webgl.js

@@ -107,7 +107,7 @@ var vector = new ol.layer.Vector({
 });
 
 var map = new ol.Map({
-  renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({

examples/zoomslider.js

@@ -9,7 +9,7 @@ goog.require('ol.source.OSM');
  * Helper method for map-creation.
  *
  * @param {string} divId The id of the div for the map.
- * @return {ol.Map} The ol.Map instance.
+ * @return {ol.PluggableMap} The ol.Map instance.
  */
 var createMap = function(divId) {
   var source, layer, map, zoomslider;

externs/oli.js

@@ -181,7 +181,7 @@ oli.MapEvent = function() {};
 
 
 /**
- * @type {ol.Map}
+ * @type {ol.PluggableMap}
  */
 oli.MapEvent.prototype.map;
 
@@ -229,7 +229,7 @@ oli.control.Control = function() {};
 
 
 /**
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @return {undefined} Undefined.
  */
 oli.control.Control.prototype.setMap = function(map) {};

externs/olx.js

@@ -109,7 +109,7 @@ olx.LogoOptions.prototype.src;
 
 
 /**
- * @typedef {{map: (ol.Map|undefined),
+ * @typedef {{map: (ol.PluggableMap|undefined),
  *     maxLines: (number|undefined),
  *     strokeStyle: (ol.style.Stroke|undefined),
  *     targetSize: (number|undefined),
@@ -126,7 +126,7 @@ olx.GraticuleOptions;
 
 /**
  * Reference to an `ol.Map` object.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.GraticuleOptions.prototype.map;
@@ -4011,7 +4011,7 @@ olx.layer.HeatmapOptions.prototype.zIndex;
 
 /**
  * @typedef {{opacity: (number|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     source: (ol.source.Image|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
@@ -4043,7 +4043,7 @@ olx.layer.ImageOptions.prototype.source;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.ImageOptions.prototype.map;
@@ -4095,7 +4095,7 @@ olx.layer.ImageOptions.prototype.zIndex;
  * @typedef {{opacity: (number|undefined),
  *     preload: (number|undefined),
  *     source: (ol.source.Tile|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
  *     minResolution: (number|undefined),
@@ -4136,7 +4136,7 @@ olx.layer.TileOptions.prototype.source;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.TileOptions.prototype.map;
@@ -4199,7 +4199,7 @@ olx.layer.TileOptions.prototype.zIndex;
  *     opacity: (number|undefined),
  *     renderBuffer: (number|undefined),
  *     source: (ol.source.Vector|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
@@ -4224,7 +4224,7 @@ olx.layer.VectorOptions.prototype.renderOrder;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.VectorOptions.prototype.map;
@@ -4330,7 +4330,7 @@ olx.layer.VectorOptions.prototype.zIndex;
 
 /**
  * @typedef {{extent: (ol.Extent|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined),
  *     opacity: (number|undefined),
@@ -4392,7 +4392,7 @@ olx.layer.VectorTileOptions.prototype.renderOrder;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.VectorTileOptions.prototype.map;
@@ -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.PluggableMap):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.PluggableMap):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;

externs/readme.md

@@ -53,7 +53,7 @@ For custom subclasses in applications, which can be created using `ol.inherits`,
 oli.control.Control = function() {};
 
 /**
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @return {undefined} Undefined.
  */
 oli.control.Control.prototype.setMap = function(map) {};
@@ -74,7 +74,7 @@ ol.control.Control = function(options) {
 
 /**
  * Application subclasses may override this.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @api
  */
 ol.control.Control.prototype.setMap = function(map) {

src/ol/canvasmap.js

@@ -0,0 +1,86 @@
+goog.provide('ol.CanvasMap');
+
+goog.require('ol');
+goog.require('ol.PluggableMap');
+goog.require('ol.PluginType');
+goog.require('ol.control');
+goog.require('ol.interaction');
+goog.require('ol.obj');
+goog.require('ol.plugins');
+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');
+
+
+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
+]);
+
+
+/**
+ * @classdesc
+ * The map is the core component of OpenLayers. For a map to render, a view,
+ * one or more layers, and a target container are needed:
+ *
+ *     var map = new ol.CanvasMap({
+ *       view: new ol.View({
+ *         center: [0, 0],
+ *         zoom: 1
+ *       }),
+ *       layers: [
+ *         new ol.layer.Tile({
+ *           source: new ol.source.OSM()
+ *         })
+ *       ],
+ *       target: 'map'
+ *     });
+ *
+ * The above snippet creates a map using a {@link ol.layer.Tile} to display
+ * {@link ol.source.OSM} OSM data and render it to a DOM element with the
+ * id `map`.
+ *
+ * The constructor places a viewport container (with CSS class name
+ * `ol-viewport`) in the target element (see `getViewport()`), and then two
+ * further elements within the viewport: one with CSS class name
+ * `ol-overlaycontainer-stopevent` for controls and some overlays, and one with
+ * CSS class name `ol-overlaycontainer` for other overlays (see the `stopEvent`
+ * option of {@link ol.Overlay} for the difference). The map itself is placed in
+ * a further element within the viewport.
+ *
+ * Layers are stored as a `ol.Collection` in layerGroups. A top-level group is
+ * provided by the library. This is what is accessed by `getLayerGroup` and
+ * `setLayerGroup`. Layers entered in the options are added to this group, and
+ * `addLayer` and `removeLayer` change the layer collection in the group.
+ * `getLayers` is a convenience function for `getLayerGroup().getLayers()`.
+ * Note that `ol.layer.Group` is a subclass of `ol.layer.Base`, so layers
+ * entered in the options or added with `addLayer` can be groups, which can
+ * contain further groups, and so on.
+ *
+ * @constructor
+ * @extends {ol.PluggableMap}
+ * @param {olx.MapOptions} options Map options.
+ * @fires ol.MapBrowserEvent
+ * @fires ol.MapEvent
+ * @fires ol.render.Event#postcompose
+ * @fires ol.render.Event#precompose
+ * @api
+ */
+ol.CanvasMap = function(options) {
+  options = ol.obj.assign({}, options);
+  delete options.renderer;
+  if (!options.controls) {
+    options.controls = ol.control.defaults();
+  }
+  if (!options.interactions) {
+    options.interactions = ol.interaction.defaults();
+  }
+
+  ol.PluggableMap.call(this, options);
+};
+ol.inherits(ol.CanvasMap, ol.PluggableMap);

src/ol/control/control.js

@@ -54,7 +54,7 @@ ol.control.Control = function(options) {
 
   /**
    * @private
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    */
   this.map_ = null;
 
@@ -88,7 +88,7 @@ ol.control.Control.prototype.disposeInternal = function() {
 
 /**
  * Get the map associated with this control.
- * @return {ol.Map} Map.
+ * @return {ol.PluggableMap} Map.
  * @api
  */
 ol.control.Control.prototype.getMap = function() {
@@ -100,7 +100,7 @@ ol.control.Control.prototype.getMap = function() {
  * Remove the control from its current map and attach it to the new map.
  * Subclasses may set up event handlers to get notified about changes to
  * the map here.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @override
  * @api
  */

src/ol/control/overviewmap.js

@@ -2,7 +2,7 @@ goog.provide('ol.control.OverviewMap');
 
 goog.require('ol');
 goog.require('ol.Collection');
-goog.require('ol.Map');
+goog.require('ol.PluggableMap');
 goog.require('ol.MapEventType');
 goog.require('ol.MapProperty');
 goog.require('ol.Object');
@@ -97,10 +97,10 @@ ol.control.OverviewMap = function(opt_options) {
   this.ovmapDiv_.className = 'ol-overviewmap-map';
 
   /**
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @private
    */
-  this.ovmap_ = new ol.Map({
+  this.ovmap_ = new ol.PluggableMap({
     controls: new ol.Collection(),
     interactions: new ol.Collection(),
     view: options.view
@@ -551,7 +551,7 @@ ol.control.OverviewMap.prototype.getCollapsed = function() {
 
 /**
  * Return the overview map.
- * @return {ol.Map} Overview map.
+ * @return {ol.PluggableMap} Overview map.
  * @api
  */
 ol.control.OverviewMap.prototype.getOverviewMap = function() {

src/ol/graticule.js

@@ -24,7 +24,7 @@ ol.Graticule = function(opt_options) {
   var options = opt_options || {};
 
   /**
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @private
    */
   this.map_ = null;
@@ -469,7 +469,7 @@ ol.Graticule.prototype.getInterval_ = function(resolution) {
 
 /**
  * Get the map associated with this graticule.
- * @return {ol.Map} The map.
+ * @return {ol.PluggableMap} The map.
  * @api
  */
 ol.Graticule.prototype.getMap = function() {
@@ -642,7 +642,7 @@ ol.Graticule.prototype.updateProjectionInfo_ = function(projection) {
 /**
  * Set the map for this graticule.  The graticule will be rendered on the
  * provided map.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @api
  */
 ol.Graticule.prototype.setMap = function(map) {

src/ol/interaction/extent.js

@@ -306,7 +306,7 @@ ol.interaction.Extent.getSegments_ = function(extent) {
 
 /**
  * @param {ol.Pixel} pixel cursor location
- * @param {ol.Map} map map
+ * @param {ol.PluggableMap} map map
  * @returns {ol.Coordinate|null} snapped vertex on extent
  * @private
  */

src/ol/interaction/interaction.js

@@ -31,7 +31,7 @@ ol.interaction.Interaction = function(options) {
 
   /**
    * @private
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    */
   this.map_ = null;
 
@@ -60,7 +60,7 @@ ol.interaction.Interaction.prototype.getActive = function() {
 
 /**
  * Get the map associated with this interaction.
- * @return {ol.Map} Map.
+ * @return {ol.PluggableMap} Map.
  * @api
  */
 ol.interaction.Interaction.prototype.getMap = function() {
@@ -83,7 +83,7 @@ ol.interaction.Interaction.prototype.setActive = function(active) {
  * Remove the interaction from its current map and attach it to the new map.
  * Subclasses may set up event handlers to get notified about changes to
  * the map here.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  */
 ol.interaction.Interaction.prototype.setMap = function(map) {
   this.map_ = map;

src/ol/interaction/modify.js

@@ -839,7 +839,7 @@ ol.interaction.Modify.prototype.handlePointerMove_ = function(evt) {
 
 /**
  * @param {ol.Pixel} pixel Pixel
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @private
  */
 ol.interaction.Modify.prototype.handlePointerAtPixel_ = function(pixel, map) {

src/ol/interaction/mousewheelzoom.js

@@ -244,7 +244,7 @@ ol.interaction.MouseWheelZoom.prototype.decrementInteractingHint_ = function() {
 
 /**
  * @private
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  */
 ol.interaction.MouseWheelZoom.prototype.handleWheelZoom_ = function(map) {
   var view = map.getView();

src/ol/interaction/select.js

@@ -304,7 +304,7 @@ ol.interaction.Select.prototype.setHitTolerance = function(hitTolerance) {
 /**
  * Remove the interaction from its current map, if any,  and attach it to a new
  * map, if any. Pass `null` to just remove the interaction from the current map.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @override
  * @api
  */

src/ol/interaction/snap.js

@@ -336,7 +336,7 @@ ol.interaction.Snap.prototype.shouldStopEvent = ol.functions.FALSE;
 /**
  * @param {ol.Pixel} pixel Pixel
  * @param {ol.Coordinate} pixelCoordinate Coordinate
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @return {ol.SnapResultType} Snap result
  */
 ol.interaction.Snap.prototype.snapTo = function(pixel, pixelCoordinate, map) {

src/ol/interaction/translate.js

@@ -185,7 +185,7 @@ ol.interaction.Translate.handleMoveEvent_ = function(event) {
  * Tests to see if the given coordinates intersects any of our selected
  * features.
  * @param {ol.Pixel} pixel Pixel coordinate to test for intersection.
- * @param {ol.Map} map Map to test the intersection on.
+ * @param {ol.PluggableMap} map Map to test the intersection on.
  * @return {ol.Feature} Returns the feature found at the specified pixel
  * coordinates.
  * @private
@@ -245,7 +245,7 @@ ol.interaction.Translate.prototype.handleActiveChanged_ = function() {
 
 
 /**
- * @param {ol.Map} oldMap Old map.
+ * @param {ol.PluggableMap} oldMap Old map.
  * @private
  */
 ol.interaction.Translate.prototype.updateState_ = function(oldMap) {

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.
- * @abstract
- * @param {ol.renderer.Map} mapRenderer The map renderer.
- * @return {ol.renderer.Layer} A layer renderer.
+ * Get the layer type (used when creating a layer renderer).
+ * @return {ol.LayerType} The layer type.
  */
-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/layer.js

@@ -161,7 +161,7 @@ ol.layer.Layer.prototype.handleSourcePropertyChange_ = function() {
  *
  * To add the layer to a map and have it managed by the map, use
  * {@link ol.Map#addLayer} instead.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @api
  */
 ol.layer.Layer.prototype.setMap = function(map) {

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/mapbrowserevent.js

@@ -13,7 +13,7 @@ goog.require('ol.MapEvent');
  * @extends {ol.MapEvent}
  * @implements {oli.MapBrowserEvent}
  * @param {string} type Event type.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {Event} browserEvent Browser event.
  * @param {boolean=} opt_dragging Is the map currently being dragged?
  * @param {?olx.FrameState=} opt_frameState Frame state.

src/ol/mapbrowsereventhandler.js

@@ -11,7 +11,7 @@ goog.require('ol.pointer.PointerEventHandler');
 
 
 /**
- * @param {ol.Map} map The map with the viewport to listen to events on.
+ * @param {ol.PluggableMap} map The map with the viewport to listen to events on.
  * @param {number|undefined} moveTolerance The minimal distance the pointer must travel to trigger a move.
  * @constructor
  * @extends {ol.events.EventTarget}
@@ -22,7 +22,7 @@ ol.MapBrowserEventHandler = function(map, moveTolerance) {
 
   /**
    * This is the element that we will listen to the real events on.
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @private
    */
   this.map_ = map;

src/ol/mapbrowserpointerevent.js

@@ -8,7 +8,7 @@ goog.require('ol.MapBrowserEvent');
  * @constructor
  * @extends {ol.MapBrowserEvent}
  * @param {string} type Event type.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {ol.pointer.PointerEvent} pointerEvent Pointer event.
  * @param {boolean=} opt_dragging Is the map currently being dragged?
  * @param {?olx.FrameState=} opt_frameState Frame state.

src/ol/mapevent.js

@@ -13,7 +13,7 @@ goog.require('ol.events.Event');
  * @extends {ol.events.Event}
  * @implements {oli.MapEvent}
  * @param {string} type Event type.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {?olx.FrameState=} opt_frameState Frame state.
  */
 ol.MapEvent = function(type, map, opt_frameState) {
@@ -22,7 +22,7 @@ ol.MapEvent = function(type, map, opt_frameState) {
 
   /**
    * The map where the event occurred.
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @api
    */
   this.map = map;

src/ol/overlay.js

@@ -166,12 +166,12 @@ ol.Overlay.prototype.getId = function() {
 
 /**
  * Get the map associated with this overlay.
- * @return {ol.Map|undefined} The map that the overlay is part of.
+ * @return {ol.PluggableMap|undefined} The map that the overlay is part of.
  * @observable
  * @api
  */
 ol.Overlay.prototype.getMap = function() {
-  return /** @type {ol.Map|undefined} */ (
+  return /** @type {ol.PluggableMap|undefined} */ (
     this.get(ol.Overlay.Property_.MAP));
 };
 
@@ -299,7 +299,7 @@ ol.Overlay.prototype.setElement = function(element) {
 
 /**
  * Set the map to be associated with this overlay.
- * @param {ol.Map|undefined} map The map that the overlay is part of.
+ * @param {ol.PluggableMap|undefined} map The map that the overlay is part of.
  * @observable
  * @api
  */

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/render/box.js

@@ -30,7 +30,7 @@ ol.render.Box = function(className) {
 
   /**
    * @private
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    */
   this.map_ = null;
 
@@ -74,7 +74,7 @@ ol.render.Box.prototype.render_ = function() {
 
 
 /**
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  */
 ol.render.Box.prototype.setMap = function(map) {
   if (this.map_) {

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

@@ -21,7 +21,8 @@ goog.require('ol.source.State');
  * @constructor
  * @extends {ol.renderer.Map}
  * @param {Element} container Container.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} 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.PluggableMap} 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/layer.js

@@ -147,7 +147,7 @@ ol.renderer.Layer.prototype.scheduleExpireCache = function(frameState, tileSourc
   if (tileSource.canExpireCache()) {
     /**
      * @param {ol.source.Tile} tileSource Tile source.
-     * @param {ol.Map} map Map.
+     * @param {ol.PluggableMap} map Map.
      * @param {olx.FrameState} frameState Frame state.
      */
     var postRenderFunction = function(tileSource, map, frameState) {

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');
 
@@ -16,7 +17,7 @@ goog.require('ol.transform');
  * @abstract
  * @extends {ol.Disposable}
  * @param {Element} container Container.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @struct
  */
 ol.renderer.Map = function(container, map) {
@@ -26,7 +27,7 @@ ol.renderer.Map = function(container, map) {
 
   /**
    * @private
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    */
   this.map_ = map;
 
@@ -77,7 +78,7 @@ ol.renderer.Map.prototype.disposeInternal = function() {
 
 
 /**
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {olx.FrameState} frameState Frame state.
  * @private
  */
@@ -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);
-    this.layerRenderers_[layerKey] = layerRenderer;
-    this.layerRendererListeners_[layerKey] = ol.events.listen(layerRenderer,
-        ol.events.EventType.CHANGE, this.handleLayerRendererChange_, this);
-
-    return layerRenderer;
+    var layerRendererPlugins = ol.plugins.getLayerRendererPlugins();
+    var renderer;
+    var type = this.getType();
+    for (var i = 0, ii = layerRendererPlugins.length; i < ii; ++i) {
+      var plugin = layerRendererPlugins[i];
+      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;
   }
 };
 
@@ -236,7 +249,7 @@ ol.renderer.Map.prototype.getLayerRenderers = function() {
 
 
 /**
- * @return {ol.Map} Map.
+ * @return {ol.PluggableMap} Map.
  */
 ol.renderer.Map.prototype.getMap = function() {
   return this.map_;
@@ -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() {};
 
@@ -283,7 +296,7 @@ ol.renderer.Map.prototype.renderFrame = ol.nullFunction;
 
 
 /**
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {olx.FrameState} frameState Frame state.
  * @private
  */

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

@@ -7,6 +7,7 @@ goog.require('ol.array');
 goog.require('ol.css');
 goog.require('ol.dom');
 goog.require('ol.events');
+goog.require('ol.has');
 goog.require('ol.layer.Layer');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
@@ -27,7 +28,8 @@ if (ol.ENABLE_WEBGL) {
    * @constructor
    * @extends {ol.renderer.Map}
    * @param {Element} container Container.
-   * @param {ol.Map} map Map.
+   * @param {ol.PluggableMap} map Map.
+   * @api
    */
   ol.renderer.webgl.Map = function(container, map) {
     ol.renderer.Map.call(this, container, map);
@@ -131,7 +133,7 @@ if (ol.ENABLE_WEBGL) {
 
 
     /**
-     * @param {ol.Map} map Map.
+     * @param {ol.PluggableMap} map Map.
      * @param {?olx.FrameState} frameState Frame state.
      * @return {boolean} false.
      * @this {ol.renderer.webgl.Map}
@@ -162,6 +164,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 ol.has.WEBGL && type === ol.renderer.Type.WEBGL;
+  };
+
+
+  /**
+   * Create the map renderer.
+   * @param {Element} container Container.
+   * @param {ol.PluggableMap} 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.
@@ -278,7 +301,7 @@ if (ol.ENABLE_WEBGL) {
 
 
   /**
-   * @param {ol.Map} map Map.
+   * @param {ol.PluggableMap} map Map.
    * @param {olx.FrameState} frameState Frame state.
    * @private
    */

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

@@ -365,13 +365,12 @@ ol.LRUCacheEntry;
 
 
 /**
- * @typedef {{controls: ol.Collection.<ol.control.Control>,
- *            interactions: ol.Collection.<ol.interaction.Interaction>,
+ * @typedef {{controls: (ol.Collection.<ol.control.Control>|undefined),
+ *            interactions: (ol.Collection.<ol.interaction.Interaction>|undefined),
  *            keyboardEventTarget: (Element|Document),
  *            logos: (Object.<string, (string|Element)>),
  *            overlays: ol.Collection.<ol.Overlay>,
- *            rendererConstructor:
- *                function(new: ol.renderer.Map, Element, ol.Map),
+ *            mapRendererPlugin: olx.MapRendererPlugin,
  *            values: Object.<string, *>}}
  */
 ol.MapOptionsInternal;
@@ -405,7 +404,7 @@ ol.Pixel;
 
 
 /**
- * @typedef {function(ol.Map, ?olx.FrameState): boolean}
+ * @typedef {function(ol.PluggableMap, ?olx.FrameState): boolean}
  */
 ol.PostRenderFunction;
 
@@ -415,7 +414,7 @@ ol.PostRenderFunction;
  * with the {@link ol.Map} as first and an optional {@link olx.FrameState} as
  * second argument. Return `true` to keep this function for the next frame,
  * `false` to remove it.
- * @typedef {function(ol.Map, ?olx.FrameState): boolean}
+ * @typedef {function(ol.PluggableMap, ?olx.FrameState): boolean}
  */
 ol.PreRenderFunction;
 

test/test-extensions.js

@@ -445,7 +445,7 @@
   /**
    * Assert that the given map resembles a reference image.
    *
-   * @param {ol.Map} map A map using the canvas renderer.
+   * @param {ol.PluggableMap} map A map using the canvas renderer.
    * @param {string} referenceImage Path to the reference image.
    * @param {number} tolerance The accepted mismatch tolerance.
    * @param {function} done A callback to indicate that the test is done.