Merge pull request #11724 from MoonE/tilesources-add-transition-option

Add transition option to OSM and CartoDB sources, document default

src/ol/source/CartoDB.js

@@ -27,6 +27,8 @@ import {assign} from '../obj.js';
  * See http://docs.cartodb.com/cartodb-platform/maps-api/named-maps/
  * for more detail.
  * @property {string} account If using named maps, this will be the name of the template to load.
+ * @property {number} [transition=250] Duration of the opacity transition for rendering.
+ * To disable the opacity transition, pass `transition: 0`.
  */
 
 /**
@@ -52,6 +54,7 @@ class CartoDB extends XYZ {
       maxZoom: options.maxZoom !== undefined ? options.maxZoom : 18,
       minZoom: options.minZoom,
       projection: options.projection,
+      transition: options.transition,
       wrapX: options.wrapX,
     });
 

src/ol/source/OSM.js

@@ -34,6 +34,8 @@ export const ATTRIBUTION =
  *   imageTile.getImage().src = src;
  * };
  * ```
+ * @property {number} [transition=250] Duration of the opacity transition for rendering.
+ * To disable the opacity transition, pass `transition: 0`.
  * @property {string} [url='https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'] URL template.
  * Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
  * @property {boolean} [wrapX=true] Whether to wrap the world horizontally.
@@ -68,16 +70,17 @@ class OSM extends XYZ {
 
     super({
       attributions: attributions,
+      attributionsCollapsible: false,
       cacheSize: options.cacheSize,
       crossOrigin: crossOrigin,
       imageSmoothing: options.imageSmoothing,
-      opaque: options.opaque !== undefined ? options.opaque : true,
       maxZoom: options.maxZoom !== undefined ? options.maxZoom : 19,
+      opaque: options.opaque !== undefined ? options.opaque : true,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       tileLoadFunction: options.tileLoadFunction,
+      transition: options.transition,
       url: url,
       wrapX: options.wrapX,
-      attributionsCollapsible: false,
     });
   }
 }

src/ol/source/Stamen.js

@@ -100,7 +100,7 @@ const ProviderConfig = {
  *   imageTile.getImage().src = src;
  * };
  * ```
- * @property {number} [transition] Duration of the opacity transition for rendering.
+ * @property {number} [transition=250] Duration of the opacity transition for rendering.
  * To disable the opacity transition, pass `transition: 0`.
  * @property {string} [url] URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
  * @property {boolean} [wrapX=true] Whether to wrap the world horizontally.

src/ol/source/XYZ.js

@@ -42,7 +42,7 @@ import {createXYZ, extentFromProjection} from '../tilegrid.js';
  * may be used instead of defining each one separately in the `urls` option.
  * @property {Array<string>} [urls] An array of URL templates.
  * @property {boolean} [wrapX=true] Whether to wrap the world horizontally.
- * @property {number} [transition] Duration of the opacity transition for rendering.
+ * @property {number} [transition=250] Duration of the opacity transition for rendering.
  * To disable the opacity transition, pass `transition: 0`.
  * @property {number} [zDirection=0] Indicate which resolution should be used
  * by a renderer if the view resolution does not match any resolution of the tile source.