ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #646 from elemoine/target

Browse Source 
Make it possible to set map target after map creation
This commit is contained in:
Éric Lemoine
2013-04-23 06:33:30 -07:00
parent c78602ba7a d3d0d1e007
commit 5842d771fe
5 changed files with 151 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/teleport.html
+65
View File
@@ -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>
examples/teleport.js
+28
View File
@@ -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);
src/objectliterals.jsdoc
+1 -1
View File
@@ -14,7 +14,7 @@
* @property {Array.<ol.layer.Layer>|ol.Collection|undefined} layers Layers. * @property {Array.<ol.layer.Layer>|ol.Collection|undefined} layers Layers.
* @property {ol.RendererHint|undefined} renderer Renderer. * @property {ol.RendererHint|undefined} renderer Renderer.
* @property {Array.<ol.RendererHint>|undefined} renderers Renderers. * @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 * @property {ol.IView|undefined} view The map's view. Currently
* {@link ol.View2D} is available as view. * {@link ol.View2D} is available as view.
*/ */
src/ol/control/fullscreencontrol.js
+1 -1
View File
@@ -78,7 +78,7 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) {
goog.dom.fullscreen.exitFullScreen(); goog.dom.fullscreen.exitFullScreen();
} else { } else {
var element = map.getTarget(); var element = map.getTarget();
goog.asserts.assert(!goog.isNull(element)); goog.asserts.assert(goog.isDefAndNotNull(element));
if (this.keys_) { if (this.keys_) {
goog.dom.fullscreen.requestFullScreenWithKeys(element); goog.dom.fullscreen.requestFullScreenWithKeys(element);
} else { } else {
src/ol/map.js
+56 -22
View File
@@ -112,6 +112,7 @@ ol.MapProperty = {
BACKGROUND_COLOR: 'backgroundColor', BACKGROUND_COLOR: 'backgroundColor',
LAYERS: 'layers', LAYERS: 'layers',
SIZE: 'size', SIZE: 'size',
TARGET: 'target',
VIEW: 'view' VIEW: 'view'
}; };
@@ -192,12 +193,6 @@ ol.Map = function(options) {
*/ */
this.dirty_ = false; this.dirty_ = false;
/**
* @private
* @type {Element}
*/
this.target_ = optionsInternal.target;
/** /**
* @private * @private
* @type {?number} * @type {?number}
@@ -218,7 +213,6 @@ ol.Map = function(options) {
if (ol.BrowserFeature.HAS_TOUCH) { if (ol.BrowserFeature.HAS_TOUCH) {
this.viewport_.className = 'ol-touch'; this.viewport_.className = 'ol-touch';
} }
goog.dom.appendChild(this.target_, this.viewport_);
/** /**
* @private * @private
@@ -318,15 +312,16 @@ ol.Map = function(options) {
this.handleViewChanged_, false, this); this.handleViewChanged_, false, this);
goog.events.listen(this, ol.Object.getChangedEventType(ol.MapProperty.SIZE), goog.events.listen(this, ol.Object.getChangedEventType(ol.MapProperty.SIZE),
this.handleSizeChanged_, false, this); this.handleSizeChanged_, false, this);
goog.events.listen(this, ol.Object.getChangedEventType(ol.MapProperty.TARGET),
this.handleTargetChanged_, false, this);
goog.events.listen( goog.events.listen(
this, ol.Object.getChangedEventType(ol.MapProperty.BACKGROUND_COLOR), this, ol.Object.getChangedEventType(ol.MapProperty.BACKGROUND_COLOR),
this.handleBackgroundColorChanged_, false, this); this.handleBackgroundColorChanged_, false, this);
// setValues will trigger the rendering of the map if the map
// is "defined" already.
this.setValues(optionsInternal.values); this.setValues(optionsInternal.values);
// this gives the map an initial size
this.updateSize();
if (goog.isDef(optionsInternal.controls)) { if (goog.isDef(optionsInternal.controls)) {
goog.array.forEach(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() { 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 * @private
*/ */
@@ -890,7 +909,7 @@ goog.exportProperty(
/** /**
* @param {ol.Size} size Size. * @param {ol.Size|undefined} size Size.
*/ */
ol.Map.prototype.setSize = function(size) { ol.Map.prototype.setSize = function(size) {
this.set(ol.MapProperty.SIZE, size); this.set(ol.MapProperty.SIZE, size);
@@ -901,6 +920,21 @@ goog.exportProperty(
ol.Map.prototype.setSize); 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. * @param {ol.IView} view View.
*/ */
@@ -929,8 +963,13 @@ ol.Map.prototype.unfreezeRendering = function() {
* third-party code changes the size of the map viewport. * third-party code changes the size of the map viewport.
*/ */
ol.Map.prototype.updateSize = function() { ol.Map.prototype.updateSize = function() {
var size = goog.style.getSize(this.target_); var target = this.getTarget();
this.setSize(new ol.Size(size.width, size.height)); 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, * interactions: ol.Collection,
* rendererConstructor: * rendererConstructor:
* function(new: ol.renderer.Map, Element, ol.Map), * function(new: ol.renderer.Map, Element, ol.Map),
* target: Element,
* values: Object.<string, *>}} * values: Object.<string, *>}}
*/ */
ol.MapOptionsInternal; ol.MapOptionsInternal;
@@ -984,6 +1022,8 @@ ol.Map.createOptionsInternal = function(options) {
} }
values[ol.MapProperty.LAYERS] = layers; values[ol.MapProperty.LAYERS] = layers;
values[ol.MapProperty.TARGET] = options.target;
values[ol.MapProperty.VIEW] = goog.isDef(options.view) ? values[ol.MapProperty.VIEW] = goog.isDef(options.view) ?
options.view : new ol.View2D(); options.view : new ol.View2D();
@@ -1032,16 +1072,10 @@ ol.Map.createOptionsInternal = function(options) {
var interactions = goog.isDef(options.interactions) ? var interactions = goog.isDef(options.interactions) ?
options.interactions : ol.interaction.defaults(); options.interactions : ol.interaction.defaults();
/**
* @type {Element}
*/
var target = goog.dom.getElement(options.target);
return { return {
controls: controls, controls: controls,
interactions: interactions, interactions: interactions,
rendererConstructor: rendererConstructor, rendererConstructor: rendererConstructor,
target: target,
values: values values: values
}; };