Merge pull request #1120 from bbinet/overlay-stop-events

Configurable event propagation for overlays

examples/overlay.js

@@ -36,13 +36,15 @@ map.addOverlay(marker);
 // Vienna label
 var vienna = new ol.Overlay({
   position: pos,
-  element: document.getElementById('vienna')
+  element: document.getElementById('vienna'),
+  stopEvent: true
 });
 map.addOverlay(vienna);
 
 // Popup showing the position the user clicked
 var popup = new ol.Overlay({
-  element: document.getElementById('popup')
+  element: document.getElementById('popup'),
+  stopEvent: true
 });
 map.addOverlay(popup);
 

examples/popup.js

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

src/objectliterals.jsdoc

@@ -72,6 +72,8 @@
  * @property {ol.Coordinate|undefined} position The overlay position in map
  *     projection.
  * @property {ol.OverlayPositioning|undefined} positioning Positioning.
+ * @property {boolean|undefined} stopEvent Whether event propagation to the map
+ * 	should be stopped. Default is `false`.
  */
 
 /**

src/ol/control/control.js

@@ -93,7 +93,7 @@ ol.control.Control.prototype.setMap = function(map) {
   this.map_ = map;
   if (!goog.isNull(this.map_)) {
     var target = goog.isDef(this.target_) ?
-        this.target_ : map.getOverlayContainer();
+        this.target_ : map.getOverlayContainerStopEvent();
     goog.dom.appendChild(target, this.element);
     if (this.handleMapPostrender !== goog.nullFunction) {
       this.listenerKeys.push(goog.events.listen(map,

src/ol/map.js

@@ -225,13 +225,21 @@ ol.Map = function(options) {
    */
   this.overlayContainer_ = goog.dom.createDom(goog.dom.TagName.DIV,
       'ol-overlaycontainer');
-  goog.events.listen(this.overlayContainer_, [
+  goog.dom.appendChild(this.viewport_, this.overlayContainer_);
+
+  /**
+   * @private
+   * @type {Element}
+   */
+  this.overlayContainerStopEvent_ = goog.dom.createDom(goog.dom.TagName.DIV,
+      'ol-overlaycontainer-stopevent');
+  goog.events.listen(this.overlayContainerStopEvent_, [
     goog.events.EventType.CLICK,
     goog.events.EventType.DBLCLICK,
     ol.BrowserFeature.HAS_TOUCH ?
         goog.events.EventType.TOUCHSTART : goog.events.EventType.MOUSEDOWN
   ], goog.events.Event.stopPropagation);
-  goog.dom.appendChild(this.viewport_, this.overlayContainer_);
+  goog.dom.appendChild(this.viewport_, this.overlayContainerStopEvent_);
 
   var mapBrowserEventHandler = new ol.MapBrowserEventHandler(this);
   goog.events.listen(mapBrowserEventHandler,
@@ -591,14 +599,24 @@ ol.Map.prototype.getViewport = function() {
 
 /**
  * @return {Element} The map's overlay container. Elements added to this
- * container won't let mousedown and touchstart events through to the map, so
+ * container will let mousedown and touchstart events through to the map, so
- * clicks and gestures on an overlay don't trigger any MapBrowserEvent.
+ * clicks and gestures on an overlay will trigger MapBrowserEvent events.
  */
 ol.Map.prototype.getOverlayContainer = function() {
   return this.overlayContainer_;
 };
 
 
+/**
+ * @return {Element} The map's overlay container. Elements added to this
+ * container won't let mousedown and touchstart events through to the map, so
+ * clicks and gestures on an overlay don't trigger any MapBrowserEvent.
+ */
+ol.Map.prototype.getOverlayContainerStopEvent = function() {
+  return this.overlayContainerStopEvent_;
+};
+
+
 /**
  * @param {ol.Tile} tile Tile.
  * @param {string} tileSourceKey Tile source key.

src/ol/overlay.js

@@ -60,6 +60,12 @@ ol.Overlay = function(options) {
 
   goog.base(this);
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : false;
+
   /**
    * @private
    * @type {Element}
@@ -202,8 +208,10 @@ ol.Overlay.prototype.handleMapChanged = function() {
     this.mapPostrenderListenerKey_ = goog.events.listen(map,
         ol.MapEventType.POSTRENDER, this.handleMapPostrender, false, this);
     this.updatePixelPosition_();
-    goog.dom.append(
+    goog.dom.append(/** @type {!Node} */ (
-        /** @type {!Node} */ (map.getOverlayContainer()), this.element_);
+        this.stopEvent_ ? map.getOverlayContainerStopEvent() :
+                          map.getOverlayContainer()),
+        this.element_);
   }
 };