Merge pull request #17 from elemoine/layout

change map HTML layout

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

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

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

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}

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