Merge pull request #646 from elemoine/target

Make it possible to set map target after map creation
2013-04-23 06:33:30 -07:00
parent c78602ba7a d3d0d1e007
commit 5842d771fe
5 changed files with 151 additions and 24 deletions
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Teleport example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span8">
+          <div id="map1" class="map"></div>
+        </div>
+        <div class="span4">
+          <div id="map2" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <a id="teleport" href="#" class="btn">Teleport</a>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span6">
+          <h4 id="title">Teleport example</h4>
+          <p id="shortdesc">Example of moving a map from one target to another.</p>
+          <div id="docs">
+            <p>Click on the Teleport button below the map to move the map from one target to another.</p>
+            <p>See the <a href="teleport.js" target="_blank">teleport.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">teleport, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=teleport" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -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);
@@ -14,7 +14,7 @@
 * @property {Array.<ol.layer.Layer>|ol.Collection|undefined} layers Layers.
 * @property {ol.RendererHint|undefined} renderer Renderer.
 * @property {Array.<ol.RendererHint>|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.
 */
@@ -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 {
@@ -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.<string, *>}}
 */
 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
  };