Reworked attribution handling

examples/wmts-ign.js

@@ -1,4 +1,3 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
@@ -50,11 +49,9 @@ var ign_source = new ol.source.WMTS({
   projection: 'EPSG:3857',
   tileGrid: tileGrid,
   style: 'normal',
-  attributions: [new ol.Attribution({
+  attributions: '<a href="http://www.geoportail.fr/" target="_blank">' +
-    html: '<a href="http://www.geoportail.fr/" target="_blank">' +
         '<img src="https://api.ign.fr/geoportail/api/js/latest/' +
         'theme/geoportal/img/logo_gp.gif"></a>'
-  })]
 });
 
 var ign = new ol.layer.Tile({

examples/xyz-esri-4326-512.js

@@ -1,14 +1,9 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.XYZ');
 
-var attribution = new ol.Attribution({
-  html: 'Copyright:© 2013 ESRI, i-cubed, GeoEye'
-});
-
 var projection = ol.proj.get('EPSG:4326');
 
 // The tile size supported by the ArcGIS tile service.
@@ -22,7 +17,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.XYZ({
-        attributions: [attribution],
+        attributions: 'Copyright:© 2013 ESRI, i-cubed, GeoEye',
         maxZoom: 16,
         projection: projection,
         tileSize: tileSize,

examples/xyz-esri.js

@@ -1,4 +1,3 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Tile');
@@ -6,17 +5,13 @@ goog.require('ol.proj');
 goog.require('ol.source.XYZ');
 
 
-var attribution = new ol.Attribution({
-  html: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
-      'rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
-});
-
 var map = new ol.Map({
   target: 'map',
   layers: [
     new ol.layer.Tile({
       source: new ol.source.XYZ({
-        attributions: [attribution],
+        attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
+            'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
         url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
             'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
       })

externs/olx.js

@@ -5487,7 +5487,7 @@ olx.source.OSMOptions.prototype.wrapX;
 
 
 /**
- * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
+ * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     crossOrigin: (null|string|undefined),
  *     hidpi: (boolean|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
@@ -5503,7 +5503,7 @@ olx.source.ImageArcGISRestOptions;
 
 /**
  * Attributions.
- * @type {Array.<ol.Attribution>|undefined}
+ * @type {ol.AttributionLike|undefined}
  * @api
  */
 olx.source.ImageArcGISRestOptions.prototype.attributions;
@@ -8329,7 +8329,6 @@ olx.view.FitOptions.prototype.callback;
 
 /**
  * @typedef {{animate: boolean,
- *     attributions: Object.<string, ol.Attribution>,
  *     coordinateToPixelTransform: ol.Transform,
  *     extent: (null|ol.Extent),
  *     focus: ol.Coordinate,
@@ -8377,7 +8376,8 @@ olx.FrameState.prototype.viewState;
  * @typedef {{center: ol.Coordinate,
  *     projection: ol.proj.Projection,
  *     resolution: number,
- *     rotation: number}}
+ *     rotation: number,
+ *     zoom: number}}
  */
 olx.ViewState;
 
@@ -8410,6 +8410,14 @@ olx.ViewState.prototype.resolution;
 olx.ViewState.prototype.rotation;
 
 
+/**
+ * The current zoom level.
+ * @type {number}
+ * @api
+ */
+olx.ViewState.prototype.zoom;
+
+
 /**
  * @typedef {{initialSize: (number|undefined),
  *     maxSize: (number|undefined),

src/ol/control/attribution.js

@@ -3,11 +3,13 @@
 goog.provide('ol.control.Attribution');
 
 goog.require('ol');
-goog.require('ol.dom');
+goog.require('ol.array');
 goog.require('ol.control.Control');
 goog.require('ol.css');
+goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
+goog.require('ol.layer.Layer');
 goog.require('ol.obj');
 
 
@@ -116,24 +118,19 @@ ol.control.Attribution = function(opt_options) {
     target: options.target
   });
 
+  /**
+   * A list of currently rendered resolutions.
+   * @type {Array.<string>}
+   * @private
+   */
+  this.renderedAttributions_ = [];
+
   /**
    * @private
    * @type {boolean}
    */
   this.renderedVisible_ = true;
 
-  /**
-   * @private
-   * @type {Object.<string, Element>}
-   */
-  this.attributionElements_ = {};
-
-  /**
-   * @private
-   * @type {Object.<string, boolean>}
-   */
-  this.attributionElementRenderedVisible_ = {};
-
   /**
    * @private
    * @type {Object.<string, Element>}
@@ -145,59 +142,62 @@ ol.inherits(ol.control.Attribution, ol.control.Control);
 
 
 /**
- * @param {?olx.FrameState} frameState Frame state.
+ * Get a list of visible attributions.
- * @return {Array.<Object.<string, ol.Attribution>>} Attributions.
+ * @param {olx.FrameState} frameState Frame state.
+ * @return {Array.<string>} Attributions.
+ * @private
  */
-ol.control.Attribution.prototype.getSourceAttributions = function(frameState) {
+ol.control.Attribution.prototype.getSourceAttributions_ = function(frameState) {
-  var i, ii, j, jj, tileRanges, source, sourceAttribution,
+  /**
-      sourceAttributionKey, sourceAttributions, sourceKey;
+   * Used to determine if an attribution already exists.
-  var intersectsTileRange;
+   * @type {Object.<string, boolean>}
+   */
+  var lookup = {};
+
+  /**
+   * A list of visible attributions.
+   * @type {Array.<string>}
+   */
+  var visibleAttributions = [];
+
   var layerStatesArray = frameState.layerStatesArray;
-  /** @type {Object.<string, ol.Attribution>} */
+  var resolution = frameState.viewState.resolution;
-  var attributions = ol.obj.assign({}, frameState.attributions);
+  for (var i = 0, ii = layerStatesArray.length; i < ii; ++i) {
-  /** @type {Object.<string, ol.Attribution>} */
+    var layerState = layerStatesArray[i];
-  var hiddenAttributions = {};
+    if (!ol.layer.Layer.visibleAtResolution(layerState, resolution)) {
-  var uniqueAttributions = {};
+      continue;
-  var projection = /** @type {!ol.proj.Projection} */ (frameState.viewState.projection);
+    }
-  for (i = 0, ii = layerStatesArray.length; i < ii; i++) {
+
-    source = layerStatesArray[i].layer.getSource();
+    var source = layerState.layer.getSource();
     if (!source) {
       continue;
     }
-    sourceKey = ol.getUid(source).toString();
+
-    sourceAttributions = source.getAttributions();
+    var attributionGetter = source.getAttributions2();
-    if (!sourceAttributions) {
+    if (!attributionGetter) {
       continue;
     }
-    for (j = 0, jj = sourceAttributions.length; j < jj; j++) {
+
-      sourceAttribution = sourceAttributions[j];
+    var attributions = attributionGetter(frameState);
-      sourceAttributionKey = ol.getUid(sourceAttribution).toString();
+    if (!attributions) {
-      if (sourceAttributionKey in attributions) {
+      continue;
-        continue;
+    }
-      }
+
-      tileRanges = frameState.usedTiles[sourceKey];
+    if (Array.isArray(attributions)) {
-      if (tileRanges) {
+      for (var j = 0, jj = attributions.length; j < jj; ++j) {
-        var tileGrid = /** @type {ol.source.Tile} */ (source).getTileGridForProjection(projection);
+        if (!(attributions[j] in lookup)) {
-        intersectsTileRange = sourceAttribution.intersectsAnyTileRange(
+          visibleAttributions.push(attributions[j]);
-            tileRanges, tileGrid, projection);
+          lookup[attributions[j]] = true;
-      } else {
-        intersectsTileRange = false;
-      }
-      if (intersectsTileRange) {
-        if (sourceAttributionKey in hiddenAttributions) {
-          delete hiddenAttributions[sourceAttributionKey];
         }
-        var html = sourceAttribution.getHTML();
+      }
-        if (!(html in uniqueAttributions)) {
+    } else {
-          uniqueAttributions[html] = true;
+      if (!(attributions in lookup)) {
-          attributions[sourceAttributionKey] = sourceAttribution;
+        visibleAttributions.push(attributions);
-        }
+        lookup[attributions] = true;
-      } else {
-        hiddenAttributions[sourceAttributionKey] = sourceAttribution;
       }
     }
   }
-  return [attributions, hiddenAttributions];
+  return visibleAttributions;
 };
 
 
@@ -217,7 +217,6 @@ ol.control.Attribution.render = function(mapEvent) {
  * @param {?olx.FrameState} frameState Frame state.
  */
 ol.control.Attribution.prototype.updateElement_ = function(frameState) {
-
   if (!frameState) {
     if (this.renderedVisible_) {
       this.element.style.display = 'none';
@@ -226,65 +225,38 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
     return;
   }
 
-  var attributions = this.getSourceAttributions(frameState);
+  var attributions = this.getSourceAttributions_(frameState);
-  /** @type {Object.<string, ol.Attribution>} */
+  if (ol.array.equals(attributions, this.renderedAttributions_)) {
-  var visibleAttributions = attributions[0];
+    return;
-  /** @type {Object.<string, ol.Attribution>} */
-  var hiddenAttributions = attributions[1];
-
-  var attributionElement, attributionKey;
-  for (attributionKey in this.attributionElements_) {
-    if (attributionKey in visibleAttributions) {
-      if (!this.attributionElementRenderedVisible_[attributionKey]) {
-        this.attributionElements_[attributionKey].style.display = '';
-        this.attributionElementRenderedVisible_[attributionKey] = true;
-      }
-      delete visibleAttributions[attributionKey];
-    } else if (attributionKey in hiddenAttributions) {
-      if (this.attributionElementRenderedVisible_[attributionKey]) {
-        this.attributionElements_[attributionKey].style.display = 'none';
-        delete this.attributionElementRenderedVisible_[attributionKey];
-      }
-      delete hiddenAttributions[attributionKey];
-    } else {
-      ol.dom.removeNode(this.attributionElements_[attributionKey]);
-      delete this.attributionElements_[attributionKey];
-      delete this.attributionElementRenderedVisible_[attributionKey];
-    }
-  }
-  for (attributionKey in visibleAttributions) {
-    attributionElement = document.createElement('LI');
-    attributionElement.innerHTML =
-        visibleAttributions[attributionKey].getHTML();
-    this.ulElement_.appendChild(attributionElement);
-    this.attributionElements_[attributionKey] = attributionElement;
-    this.attributionElementRenderedVisible_[attributionKey] = true;
-  }
-  for (attributionKey in hiddenAttributions) {
-    attributionElement = document.createElement('LI');
-    attributionElement.innerHTML =
-        hiddenAttributions[attributionKey].getHTML();
-    attributionElement.style.display = 'none';
-    this.ulElement_.appendChild(attributionElement);
-    this.attributionElements_[attributionKey] = attributionElement;
   }
 
-  var renderVisible =
+  // remove everything but the logo
-      !ol.obj.isEmpty(this.attributionElementRenderedVisible_) ||
+  while (this.ulElement_.lastChild !== this.logoLi_) {
-      !ol.obj.isEmpty(frameState.logos);
+    this.ulElement_.removeChild(this.ulElement_.lastChild);
-  if (this.renderedVisible_ != renderVisible) {
-    this.element.style.display = renderVisible ? '' : 'none';
-    this.renderedVisible_ = renderVisible;
   }
-  if (renderVisible &&
+
-      ol.obj.isEmpty(this.attributionElementRenderedVisible_)) {
+  // append the attributions
+  for (var i = 0, ii = attributions.length; i < ii; ++i) {
+    var element = document.createElement('LI');
+    element.innerHTML = attributions[i];
+    this.ulElement_.appendChild(element);
+  }
+
+
+  if (attributions.length === 0 && this.renderedAttributions_.length > 0) {
     this.element.classList.add('ol-logo-only');
-  } else {
+  } else if (this.renderedAttributions_.length === 0 && attributions.length > 0) {
     this.element.classList.remove('ol-logo-only');
   }
 
-  this.insertLogos_(frameState);
+  var visible = attributions.length > 0 || !ol.obj.isEmpty(frameState.logos);
+  if (this.renderedVisible_ != visible) {
+    this.element.style.display = visible ? '' : 'none';
+    this.renderedVisible_ = visible;
+  }
 
+  this.renderedAttributions_ = attributions;
+  this.insertLogos_(frameState);
 };
 
 

src/ol/image.js

@@ -14,16 +14,13 @@ goog.require('ol.extent');
  * @param {ol.Extent} extent Extent.
  * @param {number|undefined} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
- * @param {Array.<ol.Attribution>} attributions Attributions.
  * @param {string} src Image source URI.
  * @param {?string} crossOrigin Cross origin.
  * @param {ol.ImageLoadFunctionType} imageLoadFunction Image load function.
  */
-ol.Image = function(extent, resolution, pixelRatio, attributions, src,
+ol.Image = function(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction) {
-    crossOrigin, imageLoadFunction) {
 
-  ol.ImageBase.call(this, extent, resolution, pixelRatio, ol.ImageState.IDLE,
+  ol.ImageBase.call(this, extent, resolution, pixelRatio, ol.ImageState.IDLE);
-      attributions);
 
   /**
    * @private

src/ol/imagebase.js

@@ -13,18 +13,11 @@ goog.require('ol.events.EventType');
  * @param {number|undefined} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
  * @param {ol.ImageState} state State.
- * @param {Array.<ol.Attribution>} attributions Attributions.
  */
-ol.ImageBase = function(extent, resolution, pixelRatio, state, attributions) {
+ol.ImageBase = function(extent, resolution, pixelRatio, state) {
 
   ol.events.EventTarget.call(this);
 
-  /**
-   * @private
-   * @type {Array.<ol.Attribution>}
-   */
-  this.attributions_ = attributions;
-
   /**
    * @protected
    * @type {ol.Extent}
@@ -61,14 +54,6 @@ ol.ImageBase.prototype.changed = function() {
 };
 
 
-/**
- * @return {Array.<ol.Attribution>} Attributions.
- */
-ol.ImageBase.prototype.getAttributions = function() {
-  return this.attributions_;
-};
-
-
 /**
  * @return {ol.Extent} Extent.
  */

src/ol/imagecanvas.js

@@ -11,13 +11,11 @@ goog.require('ol.ImageState');
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
- * @param {Array.<ol.Attribution>} attributions Attributions.
  * @param {HTMLCanvasElement} canvas Canvas.
  * @param {ol.ImageCanvasLoader=} opt_loader Optional loader function to
  *     support asynchronous canvas drawing.
  */
-ol.ImageCanvas = function(extent, resolution, pixelRatio, attributions,
+ol.ImageCanvas = function(extent, resolution, pixelRatio, canvas, opt_loader) {
-    canvas, opt_loader) {
 
   /**
    * Optional canvas loader function.
@@ -29,7 +27,7 @@ ol.ImageCanvas = function(extent, resolution, pixelRatio, attributions,
   var state = opt_loader !== undefined ?
     ol.ImageState.IDLE : ol.ImageState.LOADED;
 
-  ol.ImageBase.call(this, extent, resolution, pixelRatio, state, attributions);
+  ol.ImageBase.call(this, extent, resolution, pixelRatio, state);
 
   /**
    * @private

src/ol/renderer/canvas/imagelayer.js

@@ -134,7 +134,6 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
         0,
         -viewCenter[0], -viewCenter[1]);
 
-    this.updateAttributions(frameState.attributions, image.getAttributions());
     this.updateLogos(frameState, imageSource);
     this.renderedResolution = imageResolution * pixelRatio / imagePixelRatio;
   }

src/ol/renderer/canvas/vectorlayer.js

@@ -261,8 +261,6 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
   var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer());
   var vectorSource = vectorLayer.getSource();
 
-  this.updateAttributions(
-      frameState.attributions, vectorSource.getAttributions());
   this.updateLogos(frameState, vectorSource);
 
   var animating = frameState.viewHints[ol.ViewHint.ANIMATING];

src/ol/renderer/layer.js

@@ -165,23 +165,6 @@ ol.renderer.Layer.prototype.scheduleExpireCache = function(frameState, tileSourc
 };
 
 
-/**
- * @param {Object.<string, ol.Attribution>} attributionsSet Attributions
- *     set (target).
- * @param {Array.<ol.Attribution>} attributions Attributions (source).
- * @protected
- */
-ol.renderer.Layer.prototype.updateAttributions = function(attributionsSet, attributions) {
-  if (attributions) {
-    var attribution, i, ii;
-    for (i = 0, ii = attributions.length; i < ii; ++i) {
-      attribution = attributions[i];
-      attributionsSet[ol.getUid(attribution).toString()] = attribution;
-    }
-  }
-};
-
-
 /**
  * @param {olx.FrameState} frameState Frame state.
  * @param {ol.source.Source} source Source.

src/ol/renderer/webgl/imagelayer.js

@@ -190,7 +190,6 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame = function(frameState, layer
     this.image_ = image;
     this.texture = texture;
 
-    this.updateAttributions(frameState.attributions, image.getAttributions());
     this.updateLogos(frameState, imageSource);
   }
 

src/ol/renderer/webgl/vectorlayer.js

@@ -215,8 +215,6 @@ ol.renderer.webgl.VectorLayer.prototype.prepareFrame = function(frameState, laye
   var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer());
   var vectorSource = vectorLayer.getSource();
 
-  this.updateAttributions(
-      frameState.attributions, vectorSource.getAttributions());
   this.updateLogos(frameState, vectorSource);
 
   var animating = frameState.viewHints[ol.ViewHint.ANIMATING];

src/ol/reproj/image.js

@@ -100,15 +100,12 @@ ol.reproj.Image = function(sourceProj, targetProj,
 
 
   var state = ol.ImageState.LOADED;
-  var attributions = [];
 
   if (this.sourceImage_) {
     state = ol.ImageState.IDLE;
-    attributions = this.sourceImage_.getAttributions();
   }
 
-  ol.ImageBase.call(this, targetExtent, targetResolution, this.sourcePixelRatio_,
+  ol.ImageBase.call(this, targetExtent, targetResolution, this.sourcePixelRatio_, state);
-      state, attributions);
 };
 ol.inherits(ol.reproj.Image, ol.ImageBase);
 

src/ol/source/bingmaps.js

@@ -1,7 +1,6 @@
 goog.provide('ol.source.BingMaps');
 
 goog.require('ol');
-goog.require('ol.Attribution');
 goog.require('ol.TileUrlFunction');
 goog.require('ol.extent');
 goog.require('ol.net');
@@ -81,14 +80,12 @@ ol.inherits(ol.source.BingMaps, ol.source.TileImage);
  * The attribution containing a link to the Microsoft® Bing™ Maps Platform APIs’
  * Terms Of Use.
  * @const
- * @type {ol.Attribution}
+ * @type {string}
  * @api
  */
-ol.source.BingMaps.TOS_ATTRIBUTION = new ol.Attribution({
+ol.source.BingMaps.TOS_ATTRIBUTION = '<a class="ol-attribution-bing-tos" ' +
-  html: '<a class="ol-attribution-bing-tos" ' +
       'href="https://www.microsoft.com/maps/product/terms.html">' +
-      'Terms of Use</a>'
+      'Terms of Use</a>';
-});
 
 
 /**
@@ -181,31 +178,32 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse = function(response)
     var transform = ol.proj.getTransformFromProjections(
         ol.proj.get('EPSG:4326'), this.getProjection());
 
-    var attributions = resource.imageryProviders.map(function(imageryProvider) {
+    this.setAttributions(function(frameState) {
-      var html = imageryProvider.attribution;
+      var attributions = [];
-      /** @type {Object.<string, Array.<ol.TileRange>>} */
+      var zoom = frameState.viewState.zoom;
-      var tileRanges = {};
+      resource.imageryProviders.map(function(imageryProvider) {
-      imageryProvider.coverageAreas.forEach(function(coverageArea) {
+        var intersects = false;
-        var minZ = coverageArea.zoomMin;
+        var coverageAreas = imageryProvider.coverageAreas;
-        var maxZ = Math.min(coverageArea.zoomMax, maxZoom);
+        for (var i = 0, ii = coverageAreas.length; i < ii; ++i) {
-        var bbox = coverageArea.bbox;
+          var coverageArea = coverageAreas[i];
-        var epsg4326Extent = [bbox[1], bbox[0], bbox[3], bbox[2]];
+          if (zoom >= coverageArea.zoomMin && zoom <= coverageArea.zoomMax) {
-        var extent = ol.extent.applyTransform(epsg4326Extent, transform);
+            var bbox = coverageArea.bbox;
-        var tileRange, z, zKey;
+            var epsg4326Extent = [bbox[1], bbox[0], bbox[3], bbox[2]];
-        for (z = minZ; z <= maxZ; ++z) {
+            var extent = ol.extent.applyTransform(epsg4326Extent, transform);
-          zKey = z.toString();
+            if (ol.extent.intersects(extent, frameState.extent)) {
-          tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
+              intersects = true;
-          if (zKey in tileRanges) {
+              break;
-            tileRanges[zKey].push(tileRange);
+            }
-          } else {
-            tileRanges[zKey] = [tileRange];
           }
         }
+        if (intersects) {
+          attributions.push(imageryProvider.attribution);
+        }
       });
-      return new ol.Attribution({html: html, tileRanges: tileRanges});
+
+      attributions.push(ol.source.BingMaps.TOS_ATTRIBUTION);
+      return attributions;
     });
-    attributions.push(ol.source.BingMaps.TOS_ATTRIBUTION);
-    this.setAttributions(attributions);
   }
 
   this.setLogo(brandLogoUri);

src/ol/source/imagearcgisrest.js

@@ -169,7 +169,7 @@ ol.source.ImageArcGISRest.prototype.getImageInternal = function(extent, resoluti
       projection, params);
 
   this.image_ = new ol.Image(extent, resolution, pixelRatio,
-      this.getAttributions(), url, this.crossOrigin_, this.imageLoadFunction_);
+      url, this.crossOrigin_, this.imageLoadFunction_);
 
   this.renderedRevision_ = this.getRevision();
 

src/ol/source/imagecanvas.js

@@ -78,8 +78,7 @@ ol.source.ImageCanvas.prototype.getImageInternal = function(extent, resolution,
   var canvasElement = this.canvasFunction_(
       extent, resolution, pixelRatio, size, projection);
   if (canvasElement) {
-    canvas = new ol.ImageCanvas(extent, resolution, pixelRatio,
+    canvas = new ol.ImageCanvas(extent, resolution, pixelRatio, canvasElement);
-        this.getAttributions(), canvasElement);
   }
   this.canvas_ = canvas;
   this.renderedRevision_ = this.getRevision();

src/ol/source/imagemapguide.js

@@ -141,7 +141,7 @@ ol.source.ImageMapGuide.prototype.getImageInternal = function(extent, resolution
     var imageUrl = this.getUrl(this.url_, this.params_, extent, size,
         projection);
     image = new ol.Image(extent, resolution, pixelRatio,
-        this.getAttributions(), imageUrl, this.crossOrigin_,
+        imageUrl, this.crossOrigin_,
         this.imageLoadFunction_);
     ol.events.listen(image, ol.events.EventType.CHANGE,
         this.handleImageChange, this);

src/ol/source/imagestatic.js

@@ -40,8 +40,7 @@ ol.source.ImageStatic = function(options) {
    * @private
    * @type {ol.Image}
    */
-  this.image_ = new ol.Image(imageExtent, undefined, 1, this.getAttributions(),
+  this.image_ = new ol.Image(imageExtent, undefined, 1, options.url, crossOrigin, imageLoadFunction);
-      options.url, crossOrigin, imageLoadFunction);
 
   /**
    * @private

src/ol/source/imagewms.js

@@ -225,7 +225,7 @@ ol.source.ImageWMS.prototype.getImageInternal = function(extent, resolution, pix
       projection, params);
 
   this.image_ = new ol.Image(requestExtent, resolution, pixelRatio,
-      this.getAttributions(), url, this.crossOrigin_, this.imageLoadFunction_);
+      url, this.crossOrigin_, this.imageLoadFunction_);
 
   this.renderedRevision_ = this.getRevision();
 

src/ol/source/osm.js

@@ -1,7 +1,6 @@
 goog.provide('ol.source.OSM');
 
 goog.require('ol');
-goog.require('ol.Attribution');
 goog.require('ol.source.XYZ');
 
 
@@ -51,11 +50,9 @@ ol.inherits(ol.source.OSM, ol.source.XYZ);
  * The attribution containing a link to the OpenStreetMap Copyright and License
  * page.
  * @const
- * @type {ol.Attribution}
+ * @type {string}
  * @api
  */
-ol.source.OSM.ATTRIBUTION = new ol.Attribution({
+ol.source.OSM.ATTRIBUTION = '© ' +
-  html: '© ' +
       '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> ' +
-      'contributors.'
+      'contributors.';
-});

src/ol/source/raster.js

@@ -292,8 +292,7 @@ ol.source.Raster.prototype.onWorkerComplete_ = function(frameState, err, output,
     var width = Math.round(ol.extent.getWidth(extent) / resolution);
     var height = Math.round(ol.extent.getHeight(extent) / resolution);
     context = ol.dom.createCanvasContext2D(width, height);
-    this.renderedImageCanvas_ = new ol.ImageCanvas(
+    this.renderedImageCanvas_ = new ol.ImageCanvas(extent, resolution, 1, context.canvas);
-        extent, resolution, 1, this.getAttributions(), context.canvas);
   }
   context.putImageData(output, 0, 0);
 

src/ol/source/source.js

@@ -35,7 +35,13 @@ ol.source.Source = function(options) {
    * @private
    * @type {Array.<ol.Attribution>}
    */
-  this.attributions_ = ol.source.Source.toAttributionsArray_(options.attributions);
+  this.attributions_ = null;
+
+  /**
+   * @private
+   * @type {?ol.Attribution2}
+   */
+  this.attributions2_ = this.adaptAttributions_(options.attributions);
 
   /**
    * @private
@@ -60,36 +66,60 @@ ol.source.Source = function(options) {
 ol.inherits(ol.source.Source, ol.Object);
 
 /**
- * Turns various ways of defining an attribution to an array of `ol.Attributions`.
+ * Turns the attributions option into an attributions function.
- *
+ * @param {ol.AttributionLike|undefined} attributionLike The attribution option.
- * @param {ol.AttributionLike|undefined}
+ * @return {?ol.Attribution2} An attribution function (or null).
- *     attributionLike The attributions as string, array of strings,
- *     `ol.Attribution`, array of `ol.Attribution` or undefined.
- * @return {Array.<ol.Attribution>} The array of `ol.Attribution` or null if
- *     `undefined` was given.
  */
-ol.source.Source.toAttributionsArray_ = function(attributionLike) {
+ol.source.Source.prototype.adaptAttributions_ = function(attributionLike) {
-  if (typeof attributionLike === 'string') {
+  if (!attributionLike) {
-    return [new ol.Attribution({html: attributionLike})];
-  } else if (attributionLike instanceof ol.Attribution) {
-    return [attributionLike];
-  } else if (Array.isArray(attributionLike)) {
-    var len = attributionLike.length;
-    var attributions = new Array(len);
-    for (var i = 0; i < len; i++) {
-      var item = attributionLike[i];
-      if (typeof item === 'string') {
-        attributions[i] = new ol.Attribution({html: item});
-      } else {
-        attributions[i] = item;
-      }
-    }
-    return attributions;
-  } else {
     return null;
   }
-};
+  if (attributionLike instanceof ol.Attribution) {
 
+    // TODO: remove attributions_ in next major release
+    this.attributions_ = [attributionLike];
+
+    return function(frameState) {
+      return [attributionLike.getHTML()];
+    };
+  }
+  if (Array.isArray(attributionLike)) {
+    if (attributionLike[0] instanceof ol.Attribution) {
+
+      // TODO: remove attributions_ in next major release
+      this.attributions_ = attributionLike;
+
+      var attributions = attributionLike.map(function(attribution) {
+        return attribution.getHTML();
+      });
+      return function(frameState) {
+        return attributions;
+      };
+    }
+
+    // TODO: remove attributions_ in next major release
+    this.attributions_ = attributionLike.map(function(attribution) {
+      return new ol.Attribution({html: attribution});
+    });
+
+    return function(frameState) {
+      return attributionLike;
+    };
+  }
+
+  if (typeof attributionLike === 'function') {
+    return attributionLike;
+  }
+
+  // TODO: remove attributions_ in next major release
+  this.attributions_ = [
+    new ol.Attribution({html: attributionLike})
+  ];
+
+  return function(frameState) {
+    return [attributionLike];
+  };
+};
 
 /**
  * @param {ol.Coordinate} coordinate Coordinate.
@@ -115,6 +145,15 @@ ol.source.Source.prototype.getAttributions = function() {
 };
 
 
+/**
+ * Get the attribution function for the source.
+ * @return {?ol.Attribution2} Attribution function.
+ */
+ol.source.Source.prototype.getAttributions2 = function() {
+  return this.attributions2_;
+};
+
+
 /**
  * Get the logo of the source.
  * @return {string|olx.LogoOptions|undefined} Logo.
@@ -172,12 +211,12 @@ ol.source.Source.prototype.refresh = function() {
 /**
  * Set the attributions of the source.
  * @param {ol.AttributionLike|undefined} attributions Attributions.
- *     Can be passed as `string`, `Array<string>`, `{@link ol.Attribution}`,
+ *     Can be passed as `string`, `Array<string>`, `{@link ol.Attribution2}`,
- *     `Array<{@link ol.Attribution}>` or `undefined`.
+ *     or `undefined`.
  * @api
  */
 ol.source.Source.prototype.setAttributions = function(attributions) {
-  this.attributions_ = ol.source.Source.toAttributionsArray_(attributions);
+  this.attributions2_ = this.adaptAttributions_(attributions);
   this.changed();
 };
 

src/ol/source/stamen.js

@@ -1,7 +1,6 @@
 goog.provide('ol.source.Stamen');
 
 goog.require('ol');
-goog.require('ol.Attribution');
 goog.require('ol.source.OSM');
 goog.require('ol.source.XYZ');
 
@@ -44,14 +43,12 @@ ol.inherits(ol.source.Stamen, ol.source.XYZ);
 
 /**
  * @const
- * @type {Array.<ol.Attribution>}
+ * @type {Array.<string>}
  */
 ol.source.Stamen.ATTRIBUTIONS = [
-  new ol.Attribution({
+  'Map tiles by <a href="https://stamen.com/">Stamen Design</a>, ' +
-    html: 'Map tiles by <a href="https://stamen.com/">Stamen Design</a>, ' +
         'under <a href="https://creativecommons.org/licenses/by/3.0/">CC BY' +
-        ' 3.0</a>.'
+        ' 3.0</a>.',
-  }),
   ol.source.OSM.ATTRIBUTION
 ];
 

src/ol/source/tilejson.js

@@ -7,7 +7,6 @@
 goog.provide('ol.source.TileJSON');
 
 goog.require('ol');
-goog.require('ol.Attribution');
 goog.require('ol.TileUrlFunction');
 goog.require('ol.asserts');
 goog.require('ol.extent');
@@ -136,23 +135,17 @@ ol.source.TileJSON.prototype.handleTileJSONResponse = function(tileJSON) {
   this.tileUrlFunction =
       ol.TileUrlFunction.createFromTemplates(tileJSON.tiles, tileGrid);
 
-  if (tileJSON.attribution !== undefined && !this.getAttributions()) {
+  if (tileJSON.attribution !== undefined && !this.getAttributions2()) {
     var attributionExtent = extent !== undefined ?
       extent : epsg4326Projection.getExtent();
-    /** @type {Object.<string, Array.<ol.TileRange>>} */
+
-    var tileRanges = {};
+    this.setAttributions(function(frameState) {
-    var z, zKey;
+      if (ol.extent.intersects(attributionExtent, frameState.extent)) {
-    for (z = minZoom; z <= maxZoom; ++z) {
+        return [tileJSON.attribution];
-      zKey = z.toString();
+      }
-      tileRanges[zKey] =
+      return null;
-          [tileGrid.getTileRangeForExtentAndZ(attributionExtent, z)];
+    });
-    }
+
-    this.setAttributions([
-      new ol.Attribution({
-        html: tileJSON.attribution,
-        tileRanges: tileRanges
-      })
-    ]);
   }
   this.tileJSON_ = tileJSON;
   this.setState(ol.source.State.READY);

src/ol/source/tileutfgrid.js

@@ -1,7 +1,6 @@
 goog.provide('ol.source.TileUTFGrid');
 
 goog.require('ol');
-goog.require('ol.Attribution');
 goog.require('ol.Tile');
 goog.require('ol.TileState');
 goog.require('ol.TileUrlFunction');
@@ -198,20 +197,13 @@ ol.source.TileUTFGrid.prototype.handleTileJSONResponse = function(tileJSON) {
   if (tileJSON.attribution !== undefined) {
     var attributionExtent = extent !== undefined ?
       extent : epsg4326Projection.getExtent();
-    /** @type {Object.<string, Array.<ol.TileRange>>} */
+
-    var tileRanges = {};
+    this.setAttributions(function(frameState) {
-    var z, zKey;
+      if (ol.extent.intersects(attributionExtent, frameState.extent)) {
-    for (z = minZoom; z <= maxZoom; ++z) {
+        return [tileJSON.attribution];
-      zKey = z.toString();
+      }
-      tileRanges[zKey] =
+      return null;
-          [tileGrid.getTileRangeForExtentAndZ(attributionExtent, z)];
+    });
-    }
-    this.setAttributions([
-      new ol.Attribution({
-        html: tileJSON.attribution,
-        tileRanges: tileRanges
-      })
-    ]);
   }
 
   this.setState(ol.source.State.READY);

src/ol/typedefs.js

@@ -46,15 +46,25 @@ ol.AtlasManagerInfo;
  * A type that can be used to provide attribution information for data sources.
  *
  * It represents either
- * * a simple string (e.g. `'© Acme Inc.'`),
+ * * a simple string (e.g. `'© Acme Inc.'`)
- * * an array of simple strings (e.g. `['© Acme Inc.', '© Bacme Inc.']`),
+ * * an array of simple strings (e.g. `['© Acme Inc.', '© Bacme Inc.']`)
- * * an instance of `{@link ol.Attribution}`,
+ * * a function that returns a string or array of strings (`{@link ol.Attribution2}`)
- * * or an array with multiple `{@link ol.Attribution}` instances.
+ *
- * @typedef {string|Array.<string>|ol.Attribution|Array.<ol.Attribution>}
+ * Note that the `{@link ol.Attribution}` constructor is deprecated.
+ * @typedef {string|Array.<string>|ol.Attribution2|ol.Attribution|Array.<ol.Attribution>}
  */
 ol.AttributionLike;
 
 
+/**
+ * A function that returns a string or an array of strings representing source
+ * attributions.
+ *
+ * @typedef {function(olx.FrameState): (string|Array.<string>)}
+ */
+ol.Attribution2;
+
+
 /**
  * @typedef {{fillStyle: ol.ColorLike}}
  */

src/ol/view.js

@@ -781,7 +781,8 @@ ol.View.prototype.getState = function() {
     center: center.slice(),
     projection: projection !== undefined ? projection : null,
     resolution: resolution,
-    rotation: rotation
+    rotation: rotation,
+    zoom: this.getZoom()
   });
 };
 

test/spec/ol/renderer/layer.test.js

@@ -22,12 +22,10 @@ describe('ol.renderer.Layer', function() {
       var extent = [];
       var resolution = 1;
       var pixelRatio = 1;
-      var attributions = [];
       var src = '';
       var crossOrigin = '';
       imageLoadFunction = sinon.spy();
-      image = new ol.Image(extent, resolution, pixelRatio, attributions,
+      image = new ol.Image(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction);
-          src, crossOrigin, imageLoadFunction);
     });
 
     describe('load IDLE image', function() {

test/spec/ol/reproj/image.test.js

@@ -12,7 +12,7 @@ describe('ol.reproj.Image', function() {
         ol.proj.get('EPSG:3857'), ol.proj.get('EPSG:4326'),
         [-180, -85, 180, 85], 10, pixelRatio,
         function(extent, resolution, pixelRatio) {
-          return new ol.Image(extent, resolution, pixelRatio, [],
+          return new ol.Image(extent, resolution, pixelRatio,
               'data:image/gif;base64,' +
               'R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=', null,
               function(image, src) {

test/spec/ol/source/source.test.js

@@ -1,5 +1,3 @@
-
-
 goog.require('ol.Attribution');
 goog.require('ol.proj');
 goog.require('ol.source.Source');
@@ -19,68 +17,52 @@ describe('ol.source.Source', function() {
   describe('config option `attributions`', function() {
     it('accepts undefined', function() {
       var source = new ol.source.Source({});
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.be(null);
     });
+
     it('accepts a single string', function() {
       var source = new ol.source.Source({
         attributions: 'Humpty'
       });
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(1);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.eql(['Humpty']);
-      expect(attributions[0].getHTML()).to.be('Humpty');
     });
+
     it('accepts an array of strings', function() {
       var source = new ol.source.Source({
         attributions: ['Humpty', 'Dumpty']
       });
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(2);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.eql(['Humpty', 'Dumpty']);
-      expect(attributions[0].getHTML()).to.be('Humpty');
-      expect(attributions[1]).to.be.an(ol.Attribution);
-      expect(attributions[1].getHTML()).to.be('Dumpty');
     });
-    it('accepts a single ol.Attribution', function() {
+
-      var passedAttribution = new ol.Attribution({html: 'Humpty'});
+    it('accepts a function that returns a string', function() {
       var source = new ol.source.Source({
-        attributions: passedAttribution
+        attributions: function() {
+          return 'Humpty';
+        }
       });
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(1);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.be('Humpty');
-      expect(attributions[0]).to.be(passedAttribution);
     });
-    it('accepts an array of ol.Attribution', function() {
+
-      var firstAttribution = new ol.Attribution({html: 'Humpty'});
+    it('accepts a function that returns an array of strings', function() {
-      var secondAttribution = new ol.Attribution({html: 'Dumpty'});
       var source = new ol.source.Source({
-        attributions: [firstAttribution, secondAttribution]
+        attributions: function() {
+          return ['Humpty', 'Dumpty'];
+        }
       });
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(2);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.eql(['Humpty', 'Dumpty']);
-      expect(attributions[0]).to.be(firstAttribution);
-      expect(attributions[1]).to.be.an(ol.Attribution);
-      expect(attributions[1]).to.be(secondAttribution);
-    });
-    it('accepts an array with a string and an ol.Attribution', function() {
-      var attribution = new ol.Attribution({html: 'Dumpty'});
-      var source = new ol.source.Source({
-        attributions: ['Humpty', attribution]
-      });
-      var attributions = source.getAttributions();
-      expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(2);
-      expect(attributions[0]).to.be.an(ol.Attribution);
-      expect(attributions[0].getHTML()).to.be('Humpty');
-      expect(attributions[1]).to.be.an(ol.Attribution);
-      expect(attributions[1]).to.be(attribution);
     });
   });
 
@@ -96,7 +78,56 @@ describe('ol.source.Source', function() {
     });
   });
 
-  describe('#setAttributions`', function() {
+  describe('#getAttributions()', function() {
+    it('maintains backwards compatibility for string option', function() {
+      var source = new ol.source.Source({
+        attributions: 'foo'
+      });
+      var attributions = source.getAttributions();
+      expect(attributions.length).to.be(1);
+      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions[0].getHTML()).to.be('foo');
+    });
+
+    it('maintains backwards compatibility for array of strings option', function() {
+      var source = new ol.source.Source({
+        attributions: ['foo', 'bar']
+      });
+      var attributions = source.getAttributions();
+      expect(attributions.length).to.be(2);
+      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions[0].getHTML()).to.be('foo');
+      expect(attributions[1]).to.be.an(ol.Attribution);
+      expect(attributions[1].getHTML()).to.be('bar');
+    });
+
+    it('maintains backwards compatibility for ol.Attribution option', function() {
+      var source = new ol.source.Source({
+        attributions: new ol.Attribution({html: 'foo'})
+      });
+      var attributions = source.getAttributions();
+      expect(attributions.length).to.be(1);
+      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions[0].getHTML()).to.be('foo');
+    });
+
+    it('maintains backwards compatibility for array of strings option', function() {
+      var source = new ol.source.Source({
+        attributions: [
+          new ol.Attribution({html: 'foo'}),
+          new ol.Attribution({html: 'bar'})
+        ]
+      });
+      var attributions = source.getAttributions();
+      expect(attributions.length).to.be(2);
+      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions[0].getHTML()).to.be('foo');
+      expect(attributions[1]).to.be.an(ol.Attribution);
+      expect(attributions[1].getHTML()).to.be('bar');
+    });
+  });
+
+  describe('#setAttributions()', function() {
     var source = null;
 
     beforeEach(function() {
@@ -104,64 +135,51 @@ describe('ol.source.Source', function() {
         attributions: 'before'
       });
     });
+
     afterEach(function() {
       source = null;
     });
 
     it('accepts undefined', function() {
       source.setAttributions();
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.be(null);
     });
+
     it('accepts a single string', function() {
       source.setAttributions('Humpty');
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(1);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.eql(['Humpty']);
-      expect(attributions[0].getHTML()).to.be('Humpty');
     });
+
     it('accepts an array of strings', function() {
       source.setAttributions(['Humpty', 'Dumpty']);
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(2);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.eql(['Humpty', 'Dumpty']);
-      expect(attributions[0].getHTML()).to.be('Humpty');
-      expect(attributions[1]).to.be.an(ol.Attribution);
-      expect(attributions[1].getHTML()).to.be('Dumpty');
     });
-    it('accepts a single ol.Attribution', function() {
+
-      var passedAttribution = new ol.Attribution({html: 'Humpty'});
+    it('accepts a function that returns a string', function() {
-      source.setAttributions(passedAttribution);
+      source.setAttributions(function() {
-      var attributions = source.getAttributions();
+        return 'Humpty';
+      });
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(1);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.eql('Humpty');
-      expect(attributions[0]).to.be(passedAttribution);
     });
-    it('accepts an array of ol.Attribution', function() {
+
-      var firstAttribution = new ol.Attribution({html: 'Humpty'});
+    it('accepts a function that returns an array of strings', function() {
-      var secondAttribution = new ol.Attribution({html: 'Dumpty'});
+      source.setAttributions(function() {
-      source.setAttributions([firstAttribution, secondAttribution]);
+        return ['Humpty', 'Dumpty'];
-      var attributions = source.getAttributions();
+      });
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(2);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0]).to.be.an(ol.Attribution);
+      expect(attributions()).to.eql(['Humpty', 'Dumpty']);
-      expect(attributions[0]).to.be(firstAttribution);
-      expect(attributions[1]).to.be.an(ol.Attribution);
-      expect(attributions[1]).to.be(secondAttribution);
-    });
-    it('accepts an array with a string and an ol.Attribution', function() {
-      var attribution = new ol.Attribution({html: 'Dumpty'});
-      source.setAttributions(['Humpty', attribution]);
-      var attributions = source.getAttributions();
-      expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(2);
-      expect(attributions[0]).to.be.an(ol.Attribution);
-      expect(attributions[0].getHTML()).to.be('Humpty');
-      expect(attributions[1]).to.be.an(ol.Attribution);
-      expect(attributions[1]).to.be(attribution);
     });
   });
 

test/spec/ol/source/tileutfgrid.test.js

@@ -165,21 +165,15 @@ describe('ol.source.TileUTFGrid', function() {
 
     it('sets up correct attribution', function() {
       var source = getTileUTFGrid();
-      expect(source.getAttributions()).to.be(null);
+      expect(source.getAttributions2()).to.be(null);
 
       // call the handleTileJSONResponse method with our
       // locally available tileJson (from `before`)
       source.handleTileJSONResponse(tileJson);
 
-      var attributions = source.getAttributions();
+      var attributions = source.getAttributions2();
       expect(attributions).to.not.be(null);
-      expect(attributions).to.have.length(1);
+      expect(typeof attributions).to.be('function');
-      expect(attributions[0].getHTML()).to.be(tileJson.attribution);
-      var tileRanges = attributions[0].tileRanges_;
-      for (var z = tileJson.minzoom; z <= tileJson.maxzoom; z++) {
-        var key = z.toString();
-        expect(key in tileRanges).to.be(true);
-      }
     });
 
     it('sets correct state', function() {