diff --git a/examples/full-screen.js b/examples/full-screen.js index 0fa17bce34..8de15490f9 100644 --- a/examples/full-screen.js +++ b/examples/full-screen.js @@ -7,8 +7,9 @@ goog.require('ol.source.MapQuestOpenAerial'); var layer = new ol.layer.TileLayer({ source: new ol.source.MapQuestOpenAerial() }); -var map = new ol.Map(document.getElementById('map'), { +var map = new ol.Map({ center: new ol.Coordinate(0, 0), layers: new ol.Collection([layer]), + target: 'map', zoom: 2 }); diff --git a/examples/overlay-and-popup.js b/examples/overlay-and-popup.js index 17393d47b0..3d18837bd5 100644 --- a/examples/overlay-and-popup.js +++ b/examples/overlay-and-popup.js @@ -18,9 +18,10 @@ if (goog.DEBUG) { var layer = new ol.layer.TileLayer({ source: new ol.source.MapQuestOpenAerial() }); -var map = new ol.Map(document.getElementById('map'), { +var map = new ol.Map({ center: new ol.Coordinate(0, 0), layers: new ol.Collection([layer]), + target: 'map', zoom: 2 }); diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 1e84e7febf..1a8f82fbae 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -20,10 +20,11 @@ var layer = new ol.layer.TileLayer({ source: new ol.source.MapQuestOpenAerial() }); -var domMap = new ol.Map(document.getElementById('domMap'), { +var domMap = new ol.Map({ center: new ol.Coordinate(0, 0), layers: new ol.Collection([layer]), renderer: ol.RendererHint.DOM, + target: 'domMap', zoom: 1 }); @@ -34,8 +35,9 @@ domMap.getControls().push(new ol.control.MousePosition({ undefinedHtml: ' ' })); -var webglMap = new ol.Map(document.getElementById('webglMap'), { - renderer: ol.RendererHint.WEBGL +var webglMap = new ol.Map({ + renderer: ol.RendererHint.WEBGL, + target: 'webglMap' }); if (!goog.isNull(webglMap)) { webglMap.bindTo('center', domMap); diff --git a/examples/two-layers.js b/examples/two-layers.js index bfba468fc8..53824ff367 100644 --- a/examples/two-layers.js +++ b/examples/two-layers.js @@ -22,16 +22,18 @@ var layers = new ol.Collection([ }) ]); -var webglMap = new ol.Map(document.getElementById('webglMap'), { +var webglMap = new ol.Map({ center: ol.Projection.transformWithCodes( new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'), layers: layers, renderer: ol.RendererHint.WEBGL, + target: 'webglMap', zoom: 5 }); -var domMap = new ol.Map(document.getElementById('domMap'), { - renderer: ol.RendererHint.DOM +var domMap = new ol.Map({ + renderer: ol.RendererHint.DOM, + target: 'domMap' }); domMap.bindTo('center', webglMap); domMap.bindTo('layers', webglMap); diff --git a/src/ol/literals.txt b/src/ol/literals.txt index 3bd1a15325..ca5f248901 100644 --- a/src/ol/literals.txt +++ b/src/ol/literals.txt @@ -18,6 +18,7 @@ resolution: number|undefined resolutions: Array.|undefined rotate: boolean|undefined shiftDragZoom: boolean|undefined +target: Element|string userProjection: ol.Projection|string|undefined zoom: number|undefined zoomDelta: number|undefined diff --git a/src/ol/map.js b/src/ol/map.js index c24cb388b8..9ea1645fe9 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -100,6 +100,7 @@ ol.MapEventType = { * constraints: ol.Constraints, * rendererConstructor: * function(new: ol.renderer.Map, Element, ol.Map), + * target: Element, * values: Object.}} */ ol.MapOptionsInternal; @@ -126,10 +127,9 @@ ol.MapProperty = { * @constructor * @extends {ol.Object} * @implements {goog.fx.anim.Animated} - * @param {Element} container Container. * @param {olx.MapOptions} mapOptions Map options. */ -ol.Map = function(container, mapOptions) { +ol.Map = function(mapOptions) { goog.base(this); @@ -183,7 +183,7 @@ ol.Map = function(container, mapOptions) { * @private * @type {Element} */ - this.container_ = container; + this.target_ = mapOptionsInternal.target; /** * @private @@ -200,7 +200,7 @@ ol.Map = function(container, mapOptions) { this.viewport_.style.overflow = 'hidden'; this.viewport_.style.width = '100%'; this.viewport_.style.height = '100%'; - goog.dom.appendChild(container, this.viewport_); + goog.dom.appendChild(this.target_, this.viewport_); /** * @private @@ -356,8 +356,8 @@ goog.exportProperty( /** * @return {Element} Container. */ -ol.Map.prototype.getContainer = function() { - return this.container_; +ol.Map.prototype.getTarget = function() { + return this.target_; }; @@ -643,8 +643,7 @@ ol.Map.prototype.handleUserProjectionChanged = function() { * @protected */ ol.Map.prototype.handleBrowserWindowResize = function() { - var size = new ol.Size(this.container_.clientWidth, - this.container_.clientHeight); + var size = new ol.Size(this.target_.clientWidth, this.target_.clientHeight); this.setSize(size); }; @@ -1047,10 +1046,16 @@ ol.Map.createOptionsInternal = function(mapOptions) { controls = ol.Map.createControls_(mapOptions); } + /** + * @type {Element} + */ + var target = goog.dom.getElement(mapOptions.target); + return { constraints: constraints, controls: controls, rendererConstructor: rendererConstructor, + target: target, values: values };