From 38b12d31498dcd1f3c61f788cbc5851c6bae48dc Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Sun, 21 Dec 2014 12:03:28 +0100 Subject: [PATCH] Make map's deviceOptions map options This removes the map's deviceOptions config option, and instead introduces loadTilesWhileAnimating and loadTilesWhileInteracting map options. By default, both are false now, to make zooming and panning smoother on most devices. --- examples/animation.js | 3 +++ examples/bing-maps.js | 3 +++ externs/olx.js | 57 +++++++++++++++++-------------------------- src/ol/map.js | 35 ++++++++++++++------------ 4 files changed, 47 insertions(+), 51 deletions(-) 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 a0dbe05eb6..8756ab3f6c 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,