diff --git a/src/ol/base/map.js b/src/ol/base/map.js index 1ee8f668a2..546debe448 100644 --- a/src/ol/base/map.js +++ b/src/ol/base/map.js @@ -68,7 +68,7 @@ ol.MapProperty = { * @enum {number} */ ol.MapPaneZIndex = { - EVENTS: 1000 + VIEWPORT: 1000 }; @@ -77,7 +77,7 @@ ol.MapPaneZIndex = { * @constructor * @extends {ol.Object} * @implements {goog.fx.anim.Animated} - * @param {Element} target Target. + * @param {Element} container Container. * @param {function(new: ol.MapRenderer, Element, ol.Map)} rendererConstructor * Renderer constructor. * @param {Object=} opt_values Values. @@ -85,7 +85,7 @@ ol.MapPaneZIndex = { * Viewport size monitor. */ ol.Map = function( - target, rendererConstructor, opt_values, opt_viewportSizeMonitor) { + container, rendererConstructor, opt_values, opt_viewportSizeMonitor) { goog.base(this); @@ -129,16 +129,22 @@ ol.Map = function( * @private * @type {Element} */ - this.eventsPane_ = goog.dom.createElement(goog.dom.TagName.DIV); - this.eventsPane_.className = 'ol-pane-events'; - this.eventsPane_.style.position = 'absolute'; - // FIXME why can't we use width and height 100% here? - this.eventsPane_.style.width = target.clientWidth + 'px'; - this.eventsPane_.style.height = target.clientHeight + 'px'; - this.eventsPane_.style.zIndex = ol.MapPaneZIndex.EVENTS; - goog.dom.appendChild(target, this.eventsPane_); + this.container_ = container; - goog.events.listen(this.eventsPane_, [ + /** + * @private + * @type {Element} + */ + this.viewport_ = goog.dom.createElement(goog.dom.TagName.DIV); + this.viewport_.className = 'ol-viewport'; + this.viewport_.style.position = 'relative'; + this.viewport_.style.overflow = 'hidden'; + this.viewport_.style.width = '100%'; + this.viewport_.style.height = '100%'; + this.viewport_.style.zIndex = ol.MapPaneZIndex.VIEWPORT; + goog.dom.appendChild(container, this.viewport_); + + goog.events.listen(this.viewport_, [ goog.events.EventType.DBLCLICK ], this.handleBrowserEvent, false, this); @@ -148,13 +154,13 @@ ol.Map = function( this.handleBrowserEvent, false, this); this.registerDisposable(keyHandler); - var mouseWheelHandler = new goog.events.MouseWheelHandler(this.eventsPane_); + var mouseWheelHandler = new goog.events.MouseWheelHandler(this.viewport_); goog.events.listen(mouseWheelHandler, goog.events.MouseWheelHandler.EventType.MOUSEWHEEL, this.handleBrowserEvent, false, this); this.registerDisposable(mouseWheelHandler); - var dragger = new goog.fx.Dragger(this.eventsPane_); + var dragger = new goog.fx.Dragger(this.viewport_); dragger.defaultAction = function() {}; goog.events.listen(dragger, [ goog.fx.Dragger.EventType.START, @@ -167,15 +173,9 @@ ol.Map = function( * @type {ol.MapRenderer} * @private */ - this.renderer_ = new rendererConstructor(target, this); + this.renderer_ = new rendererConstructor(this.viewport_, this); this.registerDisposable(this.renderer_); - /** - * @private - * @type {Element} - */ - this.target_ = target; - /** * @private * @type {goog.dom.ViewportSizeMonitor} @@ -184,7 +184,7 @@ ol.Map = function( opt_viewportSizeMonitor || new goog.dom.ViewportSizeMonitor(); goog.events.listen(this.viewportSizeMonitor_, goog.events.EventType.RESIZE, - this.handleViewportResize, false, this); + this.handleBrowserWindowResize, false, this); goog.events.listen( this, ol.Object.getChangedEventType(ol.MapProperty.PROJECTION), @@ -198,7 +198,7 @@ ol.Map = function( this.setValues(opt_values); } - this.handleViewportResize(); + this.handleBrowserWindowResize(); }; goog.inherits(ol.Map, ol.Object); @@ -266,6 +266,14 @@ goog.exportProperty( ol.Map.prototype.getCenter); +/** + * @return {Element} Container. + */ +ol.Map.prototype.getContainer = function() { + return this.container_; +}; + + /** * @param {ol.Pixel} pixel Pixel. * @return {ol.Coordinate|undefined} Coordinate. @@ -420,14 +428,6 @@ goog.exportProperty( ol.Map.prototype.getSize); -/** - * @return {Element} Target. - */ -ol.Map.prototype.getTarget = function() { - return this.target_; -}; - - /** * @return {ol.Coordinate|undefined} Center in user projection. */ @@ -467,6 +467,14 @@ goog.exportProperty( ol.Map.prototype.getUserProjection); +/** + * @return {Element} Viewport. + */ +ol.Map.prototype.getViewport = function() { + return this.viewport_; +}; + + /** * @param {goog.events.BrowserEvent} browserEvent Browser event. * @param {string=} opt_type Type. @@ -512,8 +520,9 @@ ol.Map.prototype.handleUserProjectionChanged = function() { /** * @protected */ -ol.Map.prototype.handleViewportResize = function() { - var size = new ol.Size(this.target_.clientWidth, this.target_.clientHeight); +ol.Map.prototype.handleBrowserWindowResize = function() { + var size = new ol.Size(this.container_.clientWidth, + this.container_.clientHeight); this.setSize(size); }; diff --git a/src/ol/base/maprenderer.js b/src/ol/base/maprenderer.js index 06546c5a61..792bbe6179 100644 --- a/src/ol/base/maprenderer.js +++ b/src/ol/base/maprenderer.js @@ -13,10 +13,10 @@ goog.require('ol.MapProperty'); /** * @constructor * @extends {goog.Disposable} - * @param {Element} target Target. + * @param {Element} container Container. * @param {ol.Map} map Map. */ -ol.MapRenderer = function(target, map) { +ol.MapRenderer = function(container, map) { goog.base(this); @@ -24,7 +24,7 @@ ol.MapRenderer = function(target, map) { * @private * @type {Element} */ - this.target_ = target; + this.container_ = container; /** * @protected diff --git a/src/ol/control/mouseposition.js b/src/ol/control/mouseposition.js index c8ed67088e..4d558a7855 100644 --- a/src/ol/control/mouseposition.js +++ b/src/ol/control/mouseposition.js @@ -59,10 +59,10 @@ ol.control.MousePosition = ol.Object.getChangedEventType(ol.MapProperty.PROJECTION), this.handleMapProjectionChanged, false, this); - goog.events.listen(map.getTarget(), goog.events.EventType.MOUSEMOVE, + goog.events.listen(map.getViewport(), goog.events.EventType.MOUSEMOVE, this.handleMouseMove, false, this); - goog.events.listen(map.getTarget(), goog.events.EventType.MOUSEOUT, + goog.events.listen(map.getViewport(), goog.events.EventType.MOUSEOUT, this.handleMouseOut, false, this); this.handleMapProjectionChanged(); diff --git a/src/ol/dom/maprenderer.js b/src/ol/dom/maprenderer.js index 2014f10901..ec51737a4d 100644 --- a/src/ol/dom/maprenderer.js +++ b/src/ol/dom/maprenderer.js @@ -15,24 +15,12 @@ goog.require('ol.dom.TileLayerRenderer'); /** * @constructor * @extends {ol.MapRenderer} - * @param {Element} target Target. + * @param {Element} container Container. * @param {ol.Map} map Map. */ -ol.dom.MapRenderer = function(target, map) { +ol.dom.MapRenderer = function(container, map) { - goog.base(this, target, map); - - /** - * @type {!Element} - * @private - */ - this.viewport_ = goog.dom.createElement(goog.dom.TagName.DIV); - this.viewport_.className = 'ol-viewport'; - this.viewport_.style.position = 'relative'; - this.viewport_.style.overflow = 'hidden'; - this.viewport_.style.width = '100%'; - this.viewport_.style.height = '100%'; - goog.dom.appendChild(target, this.viewport_); + goog.base(this, container, map); /** * @type {!Element} @@ -41,7 +29,7 @@ ol.dom.MapRenderer = function(target, map) { this.layersPane_ = goog.dom.createElement(goog.dom.TagName.DIV); this.layersPane_.className = 'ol-layers-pane'; this.layersPane_.style.position = 'absolute'; - goog.dom.appendChild(this.viewport_, this.layersPane_); + goog.dom.appendChild(container, this.layersPane_); /** * @type {Object} diff --git a/src/ol/webgl/maprenderer.js b/src/ol/webgl/maprenderer.js index 8cc7343d4f..a7a76864ee 100644 --- a/src/ol/webgl/maprenderer.js +++ b/src/ol/webgl/maprenderer.js @@ -135,22 +135,21 @@ goog.addSingletonGetter(ol.webgl.map.shader.Vertex); /** * @constructor * @extends {ol.MapRenderer} - * @param {Element} target Target. + * @param {Element} container Container. * @param {ol.Map} map Map. */ -ol.webgl.MapRenderer = function(target, map) { +ol.webgl.MapRenderer = function(container, map) { - goog.base(this, target, map); + goog.base(this, container, map); /** * @private * @type {Element} */ this.canvas_ = goog.dom.createElement(goog.dom.TagName.CANVAS); - this.canvas_.height = target.clientHeight; - this.canvas_.width = target.clientWidth; - this.canvas_.style.overflow = 'hidden'; - goog.dom.appendChild(target, this.canvas_); + this.canvas_.height = container.clientHeight; + this.canvas_.width = container.clientWidth; + goog.dom.appendChild(container, this.canvas_); /** * @private