Merge pull request #7994 from tschaub/one-default-renderer

Explicit renderer dependencies
2018-04-16 06:14:05 -06:00
parent c882c22e2f c7a10fc7b6
commit b1c741ca4a
24 changed files with 141 additions and 376 deletions
--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -2,6 +2,39 @@

 ### Next release

+#### Removal of the renderer option for maps
+
+The `renderer` option has been removed from the `Map` constructor.  The purpose of this change is to avoid bundling code in your application that you do not need.  Previously, code for both the Canvas and WebGL renderers was included in all applications - even though most people only use one renderer.  The `Map` constructor now gives you a Canvas (2D) based renderer.  If you want to try the WebGL renderer, you can import the constructor from `ol/WebGLMap`.
+
+Old code:
+```js
+import Map from 'ol/Map';
+
+const canvasMap = new Map({
+  renderer: ['canvas']
+  // other options...
+});
+
+const webglMap = new Map({
+  renderer: ['webgl']
+  // other options...
+});
+```
+
+New code:
+```js
+import Map from 'ol/Map';
+import WebGLMap from 'ol/WebGLMap';
+
+const canvasMap = new Map({
+  // options...
+});
+
+const webglMap = new WebGLMap({
+  // options...
+});
+```
+
 #### Removal of ol.FeatureStyleFunction

 The signature of the vector style function passed to the feature has changed. The function now always takes the `feature` and the `resolution` as arguments, the `feature` is no longer bound to `this`.
--- a/examples/icon-sprite-webgl.js
+++ b/examples/icon-sprite-webgl.js
@@ -1,5 +1,5 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
@@ -80,7 +80,6 @@ const vector = new VectorLayer({
 });

 const map = new Map({
-  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
  layers: [vector],
  target: document.getElementById('map'),
  view: new View({
--- a/examples/layer-clipping-webgl.js
+++ b/examples/layer-clipping-webgl.js
@@ -1,4 +1,4 @@
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import {WEBGL} from '../src/ol/has.js';
@@ -19,7 +19,6 @@ if (!WEBGL) {

  const map = new Map({
    layers: [osm],
-    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
    target: 'map',
    controls: defaultControls({
      attributionOptions: {
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -13,7 +13,4 @@ tags: "side-by-side, canvas, webgl"
 <div class="half">
  <h4>WebGL</h4>
  <div id="webglMap" class="map"></div>
-  <div id="no-webgl" class="alert alert-danger" style="display: none">
-    This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
-  </div>
 </div>
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -1,6 +1,6 @@
 import Map from '../src/ol/Map.js';
+import WebGLMap from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
-import {WEBGL} from '../src/ol/has.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';

@@ -19,17 +19,8 @@ const map1 = new Map({
  view: view
 });

-if (WEBGL) {
-  const map2 = new Map({
-    target: 'webglMap',
-    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
-    layers: [layer],
-    view: view
-  });
-} else {
-  const info = document.getElementById('no-webgl');
-  /**
-   * display error message
-   */
-  info.style.display = '';
-}
+const map2 = new WebGLMap({
+  target: 'webglMap',
+  layers: [layer],
+  view: view
+});
--- a/examples/symbol-atlas-webgl.js
+++ b/examples/symbol-atlas-webgl.js
@@ -1,5 +1,5 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
@@ -107,7 +107,6 @@ const vector = new VectorLayer({
 });

 const map = new Map({
-  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
  layers: [vector],
  target: document.getElementById('map'),
  view: new View({
--- a/src/ol/Map.js
+++ b/src/ol/Map.js
@@ -3,38 +3,14 @@
 */
 import {inherits} from './index.js';
 import PluggableMap from './PluggableMap.js';
-import PluginType from './PluginType.js';
 import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
 import {assign} from './obj.js';
-import {register, registerMultiple} from './plugins.js';
 import CanvasImageLayerRenderer from './renderer/canvas/ImageLayer.js';
 import CanvasMapRenderer from './renderer/canvas/Map.js';
 import CanvasTileLayerRenderer from './renderer/canvas/TileLayer.js';
 import CanvasVectorLayerRenderer from './renderer/canvas/VectorLayer.js';
 import CanvasVectorTileLayerRenderer from './renderer/canvas/VectorTileLayer.js';
-import WebGLImageLayerRenderer from './renderer/webgl/ImageLayer.js';
-import WebGLMapRenderer from './renderer/webgl/Map.js';
-import WebGLTileLayerRenderer from './renderer/webgl/TileLayer.js';
-import WebGLVectorLayerRenderer from './renderer/webgl/VectorLayer.js';
-
-
-register(PluginType.MAP_RENDERER, CanvasMapRenderer);
-registerMultiple(PluginType.LAYER_RENDERER, [
-  CanvasImageLayerRenderer,
-  CanvasTileLayerRenderer,
-  CanvasVectorLayerRenderer,
-  CanvasVectorTileLayerRenderer
-]);
-
-// TODO: move these to new ol-webgl package
-register(PluginType.MAP_RENDERER, WebGLMapRenderer);
-registerMultiple(PluginType.LAYER_RENDERER, [
-  WebGLImageLayerRenderer,
-  WebGLTileLayerRenderer,
-  WebGLVectorLayerRenderer
-]);
-

 /**
 * @classdesc
@@ -104,4 +80,15 @@ const Map = function(options) {

 inherits(Map, PluggableMap);

+Map.prototype.createRenderer = function() {
+  const renderer = new CanvasMapRenderer(this);
+  renderer.registerLayerRenderers([
+    CanvasImageLayerRenderer,
+    CanvasTileLayerRenderer,
+    CanvasVectorLayerRenderer,
+    CanvasVectorTileLayerRenderer
+  ]);
+  return renderer;
+};
+
 export default Map;
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -24,8 +24,6 @@ import {createEmpty, clone, createOrUpdateEmpty, equals, getForViewAndSize, isEm
 import {TRUE} from './functions.js';
 import {DEVICE_PIXEL_RATIO, TOUCH} from './has.js';
 import LayerGroup from './layer/Group.js';
-import {getMapRendererPlugins} from './plugins.js';
-import RendererType from './renderer/Type.js';
 import {hasArea} from './size.js';
 import {DROP} from './structs/PriorityQueue.js';
 import {create as createTransform, apply as applyTransform} from './transform.js';
@@ -80,7 +78,6 @@ import {create as createTransform, apply as applyTransform} from './transform.js
 * @property {module:ol/Collection~Collection.<module:ol/interaction/Interaction~Interaction>} [interactions]
 * @property {Element|Document} keyboardEventTarget
 * @property {module:ol/Collection~Collection.<module:ol/Overlay~Overlay>} overlays
- * @property {module:ol/plugins~MapRendererPlugin} mapRendererPlugin
 * @property {Object.<string, *>} values
 */

@@ -123,12 +120,6 @@ import {create as createTransform, apply as applyTransform} from './transform.js
 * Increasing this value can make it easier to click on the map.
 * @property {module:ol/Collection~Collection.<module:ol/Overlay~Overlay>|Array.<module:ol/Overlay~Overlay>} [overlays]
 * Overlays initially added to the map. By default, no overlays are added.
- * @property {module:ol/renderer/Type|Array.<module:ol/renderer/Type>} [renderer]
- * Renderer. By default, Canvas and WebGL renderers are tested for support in
- * that order, and the first supported used. Specify a
- * {@link module:ol/renderer/Type} here to use a specific renderer. Note that
- * the Canvas renderer fully supports vector data, but WebGL can only render
- * Point geometries reliably.
 * @property {Element|string} [target] The container for the map, either the
 * element itself or the `id` of the element. If not specified at construction
 * time, {@link module:ol/Map~Map#setTarget} must be called for the map to be
@@ -348,7 +339,7 @@ const PluggableMap = function(options) {
   * @type {module:ol/renderer/Map~Map}
   * @private
   */
-  this.renderer_ = optionsInternal.mapRendererPlugin['create'](this.viewport_, this);
+  this.renderer_ = this.createRenderer(this.viewport_, this);

  /**
   * @type {function(Event)|undefined}
@@ -475,6 +466,11 @@ const PluggableMap = function(options) {
 inherits(PluggableMap, BaseObject);


+PluggableMap.prototype.createRenderer = function() {
+  throw new Error('Use a map type that has a createRenderer method');
+};
+
+
 /**
 * Add the given control to the map.
 * @param {module:ol/control/Control~Control} control Control.
@@ -1400,16 +1396,6 @@ PluggableMap.prototype.unskipFeature = function(feature) {
 };


-/**
- * @type {Array.<module:ol/renderer/Type>}
- * @const
- */
-const DEFAULT_RENDERER_TYPES = [
-  RendererType.CANVAS,
-  RendererType.WEBGL
-];
-
-
 /**
 * @param {MapOptions} options Map options.
 * @return {module:ol/PluggableMap~MapOptionsInternal} Internal map options.
@@ -1440,47 +1426,6 @@ function createOptionsInternal(options) {
  values[MapProperty.VIEW] = options.view !== undefined ?
    options.view : new View();

-  /**
-   * @type {Array.<module:ol/renderer/Type>}
-   */
-  let rendererTypes;
-
-  if (options.renderer !== undefined) {
-    if (Array.isArray(options.renderer)) {
-      rendererTypes = options.renderer;
-    } else if (typeof options.renderer === 'string') {
-      rendererTypes = [options.renderer];
-    } else {
-      assert(false, 46); // Incorrect format for `renderer` option
-    }
-    if (rendererTypes.indexOf(/** @type {module:ol/renderer/Type} */ ('dom')) >= 0) {
-      rendererTypes = rendererTypes.concat(DEFAULT_RENDERER_TYPES);
-    }
-  } else {
-    rendererTypes = DEFAULT_RENDERER_TYPES;
-  }
-
-  /**
-   * @type {module:ol/plugins~MapRendererPlugin}
-   */
-  let mapRendererPlugin;
-
-  const mapRendererPlugins = getMapRendererPlugins();
-  outer: for (let i = 0, ii = rendererTypes.length; i < ii; ++i) {
-    const rendererType = rendererTypes[i];
-    for (let j = 0, jj = mapRendererPlugins.length; j < jj; ++j) {
-      const candidate = mapRendererPlugins[j];
-      if (candidate['handles'](rendererType)) {
-        mapRendererPlugin = candidate;
-        break outer;
-      }
-    }
-  }
-
-  if (!mapRendererPlugin) {
-    throw new Error('Unable to create a map renderer for types: ' +  rendererTypes.join(', '));
-  }
-
  let controls;
  if (options.controls !== undefined) {
    if (Array.isArray(options.controls)) {
@@ -1521,7 +1466,6 @@ function createOptionsInternal(options) {
    interactions: interactions,
    keyboardEventTarget: keyboardEventTarget,
    overlays: overlays,
-    mapRendererPlugin: mapRendererPlugin,
    values: values
  };

--- a/src/ol/PluginType.js
+++ b/src/ol/PluginType.js
@@ -1,13 +0,0 @@
-/**
- * @module ol/PluginType
- */
-
-/**
- * A plugin type used when registering a plugin.  The supported plugin types are
- * 'MAP_RENDERER', and 'LAYER_RENDERER'.
- * @enum {string}
- */
-export default {
-  MAP_RENDERER: 'MAP_RENDERER',
-  LAYER_RENDERER: 'LAYER_RENDERER'
-};
--- a/src/ol/CanvasMap.js
+++ b/src/ol/CanvasMap.js
@@ -1,40 +1,28 @@
 /**
- * @module ol/CanvasMap
+ * @module ol/WebGLMap
 */
 import {inherits} from './index.js';
 import PluggableMap from './PluggableMap.js';
-import PluginType from './PluginType.js';
 import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
 import {assign} from './obj.js';
-import {register, registerMultiple} from './plugins.js';
-import CanvasImageLayerRenderer from './renderer/canvas/ImageLayer.js';
-import CanvasMapRenderer from './renderer/canvas/Map.js';
-import CanvasTileLayerRenderer from './renderer/canvas/TileLayer.js';
-import CanvasVectorLayerRenderer from './renderer/canvas/VectorLayer.js';
-import CanvasVectorTileLayerRenderer from './renderer/canvas/VectorTileLayer.js';
-
-
-register(PluginType.MAP_RENDERER, CanvasMapRenderer);
-registerMultiple(PluginType.LAYER_RENDERER, [
-  CanvasImageLayerRenderer,
-  CanvasTileLayerRenderer,
-  CanvasVectorLayerRenderer,
-  CanvasVectorTileLayerRenderer
-]);
+import WebGLImageLayerRenderer from './renderer/webgl/ImageLayer.js';
+import WebGLMapRenderer from './renderer/webgl/Map.js';
+import WebGLTileLayerRenderer from './renderer/webgl/TileLayer.js';
+import WebGLVectorLayerRenderer from './renderer/webgl/VectorLayer.js';


 /**
 * @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:
+ * The WebGLMap uses WebGL for rendering map layers.  This renderer has limited
+ * support for vector data and no support for vector tiles.
 *
- *     import CanvasMap from 'ol/CanvasMap';
+ *     import WebGLMap from 'ol/WebGLMap';
 *     import TileLayer from 'ol/layer/Tile';
 *     import OSM from 'ol/source/OSM';
 *     import View from 'ol/View';
 *
- *     var map = new CanvasMap({
+ *     var map = new WebGLMap({
 *       view: new View({
 *         center: [0, 0],
 *         zoom: 1
@@ -78,9 +66,8 @@ registerMultiple(PluginType.LAYER_RENDERER, [
 * @fires module:ol/render/Event~Event#precompose
 * @api
 */
-const CanvasMap = function(options) {
+const WebGLMap = function(options) {
  options = assign({}, options);
-  delete options.renderer;
  if (!options.controls) {
    options.controls = defaultControls();
  }
@@ -91,6 +78,17 @@ const CanvasMap = function(options) {
  PluggableMap.call(this, options);
 };

-inherits(CanvasMap, PluggableMap);
+inherits(WebGLMap, PluggableMap);

-export default CanvasMap;
+
+WebGLMap.prototype.createRenderer = function() {
+  const renderer = new WebGLMapRenderer(this);
+  renderer.registerLayerRenderers([
+    WebGLImageLayerRenderer,
+    WebGLTileLayerRenderer,
+    WebGLVectorLayerRenderer
+  ]);
+  return renderer;
+};
+
+export default WebGLMap;
--- a/src/ol/control/OverviewMap.js
+++ b/src/ol/control/OverviewMap.js
@@ -3,7 +3,7 @@
 */
 import {inherits} from '../index.js';
 import Collection from '../Collection.js';
-import PluggableMap from '../PluggableMap.js';
+import Map from '../Map.js';
 import MapEventType from '../MapEventType.js';
 import MapProperty from '../MapProperty.js';
 import {getChangeEventType} from '../Object.js';
@@ -136,10 +136,10 @@ const OverviewMap = function(opt_options) {
  this.ovmapDiv_.className = 'ol-overviewmap-map';

  /**
-   * @type {module:ol/PluggableMap~PluggableMap}
+   * @type {module:ol/Map~Map}
   * @private
   */
-  this.ovmap_ = new PluggableMap({
+  this.ovmap_ = new Map({
    controls: new Collection(),
    interactions: new Collection(),
    view: options.view
--- a/src/ol/plugins.js
+++ b/src/ol/plugins.js
@@ -1,93 +0,0 @@
-/**
- * @module ol/plugins
- */
-import PluginType from './PluginType.js';
-
-
-/**
- * @typedef {Object} MapRendererPlugin
- * @property {function(module:ol/renderer/Type):boolean} handles Determine if
- * this renderer handles the provided layer.
- * @property {function(Element, module:ol/PluggableMap~PluggableMap):module:ol/renderer/Map~Map} create
- * Create the map renderer.
- */
-
-
-/**
- * @typedef {Object} LayerRendererPlugin
- * @property {function(module:ol/renderer/Type, module:ol/layer/Layer~Layer):boolean} handles
- * Determine if this renderer handles the provided layer.
- * @property {function(module:ol/renderer/Map~Map, module:ol/layer/Layer~Layer):module:ol/renderer/Layer~Layer} create
- * Create a layer renderer.
- */
-
-
-/**
- * The registry of map renderer plugins.
- * @type {Array<module:ol/plugins~MapRendererPlugin>}
- * @private
- */
-const mapRendererPlugins = [];
-
-
-/**
- * Get all registered map renderer plugins.
- * @return {Array<module:ol/plugins~MapRendererPlugin>} The registered map renderer plugins.
- */
-export function getMapRendererPlugins() {
-  return mapRendererPlugins;
-}
-
-
-/**
- * The registry of layer renderer plugins.
- * @type {Array<olx.LayerRendererPlugin>}
- * @private
- */
-const layerRendererPlugins = [];
-
-
-/**
- * Get all registered layer renderer plugins.
- * @return {Array<olx.LayerRendererPlugin>} The registered layer renderer plugins.
- */
-export function getLayerRendererPlugins() {
-  return layerRendererPlugins;
-}
-
-
-/**
- * Register a plugin.
- * @param {module:ol/PluginType~PluginType} type The plugin type.
- * @param {*} plugin The plugin.
- */
-export function register(type, plugin) {
-  let plugins;
-  switch (type) {
-    case PluginType.MAP_RENDERER: {
-      plugins = mapRendererPlugins;
-      plugins.push(/** @type {module:ol/plugins~MapRendererPlugin} */ (plugin));
-      break;
-    }
-    case PluginType.LAYER_RENDERER: {
-      plugins = layerRendererPlugins;
-      plugins.push(/** @type {olx.LayerRendererPlugin} */ (plugin));
-      break;
-    }
-    default: {
-      throw new Error('Unsupported plugin type: ' + type);
-    }
-  }
-}
-
-
-/**
- * Register multiple plugins.
- * @param {module:ol/PluginType~PluginType} type The plugin type.
- * @param {Array} plugins The plugins.
- */
-export function registerMultiple(type, plugins) {
-  for (let i = 0, ii = plugins.length; i < ii; ++i) {
-    register(type, plugins[i]);
-  }
-}
--- a/src/ol/renderer/Map.js
+++ b/src/ol/renderer/Map.js
@@ -8,7 +8,6 @@ import EventType from '../events/EventType.js';
 import {getWidth} from '../extent.js';
 import {TRUE, UNDEFINED} from '../functions.js';
 import {visibleAtResolution} from '../layer/Layer.js';
-import {getLayerRendererPlugins} from '../plugins.js';
 import {iconImageCache} from '../style.js';
 import {compose as composeTransform, invert as invertTransform, setFromArray as transformSetFromArray} from '../transform.js';

@@ -16,12 +15,10 @@ import {compose as composeTransform, invert as invertTransform, setFromArray as
 * @constructor
 * @abstract
 * @extends {module:ol/Disposable~Disposable}
- * @param {Element} container Container.
 * @param {module:ol/PluggableMap~PluggableMap} map Map.
 * @struct
 */
-const MapRenderer = function(container, map) {
-
+const MapRenderer = function(map) {
  Disposable.call(this);

  /**
@@ -42,11 +39,35 @@ const MapRenderer = function(container, map) {
   */
  this.layerRendererListeners_ = {};

+  /**
+   * @private
+   * @type {Array.<module:ol/renderer/Layer~LayerRenderer}
+   */
+  this.layerRendererConstructors_ = [];
+
 };

 inherits(MapRenderer, Disposable);


+/**
+ * Register layer renderer constructors.
+ * @param {Array.<module:ol/renderer/Layer~LayerRenderer>} constructors Layer renderers.
+ */
+MapRenderer.prototype.registerLayerRenderers = function(constructors) {
+  this.layerRendererConstructors_.push.apply(this.layerRendererConstructors_, constructors);
+};
+
+
+/**
+ * Get the registered layer renderer constructors.
+ * @return {Array.<module:ol/renderer/Layer~LayerRenderer>} Registered layer renderers.
+ */
+MapRenderer.prototype.getLayerRendererConstructors = function() {
+  return this.layerRendererConstructors_;
+};
+
+
 /**
 * @param {module:ol/PluggableMap~FrameState} frameState FrameState.
 * @protected
@@ -204,13 +225,11 @@ MapRenderer.prototype.getLayerRenderer = function(layer) {
  if (layerKey in this.layerRenderers_) {
    return this.layerRenderers_[layerKey];
  } else {
-    const layerRendererPlugins = getLayerRendererPlugins();
    let renderer;
-    const type = this.getType();
-    for (let i = 0, ii = layerRendererPlugins.length; i < ii; ++i) {
-      const plugin = layerRendererPlugins[i];
-      if (plugin['handles'](type, layer)) {
-        renderer = plugin['create'](this, layer);
+    for (let i = 0, ii = this.layerRendererConstructors_.length; i < ii; ++i) {
+      const candidate = this.layerRendererConstructors_[i];
+      if (candidate['handles'](layer)) {
+        renderer = candidate['create'](this, layer);
        break;
      }
    }
@@ -253,13 +272,6 @@ MapRenderer.prototype.getMap = function() {
 };


-/**
- * @abstract
- * @return {ol.renderer.Type} Type
- */
-MapRenderer.prototype.getType = function() {};
-
-
 /**
 * Handle changes in a layer renderer.
 * @private
--- a/src/ol/renderer/Type.js
+++ b/src/ol/renderer/Type.js
@@ -1,12 +0,0 @@
-/**
- * @module ol/renderer/Type
- */
-
-/**
- * Available renderers: `'canvas'` or `'webgl'`.
- * @enum {string}
- */
-export default {
-  CANVAS: 'canvas',
-  WEBGL: 'webgl'
-};
--- a/src/ol/renderer/canvas/ImageLayer.js
+++ b/src/ol/renderer/canvas/ImageLayer.js
@@ -10,8 +10,6 @@ import {equals} from '../../array.js';
 import {getHeight, getIntersection, getWidth, isEmpty} from '../../extent.js';
 import VectorRenderType from '../../layer/VectorRenderType.js';
 import {assign} from '../../obj.js';
-import {getLayerRendererPlugins} from '../../plugins.js';
-import RendererType from '../Type.js';
 import IntermediateCanvasRenderer from '../canvas/IntermediateCanvas.js';
 import {create as createTransform, compose as composeTransform} from '../../transform.js';

@@ -55,14 +53,13 @@ inherits(CanvasImageLayerRenderer, IntermediateCanvasRenderer);

 /**
 * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
 * @param {module:ol/layer/Layer~Layer} layer The candidate layer.
 * @return {boolean} The renderer can render the layer.
 */
-CanvasImageLayerRenderer['handles'] = function(type, layer) {
-  return type === RendererType.CANVAS && (layer.getType() === LayerType.IMAGE ||
+CanvasImageLayerRenderer['handles'] = function(layer) {
+  return layer.getType() === LayerType.IMAGE ||
    layer.getType() === LayerType.VECTOR &&
-    /** @type {module:ol/layer/Vector~VectorLayer} */ (layer).getRenderMode() === VectorRenderType.IMAGE);
+    /** @type {module:ol/layer/Vector~VectorLayer} */ (layer).getRenderMode() === VectorRenderType.IMAGE;
 };


@@ -75,10 +72,10 @@ CanvasImageLayerRenderer['handles'] = function(type, layer) {
 CanvasImageLayerRenderer['create'] = function(mapRenderer, layer) {
  const renderer = new CanvasImageLayerRenderer(/** @type {module:ol/layer/Image~ImageLayer} */ (layer));
  if (layer.getType() === LayerType.VECTOR) {
-    const candidates = getLayerRendererPlugins();
+    const candidates = mapRenderer.getLayerRendererConstructors();
    for (let i = 0, ii = candidates.length; i < ii; ++i) {
      const candidate = /** @type {Object.<string, Function>} */ (candidates[i]);
-      if (candidate !== CanvasImageLayerRenderer && candidate['handles'](RendererType.CANVAS, layer)) {
+      if (candidate !== CanvasImageLayerRenderer && candidate['handles'](layer)) {
        renderer.setVectorRenderer(candidate['create'](mapRenderer, layer));
        break;
      }
--- a/src/ol/renderer/canvas/Map.js
+++ b/src/ol/renderer/canvas/Map.js
@@ -1,8 +1,6 @@
 /**
 * @module ol/renderer/canvas/Map
 */
-// FIXME offset panning
-
 import {create as createTransform, apply as applyTransform, compose as composeTransform} from '../../transform.js';
 import {inherits} from '../../index.js';
 import {stableSort} from '../../array.js';
@@ -14,19 +12,18 @@ import RenderEventType from '../../render/EventType.js';
 import {rotateAtOffset} from '../../render/canvas.js';
 import CanvasImmediateRenderer from '../../render/canvas/Immediate.js';
 import MapRenderer, {sortByZIndex} from '../Map.js';
-import RendererType from '../Type.js';
 import SourceState from '../../source/State.js';

 /**
 * @constructor
 * @extends {ol.renderer.Map}
- * @param {Element} container Container.
 * @param {module:ol/PluggableMap~PluggableMap} map Map.
 * @api
 */
-const CanvasMapRenderer = function(container, map) {
+const CanvasMapRenderer = function(map) {
+  MapRenderer.call(this, map);

-  MapRenderer.call(this, container, map);
+  const container = map.getViewport();

  /**
   * @private
@@ -63,27 +60,6 @@ const CanvasMapRenderer = function(container, map) {
 inherits(CanvasMapRenderer, MapRenderer);


-/**
- * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
- * @return {boolean} The renderer can render the layer.
- */
-CanvasMapRenderer['handles'] = function(type) {
-  return type === RendererType.CANVAS;
-};
-
-
-/**
- * Create the map renderer.
- * @param {Element} container Container.
- * @param {module:ol/PluggableMap~PluggableMap} map Map.
- * @return {ol.renderer.canvas.Map} The map renderer.
- */
-CanvasMapRenderer['create'] = function(container, map) {
-  return new CanvasMapRenderer(container, map);
-};
-
-
 /**
 * @param {ol.render.EventType} type Event type.
 * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
@@ -127,14 +103,6 @@ CanvasMapRenderer.prototype.getTransform = function(frameState) {
 };


-/**
- * @inheritDoc
- */
-CanvasMapRenderer.prototype.getType = function() {
-  return RendererType.CANVAS;
-};
-
-
 /**
 * @inheritDoc
 */
--- a/src/ol/renderer/canvas/TileLayer.js
+++ b/src/ol/renderer/canvas/TileLayer.js
@@ -8,7 +8,6 @@ import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
 import {createCanvasContext2D} from '../../dom.js';
 import {containsExtent, createEmpty, equals, getIntersection, isEmpty} from '../../extent.js';
-import RendererType from '../Type.js';
 import IntermediateCanvasRenderer from '../canvas/IntermediateCanvas.js';
 import {create as createTransform, compose as composeTransform} from '../../transform.js';

@@ -83,12 +82,11 @@ inherits(CanvasTileLayerRenderer, IntermediateCanvasRenderer);

 /**
 * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
 * @param {module:ol/layer/Layer~Layer} layer The candidate layer.
 * @return {boolean} The renderer can render the layer.
 */
-CanvasTileLayerRenderer['handles'] = function(type, layer) {
-  return type === RendererType.CANVAS && layer.getType() === LayerType.TILE;
+CanvasTileLayerRenderer['handles'] = function(layer) {
+  return layer.getType() === LayerType.TILE;
 };


--- a/src/ol/renderer/canvas/VectorLayer.js
+++ b/src/ol/renderer/canvas/VectorLayer.js
@@ -12,7 +12,6 @@ import {buffer, createEmpty, containsExtent, getWidth} from '../../extent.js';
 import RenderEventType from '../../render/EventType.js';
 import {labelCache, rotateAtOffset} from '../../render/canvas.js';
 import CanvasReplayGroup from '../../render/canvas/ReplayGroup.js';
-import RendererType from '../Type.js';
 import CanvasLayerRenderer from '../canvas/Layer.js';
 import {defaultOrder as defaultRenderOrder, getTolerance as getRenderTolerance, getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';

@@ -88,12 +87,11 @@ inherits(CanvasVectorLayerRenderer, CanvasLayerRenderer);

 /**
 * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
 * @param {module:ol/layer/Layer~Layer} layer The candidate layer.
 * @return {boolean} The renderer can render the layer.
 */
-CanvasVectorLayerRenderer['handles'] = function(type, layer) {
-  return type === RendererType.CANVAS && layer.getType() === LayerType.VECTOR;
+CanvasVectorLayerRenderer['handles'] = function(layer) {
+  return layer.getType() === LayerType.VECTOR;
 };


--- a/src/ol/renderer/canvas/VectorTileLayer.js
+++ b/src/ol/renderer/canvas/VectorTileLayer.js
@@ -16,7 +16,6 @@ import ReplayType from '../../render/ReplayType.js';
 import {labelCache, rotateAtOffset} from '../../render/canvas.js';
 import CanvasReplayGroup, {replayDeclutter} from '../../render/canvas/ReplayGroup.js';
 import {ORDER} from '../../render/replay.js';
-import RendererType from '../Type.js';
 import CanvasTileLayerRenderer from '../canvas/TileLayer.js';
 import {getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';
 import {
@@ -99,12 +98,11 @@ inherits(CanvasVectorTileLayerRenderer, CanvasTileLayerRenderer);

 /**
 * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
 * @param {module:ol/layer/Layer~Layer} layer The candidate layer.
 * @return {boolean} The renderer can render the layer.
 */
-CanvasVectorTileLayerRenderer['handles'] = function(type, layer) {
-  return type === RendererType.CANVAS && layer.getType() === LayerType.VECTOR_TILE;
+CanvasVectorTileLayerRenderer['handles'] = function(layer) {
+  return layer.getType() === LayerType.VECTOR_TILE;
 };


--- a/src/ol/renderer/webgl/ImageLayer.js
+++ b/src/ol/renderer/webgl/ImageLayer.js
@@ -8,7 +8,6 @@ import LayerType from '../../LayerType.js';
 import ViewHint from '../../ViewHint.js';
 import {createCanvasContext2D} from '../../dom.js';
 import {getIntersection, isEmpty} from '../../extent.js';
-import RendererType from '../Type.js';
 import WebGLLayerRenderer from '../webgl/Layer.js';
 import {
  create as createTransform,
@@ -60,12 +59,11 @@ inherits(WebGLImageLayerRenderer, WebGLLayerRenderer);

 /**
 * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
 * @param {module:ol/layer/Layer~Layer} layer The candidate layer.
 * @return {boolean} The renderer can render the layer.
 */
-WebGLImageLayerRenderer['handles'] = function(type, layer) {
-  return type === RendererType.WEBGL && layer.getType() === LayerType.IMAGE;
+WebGLImageLayerRenderer['handles'] = function(layer) {
+  return layer.getType() === LayerType.IMAGE;
 };


--- a/src/ol/renderer/webgl/Map.js
+++ b/src/ol/renderer/webgl/Map.js
@@ -7,13 +7,11 @@ import {stableSort} from '../../array.js';
 import {CLASS_UNSELECTABLE} from '../../css.js';
 import {createCanvasContext2D} from '../../dom.js';
 import {listen} from '../../events.js';
-import {WEBGL} from '../../has.js';
 import {visibleAtResolution} from '../../layer/Layer.js';
 import RenderEvent from '../../render/Event.js';
 import RenderEventType from '../../render/EventType.js';
 import WebGLImmediateRenderer from '../../render/webgl/Immediate.js';
 import MapRenderer, {sortByZIndex} from '../Map.js';
-import RendererType from '../Type.js';
 import SourceState from '../../source/State.js';
 import LRUCache from '../../structs/LRUCache.js';
 import PriorityQueue from '../../structs/PriorityQueue.js';
@@ -43,12 +41,13 @@ const WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK = 1024;
 /**
 * @constructor
 * @extends {ol.renderer.Map}
- * @param {Element} container Container.
 * @param {module:ol/PluggableMap~PluggableMap} map Map.
 * @api
 */
-const WebGLMapRenderer = function(container, map) {
-  MapRenderer.call(this, container, map);
+const WebGLMapRenderer = function(map) {
+  MapRenderer.call(this, map);
+
+  const container = map.getViewport();

  /**
   * @private
@@ -182,28 +181,7 @@ inherits(WebGLMapRenderer, MapRenderer);


 /**
- * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
- * @return {boolean} The renderer can render the layer.
- */
-WebGLMapRenderer['handles'] = function(type) {
-  return WEBGL && type === RendererType.WEBGL;
-};
-
-
-/**
- * Create the map renderer.
- * @param {Element} container Container.
- * @param {module:ol/PluggableMap~PluggableMap} map Map.
- * @return {ol.renderer.webgl.Map} The map renderer.
- */
-WebGLMapRenderer['create'] = function(container, map) {
-  return new WebGLMapRenderer(container, map);
-};
-
-
-/**
- * @param {module:ol/Tile~Tile} tile Tile.
+ * @param {ol.Tile} tile Tile.
 * @param {module:ol/size~Size} tileSize Tile size.
 * @param {number} tileGutter Tile gutter.
 * @param {number} magFilter Mag filter.
@@ -366,14 +344,6 @@ WebGLMapRenderer.prototype.getTileTextureQueue = function() {
 };


-/**
- * @inheritDoc
- */
-WebGLMapRenderer.prototype.getType = function() {
-  return RendererType.WEBGL;
-};
-
-
 /**
 * @param {module:ol/events/Event~Event} event Event.
 * @protected
@@ -612,4 +582,5 @@ WebGLMapRenderer.prototype.forEachLayerAtPixel = function(pixel, frameState, cal
  }
  return undefined;
 };
+
 export default WebGLMapRenderer;
--- a/src/ol/renderer/webgl/TileLayer.js
+++ b/src/ol/renderer/webgl/TileLayer.js
@@ -11,7 +11,6 @@ import TileState from '../../TileState.js';
 import {numberSafeCompareFunction} from '../../array.js';
 import {createEmpty, intersects} from '../../extent.js';
 import {roundUpToPowerOfTwo} from '../../math.js';
-import RendererType from '../Type.js';
 import WebGLLayerRenderer from '../webgl/Layer.js';
 import {fragment, vertex} from '../webgl/tilelayershader.js';
 import Locations from '../webgl/tilelayershader/Locations.js';
@@ -97,12 +96,11 @@ inherits(WebGLTileLayerRenderer, WebGLLayerRenderer);

 /**
 * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
 * @param {module:ol/layer/Layer~Layer} layer The candidate layer.
 * @return {boolean} The renderer can render the layer.
 */
-WebGLTileLayerRenderer['handles'] = function(type, layer) {
-  return type === RendererType.WEBGL && layer.getType() === LayerType.TILE;
+WebGLTileLayerRenderer['handles'] = function(layer) {
+  return layer.getType() === LayerType.TILE;
 };


--- a/src/ol/renderer/webgl/VectorLayer.js
+++ b/src/ol/renderer/webgl/VectorLayer.js
@@ -6,7 +6,6 @@ import LayerType from '../../LayerType.js';
 import ViewHint from '../../ViewHint.js';
 import {buffer, containsExtent, createEmpty} from '../../extent.js';
 import WebGLReplayGroup from '../../render/webgl/ReplayGroup.js';
-import RendererType from '../Type.js';
 import {defaultOrder as defaultRenderOrder, getTolerance as getRenderTolerance, getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';
 import WebGLLayerRenderer from '../webgl/Layer.js';
 import {apply as applyTransform} from '../../transform.js';
@@ -72,12 +71,11 @@ inherits(WebGLVectorLayerRenderer, WebGLLayerRenderer);

 /**
 * Determine if this renderer handles the provided layer.
- * @param {ol.renderer.Type} type The renderer type.
 * @param {module:ol/layer/Layer~Layer} layer The candidate layer.
 * @return {boolean} The renderer can render the layer.
 */
-WebGLVectorLayerRenderer['handles'] = function(type, layer) {
-  return type === RendererType.WEBGL && layer.getType() === LayerType.VECTOR;
+WebGLVectorLayerRenderer['handles'] = function(layer) {
+  return layer.getType() === LayerType.VECTOR;
 };


--- a/test/spec/ol/renderer/canvas/map.test.js
+++ b/test/spec/ol/renderer/canvas/map.test.js
@@ -19,7 +19,7 @@ describe('ol.renderer.canvas.Map', function() {
      const map = new Map({
        target: document.createElement('div')
      });
-      const renderer = new CanvasMapRenderer(map.viewport_, map);
+      const renderer = new CanvasMapRenderer(map);
      expect(renderer).to.be.a(CanvasMapRenderer);
    });