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
};