Move target container in to map options

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
 });

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
 });
 

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);

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);

src/ol/literals.txt

@@ -18,6 +18,7 @@ resolution: number|undefined
 resolutions: Array.<number>|undefined
 rotate: boolean|undefined
 shiftDragZoom: boolean|undefined
+target: Element|string
 userProjection: ol.Projection|string|undefined
 zoom: number|undefined
 zoomDelta: number|undefined

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.<string, *>}}
  */
 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
   };