diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index f78ae1f386..5d9959f4a8 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -14,7 +14,7 @@ * @property {Array.|ol.Collection|undefined} layers Layers. * @property {ol.RendererHint|undefined} renderer Renderer. * @property {Array.|undefined} renderers Renderers. - * @property {Element|string} target The container for the map. + * @property {Element|string|undefined} target The container for the map. * @property {ol.IView|undefined} view The map's view. Currently * {@link ol.View2D} is available as view. */ diff --git a/src/ol/map.js b/src/ol/map.js index ba5c709a5c..04cb3724ea 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -112,6 +112,7 @@ ol.MapProperty = { BACKGROUND_COLOR: 'backgroundColor', LAYERS: 'layers', SIZE: 'size', + TARGET: 'target', VIEW: 'view' }; @@ -192,12 +193,6 @@ ol.Map = function(options) { */ this.dirty_ = false; - /** - * @private - * @type {Element} - */ - this.target_ = optionsInternal.target; - /** * @private * @type {?number} @@ -218,7 +213,6 @@ ol.Map = function(options) { if (ol.BrowserFeature.HAS_TOUCH) { this.viewport_.className = 'ol-touch'; } - goog.dom.appendChild(this.target_, this.viewport_); /** * @private @@ -318,15 +312,16 @@ ol.Map = function(options) { this.handleViewChanged_, false, this); goog.events.listen(this, ol.Object.getChangedEventType(ol.MapProperty.SIZE), this.handleSizeChanged_, false, this); + goog.events.listen(this, ol.Object.getChangedEventType(ol.MapProperty.TARGET), + this.handleTargetChanged_, false, this); goog.events.listen( this, ol.Object.getChangedEventType(ol.MapProperty.BACKGROUND_COLOR), this.handleBackgroundColorChanged_, false, this); + // setValues will trigger the rendering of the map if the map + // is "defined" already. this.setValues(optionsInternal.values); - // this gives the map an initial size - this.updateSize(); - if (goog.isDef(optionsInternal.controls)) { goog.array.forEach(optionsInternal.controls, /** @@ -421,11 +416,15 @@ ol.Map.prototype.getRenderer = function() { /** - * @return {Element} Container. + * @return {Element|undefined} Target. */ ol.Map.prototype.getTarget = function() { - return this.target_; + return /** @type {Element|undefined} */ (this.get(ol.MapProperty.TARGET)); }; +goog.exportProperty( + ol.Map.prototype, + 'getTarget', + ol.Map.prototype.getTarget); /** @@ -688,6 +687,22 @@ ol.Map.prototype.handleSizeChanged_ = function() { }; +/** + * @private + */ +ol.Map.prototype.handleTargetChanged_ = function() { + var target = this.getTarget(); + if (!goog.isDef(target)) { + goog.dom.removeNode(this.viewport_); + } else { + goog.dom.appendChild(target, this.viewport_); + } + this.updateSize(); + // updateSize calls setSize, so no need to call this.render + // ourselves here. +}; + + /** * @private */ @@ -890,7 +905,7 @@ goog.exportProperty( /** - * @param {ol.Size} size Size. + * @param {ol.Size|undefined} size Size. */ ol.Map.prototype.setSize = function(size) { this.set(ol.MapProperty.SIZE, size); @@ -901,6 +916,18 @@ goog.exportProperty( ol.Map.prototype.setSize); +/** + * @param {Element|undefined} target Target. + */ +ol.Map.prototype.setTarget = function(target) { + this.set(ol.MapProperty.TARGET, target); +}; +goog.exportProperty( + ol.Map.prototype, + 'setTarget', + ol.Map.prototype.setTarget); + + /** * @param {ol.IView} view View. */ @@ -929,8 +956,13 @@ ol.Map.prototype.unfreezeRendering = function() { * third-party code changes the size of the map viewport. */ ol.Map.prototype.updateSize = function() { - var size = goog.style.getSize(this.target_); - this.setSize(new ol.Size(size.width, size.height)); + var target = this.getTarget(); + if (goog.isDef(target)) { + var size = goog.style.getSize(target); + this.setSize(new ol.Size(size.width, size.height)); + } else { + this.setSize(undefined); + } }; @@ -954,7 +986,6 @@ ol.Map.prototype.withFrozenRendering = function(f, opt_obj) { * interactions: ol.Collection, * rendererConstructor: * function(new: ol.renderer.Map, Element, ol.Map), - * target: Element, * values: Object.}} */ ol.MapOptionsInternal; @@ -984,6 +1015,10 @@ ol.Map.createOptionsInternal = function(options) { } values[ol.MapProperty.LAYERS] = layers; + if (goog.isDef(options.target)) { + values[ol.MapProperty.TARGET] = goog.dom.getElement(options.target); + } + values[ol.MapProperty.VIEW] = goog.isDef(options.view) ? options.view : new ol.View2D(); @@ -1032,16 +1067,10 @@ ol.Map.createOptionsInternal = function(options) { var interactions = goog.isDef(options.interactions) ? options.interactions : ol.interaction.defaults(); - /** - * @type {Element} - */ - var target = goog.dom.getElement(options.target); - return { controls: controls, interactions: interactions, rendererConstructor: rendererConstructor, - target: target, values: values };