Merge pull request #1122 from bbinet/fix-zindex-issues

Fix overlay zindex issues

examples/geolocation.js

@@ -39,7 +39,8 @@ geolocation.on('change', function() {
 
 var marker = new ol.Overlay({
   element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0)),
-  positioning: ol.OverlayPositioning.BOTTOM_LEFT
+  positioning: ol.OverlayPositioning.BOTTOM_LEFT,
+  stopEvent: false
 });
 map.addOverlay(marker);
 // bind the marker position to the device location.

examples/icon.js

@@ -65,7 +65,8 @@ var element = document.getElementById('popup');
 
 var popup = new ol.Overlay({
   element: element,
-  positioning: ol.OverlayPositioning.BOTTOM_CENTER
+  positioning: ol.OverlayPositioning.BOTTOM_CENTER,
+  stopEvent: false
 });
 map.addOverlay(popup);
 

examples/overlay.html

@@ -24,6 +24,9 @@
         font-weight: bold;
         text-shadow: black 0.1em 0.1em 0.2em;
       }
+      .popover {
+        z-index: auto;
+      }
       .popover-content {
         min-width: 180px;
       }

examples/overlay.js

@@ -29,22 +29,21 @@ var pos = ol.proj.transform([16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857');
 var marker = new ol.Overlay({
   position: pos,
   positioning: ol.OverlayPositioning.CENTER_CENTER,
-  element: document.getElementById('marker')
+  element: document.getElementById('marker'),
+  stopEvent: false
 });
 map.addOverlay(marker);
 
 // Vienna label
 var vienna = new ol.Overlay({
   position: pos,
-  element: document.getElementById('vienna'),
-  stopEvent: true
+  element: document.getElementById('vienna')
 });
 map.addOverlay(vienna);
 
 // Popup showing the position the user clicked
 var popup = new ol.Overlay({
-  element: document.getElementById('popup'),
-  stopEvent: true
+  element: document.getElementById('popup')
 });
 map.addOverlay(popup);
 

examples/popup.js

@@ -31,8 +31,7 @@ closer.onclick = function() {
  * Create an overlay to anchor the popup to the map.
  */
 var overlay = new ol.Overlay({
-  element: container,
-  stopEvent: true
+  element: container
 });
 
 

src/objectliterals.jsdoc

@@ -79,7 +79,14 @@
  *     projection.
  * @property {ol.OverlayPositioning|undefined} positioning Positioning.
  * @property {boolean|undefined} stopEvent Whether event propagation to the map
- * 	should be stopped. Default is `false`.
+ *     viewport should be stopped. Default is `true`. If `true` the overlay is
+ *     placed in the same container as that of the controls
+ *     (`ol-overlaycontainer-stopevent`).
+ * @property {boolean|undefined} insertFirst Whether the overlay is inserted
+ *     first in the overlay container, or appended. Default is `true`. If the
+ *     overlay is placed in the same container as that of the controls (see
+ *     the `stopEvent` option) you will probably set `insertFirst` to `true`
+ *     so the overlay is displayed below the controls.
  * @todo stability experimental
  */
 

src/ol/overlay.js

@@ -66,7 +66,14 @@ ol.Overlay = function(options) {
    * @private
    * @type {boolean}
    */
-  this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : false;
+  this.insertFirst_ = goog.isDef(options.insertFirst) ?
+      options.insertFirst : true;
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : true;
 
   /**
    * @private
@@ -214,10 +221,14 @@ ol.Overlay.prototype.handleMapChanged = function() {
     this.mapPostrenderListenerKey_ = goog.events.listen(map,
         ol.MapEventType.POSTRENDER, this.handleMapPostrender, false, this);
     this.updatePixelPosition_();
-    goog.dom.append(/** @type {!Node} */ (
-        this.stopEvent_ ? map.getOverlayContainerStopEvent() :
-                          map.getOverlayContainer()),
-        this.element_);
+    var container = this.stopEvent_ ?
+        map.getOverlayContainerStopEvent() : map.getOverlayContainer();
+    if (this.insertFirst_) {
+      goog.dom.insertChildAt(/** @type {!Element} */ (
+          container), this.element_, 0);
+    } else {
+      goog.dom.append(/** @type {!Node} */ (container), this.element_);
+    }
   }
 };