diff --git a/examples/animation.js b/examples/animation.js index 2db3f7feab..a5a85eecbd 100644 --- a/examples/animation.js +++ b/examples/animation.js @@ -55,6 +55,9 @@ var map = new ol.Map({ }) ], renderer: exampleNS.getRendererFromQueryString(), + // Improve user experience by loading tiles while animating. Will make + // animations stutter on mobile or slow devices. + loadTilesWhileAnimating: true, target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ diff --git a/examples/bing-maps.js b/examples/bing-maps.js index 556076c7f3..99795bfb69 100644 --- a/examples/bing-maps.js +++ b/examples/bing-maps.js @@ -29,6 +29,9 @@ for (i = 0, ii = styles.length; i < ii; ++i) { var map = new ol.Map({ layers: layers, renderer: exampleNS.getRendererFromQueryString(), + // Improve user experience by loading tiles while dragging/zooming. Will make + // zooming choppy on mobile or slow devices. + loadTilesWhileInteracting: true, target: 'map', view: new ol.View({ center: [-6655.5402445057125, 6709968.258934638], diff --git a/externs/olx.js b/externs/olx.js index c1c2a45007..c2ce2a2b9f 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -23,32 +23,6 @@ olx.AttributionOptions; olx.AttributionOptions.prototype.html; -/** - * @typedef {{loadTilesWhileAnimating: (boolean|undefined), - * loadTilesWhileInteracting: (boolean|undefined)}} - * @api - */ -olx.DeviceOptions; - - -/** - * When set to false, no tiles will be loaded while animating, which improves - * responsiveness on devices with slow memory. Default is `true`. - * @type {boolean|undefined} - * @api - */ -olx.DeviceOptions.prototype.loadTilesWhileAnimating; - - -/** - * When set to false, no tiles will be loaded while interacting, which improves - * responsiveness on devices with slow memory. Default is `true`. - * @type {boolean|undefined} - * @api - */ -olx.DeviceOptions.prototype.loadTilesWhileInteracting; - - /** * @typedef {{tracking: (boolean|undefined)}} * @api @@ -194,11 +168,12 @@ olx.interaction.InteractionOptions.prototype.handleEvent; /** * Object literal with config options for the map. * @typedef {{controls: (ol.Collection.|Array.|undefined), - * deviceOptions: (olx.DeviceOptions|undefined), * pixelRatio: (number|undefined), * interactions: (ol.Collection.|Array.|undefined), * keyboardEventTarget: (Element|Document|string|undefined), * layers: (Array.|ol.Collection.|undefined), + * loadTilesWhileAnimating: (boolean|undefined), + * loadTilesWhileInteracting: (boolean|undefined), * logo: (boolean|string|olx.LogoOptions|undefined), * overlays: (ol.Collection.|Array.|undefined), * renderer: (ol.RendererType|Array.|string|undefined), @@ -218,14 +193,6 @@ olx.MapOptions; olx.MapOptions.prototype.controls; -/** - * Device options for the map. - * @type {olx.DeviceOptions|undefined} - * @api - */ -olx.MapOptions.prototype.deviceOptions; - - /** * The ratio between physical pixels and device-independent pixels (dips) on the * device. If `undefined` then it gets set by using `window.devicePixelRatio`. @@ -266,6 +233,26 @@ olx.MapOptions.prototype.keyboardEventTarget; olx.MapOptions.prototype.layers; +/** + * When set to true, tiles will be loaded during animations. This may improve + * the user experience, but can also make animations stutter on devices with + * slow memory. Default is `false`. + * @type {boolean|undefined} + * @api + */ +olx.MapOptions.prototype.loadTilesWhileAnimating; + + +/** + * When set to true, tiles will be loaded while interacting with the map. This + * may improve the user experience, but can also make map panning and zooming + * choppy on devices with slow memory. Default is `false`. + * @type {boolean|undefined} + * @api + */ +olx.MapOptions.prototype.loadTilesWhileInteracting; + + /** * The map logo. A logo to be displayed on the map at all times. If a string is * provided, it will be set as the image source of the logo. If an object is diff --git a/src/ol/map.js b/src/ol/map.js index 19d25f7e94..ff8f4f9236 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -165,6 +165,21 @@ ol.Map = function(options) { var optionsInternal = ol.Map.createOptionsInternal(options); + /** + * @type {boolean} + * @private + */ + this.loadTilesWhileAnimating_ = goog.isDef(options.loadTilesWhileAnimating) ? + options.loadTilesWhileAnimating : false; + + /** + * @type {boolean} + * @private + */ + this.loadTilesWhileInteracting_ = + goog.isDef(options.loadTilesWhileInteracting) ? + options.loadTilesWhileInteracting : false; + /** * @private * @type {number} @@ -302,12 +317,6 @@ ol.Map = function(options) { */ this.controls_ = optionsInternal.controls; - /** - * @type {olx.DeviceOptions} - * @private - */ - this.deviceOptions_ = optionsInternal.deviceOptions; - /** * @type {ol.Collection.} * @private @@ -915,15 +924,14 @@ ol.Map.prototype.handlePostRender = function() { var tileSourceCount = 0; if (!goog.isNull(frameState)) { var hints = frameState.viewHints; - var deviceOptions = this.deviceOptions_; if (hints[ol.ViewHint.ANIMATING]) { - maxTotalLoading = deviceOptions.loadTilesWhileAnimating === false ? - 0 : 8; + maxTotalLoading = this.loadTilesWhileAnimating_ === true ? + 8 : 0; maxNewLoads = 2; } if (hints[ol.ViewHint.INTERACTING]) { - maxTotalLoading = deviceOptions.loadTilesWhileInteracting === false ? - 0 : 8; + maxTotalLoading = this.loadTilesWhileInteracting_ === true ? + 8 : 0; maxNewLoads = 2; } tileSourceCount = goog.object.getCount(frameState.wantedTiles); @@ -1397,7 +1405,6 @@ ol.Map.prototype.unskipFeature = function(feature) { /** * @typedef {{controls: ol.Collection., - * deviceOptions: olx.DeviceOptions, * interactions: ol.Collection., * keyboardEventTarget: (Element|Document), * logos: Object, @@ -1511,9 +1518,6 @@ ol.Map.createOptionsInternal = function(options) { controls = ol.control.defaults(); } - var deviceOptions = goog.isDef(options.deviceOptions) ? - options.deviceOptions : /** @type {olx.DeviceOptions} */ ({}); - var interactions; if (goog.isDef(options.interactions)) { if (goog.isArray(options.interactions)) { @@ -1540,7 +1544,6 @@ ol.Map.createOptionsInternal = function(options) { return { controls: controls, - deviceOptions: deviceOptions, interactions: interactions, keyboardEventTarget: keyboardEventTarget, logos: logos,