From 7547b50bd82dd810c6593352fe29164b0b259faf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 23 Apr 2013 10:07:20 +0200 Subject: [PATCH 1/6] Add map property "target" --- src/objectliterals.jsdoc | 2 +- src/ol/map.js | 73 ++++++++++++++++++++++++++++------------ 2 files changed, 52 insertions(+), 23 deletions(-) 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 }; From 2dfe36b588961c3af6b5700c337d235d9a72d4df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 23 Apr 2013 10:07:43 +0200 Subject: [PATCH 2/6] Map target may be undefined --- src/ol/control/fullscreencontrol.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 { From 8e8804caf183b31bb7e23ddddd40cf5cd0e70f55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 23 Apr 2013 10:41:34 +0200 Subject: [PATCH 3/6] Add a teleport map example --- examples/teleport.html | 65 ++++++++++++++++++++++++++++++++++++++++++ examples/teleport.js | 31 ++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 examples/teleport.html create mode 100644 examples/teleport.js 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..c528154811 --- /dev/null +++ b/examples/teleport.js @@ -0,0 +1,31 @@ +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 + }) +}); + +var mapTarget1 = document.getElementById('map1'); +var mapTarget2 = document.getElementById('map2'); + +map.setTarget(mapTarget1); + +var teleportButton = document.getElementById('teleport'); + +teleportButton.addEventListener('click', function() { + var target = map.getTarget() === mapTarget1 ? mapTarget2 : mapTarget1; + map.setTarget(target); +}, false); From 11efafffd84e5e76fe04672235fbcad18a8da913 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 23 Apr 2013 14:04:46 +0200 Subject: [PATCH 4/6] Make setTarget accept a string --- src/ol/map.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/ol/map.js b/src/ol/map.js index 04cb3724ea..180887aefa 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -917,9 +917,12 @@ goog.exportProperty( /** - * @param {Element|undefined} target Target. + * @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( @@ -1015,9 +1018,7 @@ 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.TARGET] = options.target; values[ol.MapProperty.VIEW] = goog.isDef(options.view) ? options.view : new ol.View2D(); From 29e69d3833265de51d1666cfe66a2d5292f15c1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 23 Apr 2013 14:05:11 +0200 Subject: [PATCH 5/6] Simplify teleport example --- examples/teleport.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/examples/teleport.js b/examples/teleport.js index c528154811..a83e50308b 100644 --- a/examples/teleport.js +++ b/examples/teleport.js @@ -18,14 +18,11 @@ var map = new ol.Map({ }) }); -var mapTarget1 = document.getElementById('map1'); -var mapTarget2 = document.getElementById('map2'); - -map.setTarget(mapTarget1); +map.setTarget('map1'); var teleportButton = document.getElementById('teleport'); teleportButton.addEventListener('click', function() { - var target = map.getTarget() === mapTarget1 ? mapTarget2 : mapTarget1; + var target = map.getTarget().id === 'map1' ? 'map2' : 'map1'; map.setTarget(target); }, false); From d3d0d1e007c1273390c5ba018fc670f4d9f000c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 23 Apr 2013 14:44:36 +0200 Subject: [PATCH 6/6] Test isElement instead of isDef (thanks @fredj) --- src/ol/map.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/ol/map.js b/src/ol/map.js index 180887aefa..cfa2e6d613 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -691,10 +691,14 @@ 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.isDef(target)) { + 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();