From 69cee6a41028684f7b1dfe01134d8b86ba152dce Mon Sep 17 00:00:00 2001 From: Bruno Binet Date: Fri, 11 Oct 2013 12:31:48 +0200 Subject: [PATCH 1/7] Add insertFirst option in ol.OverlayOptions typedef --- src/objectliterals.jsdoc | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index e2b9e3ea75..3f1508a2ad 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -79,7 +79,9 @@ * projection. * @property {ol.OverlayPositioning|undefined} positioning Positioning. * @property {boolean|undefined} stopEvent Whether event propagation to the map - * should be stopped. Default is `false`. + * should be stopped. Default is `false`. + * @property {boolean|undefined} insertFirst Whether the overlay is inserted + * first in the container div, or appended. Default is `false`. * @todo stability experimental */ From 71097d9cfce1e81104911ff50c404fec1e5bd7be Mon Sep 17 00:00:00 2001 From: Bruno Binet Date: Fri, 11 Oct 2013 11:36:37 +0200 Subject: [PATCH 2/7] Insert or append overlay based on insertFirst option This is to fix z-index issues with overlays that pass above ol3 default controls. --- src/ol/overlay.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/ol/overlay.js b/src/ol/overlay.js index 00156e5079..d053f769be 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -62,6 +62,13 @@ ol.Overlay = function(options) { goog.base(this); + /** + * @private + * @type {boolean} + */ + this.insertFirst_ = goog.isDef(options.insertFirst) ? + options.insertFirst : false; + /** * @private * @type {boolean} @@ -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_); + } } }; From 86cfdf4da73e99081b6109ffd4706abe5683be31 Mon Sep 17 00:00:00 2001 From: Bruno Binet Date: Fri, 11 Oct 2013 13:51:14 +0200 Subject: [PATCH 3/7] Fix overlay z-index issue in popup example --- examples/popup.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/popup.js b/examples/popup.js index 5e012f07f9..58b9d72085 100644 --- a/examples/popup.js +++ b/examples/popup.js @@ -32,7 +32,8 @@ closer.onclick = function() { */ var overlay = new ol.Overlay({ element: container, - stopEvent: true + stopEvent: true, + insertFirst: true }); From 59eaa89a542c5e12b9f96e388210baa81f55b76c Mon Sep 17 00:00:00 2001 From: Bruno Binet Date: Fri, 11 Oct 2013 13:52:29 +0200 Subject: [PATCH 4/7] Fix overlay z-index issue in overlay example --- examples/overlay.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/overlay.js b/examples/overlay.js index 62f85230e3..03479fff9a 100644 --- a/examples/overlay.js +++ b/examples/overlay.js @@ -37,14 +37,16 @@ map.addOverlay(marker); var vienna = new ol.Overlay({ position: pos, element: document.getElementById('vienna'), - stopEvent: true + stopEvent: true, + insertFirst: true }); map.addOverlay(vienna); // Popup showing the position the user clicked var popup = new ol.Overlay({ element: document.getElementById('popup'), - stopEvent: true + stopEvent: true, + insertFirst: true }); map.addOverlay(popup); From 4e602fdb8d076c20c92969d3787750fc15f5a9f8 Mon Sep 17 00:00:00 2001 From: Bruno Binet Date: Fri, 11 Oct 2013 13:53:26 +0200 Subject: [PATCH 5/7] Set z-index: auto so that popup is not above controls --- examples/overlay.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/overlay.html b/examples/overlay.html index 6acde92fb1..9cfa3d8075 100644 --- a/examples/overlay.html +++ b/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; } From d7c696fc76b93ef4e7c9347be6e50be7d2fadc3f Mon Sep 17 00:00:00 2001 From: Bruno Binet Date: Fri, 11 Oct 2013 17:00:23 +0200 Subject: [PATCH 6/7] Improve doc for stopEvent and insertFirst options --- src/objectliterals.jsdoc | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 3f1508a2ad..3cb335e2b9 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -80,8 +80,12 @@ * @property {ol.OverlayPositioning|undefined} positioning Positioning. * @property {boolean|undefined} stopEvent Whether event propagation to the map * should be stopped. Default is `false`. + * If `stopEvent` is `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 container div, or appended. Default is `false`. + * This is usually used in conjunction with `stopEvent: true` so the + * overlay is below controls. * @todo stability experimental */ From 16b817b830a441c8ed979c47c6fbcf24c3eb30d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Wed, 30 Oct 2013 09:49:38 +0100 Subject: [PATCH 7/7] Overlay stopEvent and insertFirst default to true --- examples/geolocation.js | 3 ++- examples/icon.js | 3 ++- examples/overlay.js | 11 ++++------- examples/popup.js | 4 +--- src/objectliterals.jsdoc | 13 +++++++------ src/ol/overlay.js | 4 ++-- 6 files changed, 18 insertions(+), 20 deletions(-) diff --git a/examples/geolocation.js b/examples/geolocation.js index fce765f696..7fb3fe83f2 100644 --- a/examples/geolocation.js +++ b/examples/geolocation.js @@ -39,7 +39,8 @@ geolocation.on('change', function() { var marker = new ol.Overlay({ element: /** @type {Element} */ ($('').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. diff --git a/examples/icon.js b/examples/icon.js index 582bf2cca0..af0e158b30 100644 --- a/examples/icon.js +++ b/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); diff --git a/examples/overlay.js b/examples/overlay.js index 03479fff9a..bc5d12915c 100644 --- a/examples/overlay.js +++ b/examples/overlay.js @@ -29,24 +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, - insertFirst: 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, - insertFirst: true + element: document.getElementById('popup') }); map.addOverlay(popup); diff --git a/examples/popup.js b/examples/popup.js index 58b9d72085..944b5b8b8b 100644 --- a/examples/popup.js +++ b/examples/popup.js @@ -31,9 +31,7 @@ closer.onclick = function() { * Create an overlay to anchor the popup to the map. */ var overlay = new ol.Overlay({ - element: container, - stopEvent: true, - insertFirst: true + element: container }); diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 3cb335e2b9..c54b6bd31c 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -79,13 +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`. - * If `stopEvent` is `true`, the overlay is placed in the same container as - * that of the controls (`ol-overlaycontainer-stopevent`). + * 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 container div, or appended. Default is `false`. - * This is usually used in conjunction with `stopEvent: true` so the - * overlay is below controls. + * 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 */ diff --git a/src/ol/overlay.js b/src/ol/overlay.js index d053f769be..b8c843fcdc 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -67,13 +67,13 @@ ol.Overlay = function(options) { * @type {boolean} */ this.insertFirst_ = goog.isDef(options.insertFirst) ? - options.insertFirst : false; + options.insertFirst : true; /** * @private * @type {boolean} */ - this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : false; + this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : true; /** * @private