diff --git a/css/ol.css b/css/ol.css index 50ee718909..cf034845b8 100644 --- a/css/ol.css +++ b/css/ol.css @@ -1 +1,2 @@ -.ol-renderer-webgl-canvas { width:100%;height:100%; } +.ol-viewport { width:100%; height:100%; position:relative; left:0; top:0; } +.ol-renderer-webgl-canvas { width:100%; height:100%; } \ No newline at end of file diff --git a/src/api/map.js b/src/api/map.js index 70932941d8..e6aaf0cbfc 100644 --- a/src/api/map.js +++ b/src/api/map.js @@ -18,7 +18,7 @@ ol.MapLike; * @param {ol.MapLike=} opt_arg Argument. * @return {ol.Map} Map. */ -ol.map = function(opt_arg){ +ol.map = function(opt_arg) { /** @type {ol.Loc|undefined} */ var center; @@ -36,6 +36,8 @@ ol.map = function(opt_arg){ var maxRes; /** @type {Array.|undefined} */ var resolutions; + /** @type {Element|string|undefined} */ + var el; /** @type {Array|undefined} */ var layers; /** @type {Array|undefined} */ @@ -54,6 +56,7 @@ ol.map = function(opt_arg){ maxExtent = opt_arg['maxExtent']; maxRes = opt_arg['maxRes']; resolutions = opt_arg['resolutions']; + el = opt_arg['el']; layers = opt_arg['layers']; controls = opt_arg['controls']; } @@ -63,6 +66,9 @@ ol.map = function(opt_arg){ } var map = new ol.Map(); + if (goog.isDef(el)) { + map.el(el); + } if (goog.isDef(center)) { map.setCenter(ol.loc(center)); } @@ -244,3 +250,12 @@ ol.Map.prototype.maxRes = function(opt_arg) { ol.Map.prototype.getResForZoom = function(arg) { return this.getResolutionForZoom(arg); }; + +/** + * @param {string|Element} arg Render the map to a container + * @returns {ol.Map} + */ +ol.Map.prototype.el = function(arg) { + this.setContainer(goog.dom.getElement(arg)); + return this; +}; diff --git a/src/ol/Map.js b/src/ol/Map.js index a2a4742a15..19585b1846 100644 --- a/src/ol/Map.js +++ b/src/ol/Map.js @@ -74,6 +74,12 @@ ol.Map = function() { */ this.maxRes_ = undefined; + /** + * @private + * @type {Element} + */ + this.viewport_ = null; + /** * @private * @type {ol.event.Events} @@ -332,6 +338,16 @@ ol.Map.prototype.setMaxRes = function(res) { ol.Map.prototype.setContainer = function(container) { this.events_.setElement(container); this.container_ = container; + this.setViewport(); +}; + +ol.Map.prototype.setViewport = function() { + if (!this.viewport_) { + this.viewport_ = goog.dom.createDom( + 'div', 'ol-viewport' + ); + goog.dom.appendChild(this.container_, this.viewport_); + } }; /**