diff --git a/examples/teleport.html b/examples/teleport.html new file mode 100644 index 0000000000..4d221d5d0e --- /dev/null +++ b/examples/teleport.html @@ -0,0 +1,65 @@ + + + + + + + + + + Teleport example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+ Teleport +
+
+ +
+ +
+

Teleport example

+

Example of moving a map from one target to another.

+
+

Click on the Teleport button below the map to move the map from one target to another.

+

See the teleport.js source to see how this is done.

+
+
teleport, openstreetmap
+
+ +
+ +
+ + + + + + diff --git a/examples/teleport.js b/examples/teleport.js new file mode 100644 index 0000000000..a83e50308b --- /dev/null +++ b/examples/teleport.js @@ -0,0 +1,28 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.OSM() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + +map.setTarget('map1'); + +var teleportButton = document.getElementById('teleport'); + +teleportButton.addEventListener('click', function() { + var target = map.getTarget().id === 'map1' ? 'map2' : 'map1'; + map.setTarget(target); +}, false); diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 03b42ccef8..fd18031f75 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/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js index 126997fff1..0f552aba63 100644 --- a/src/ol/control/fullscreencontrol.js +++ b/src/ol/control/fullscreencontrol.js @@ -78,7 +78,7 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) { goog.dom.fullscreen.exitFullScreen(); } else { var element = map.getTarget(); - goog.asserts.assert(!goog.isNull(element)); + goog.asserts.assert(goog.isDefAndNotNull(element)); if (this.keys_) { goog.dom.fullscreen.requestFullScreenWithKeys(element); } else { diff --git a/src/ol/map.js b/src/ol/map.js index ba5c709a5c..cfa2e6d613 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,26 @@ ol.Map.prototype.handleSizeChanged_ = function() { }; +/** + * @private + */ +ol.Map.prototype.handleTargetChanged_ = function() { + // target may be undefined, null or an Element. If it's not + // an Element we remove the viewport from the DOM. If it's + // an Element we append the viewport element to it. + var target = this.getTarget(); + if (!goog.dom.isElement(target)) { + goog.dom.removeNode(this.viewport_); + } else { + goog.asserts.assert(goog.isDefAndNotNull(target)); + goog.dom.appendChild(target, this.viewport_); + } + this.updateSize(); + // updateSize calls setSize, so no need to call this.render + // ourselves here. +}; + + /** * @private */ @@ -890,7 +909,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 +920,21 @@ goog.exportProperty( ol.Map.prototype.setSize); +/** + * @param {Element|string|undefined} target Target. + */ +ol.Map.prototype.setTarget = function(target) { + if (goog.isDef(target)) { + target = goog.dom.getElement(target); + } + this.set(ol.MapProperty.TARGET, target); +}; +goog.exportProperty( + ol.Map.prototype, + 'setTarget', + ol.Map.prototype.setTarget); + + /** * @param {ol.IView} view View. */ @@ -929,8 +963,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 +993,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 +1022,8 @@ ol.Map.createOptionsInternal = function(options) { } values[ol.MapProperty.LAYERS] = layers; + values[ol.MapProperty.TARGET] = options.target; + values[ol.MapProperty.VIEW] = goog.isDef(options.view) ? options.view : new ol.View2D(); @@ -1032,16 +1072,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 };