diff --git a/rendering/cases/icon-symbol-svg/expected.png b/rendering/cases/icon-symbol-svg/expected.png
index c604fbb9ed..a0da6fe76e 100644
Binary files a/rendering/cases/icon-symbol-svg/expected.png and b/rendering/cases/icon-symbol-svg/expected.png differ
diff --git a/rendering/cases/layer-vectortile-rotate-vector/expected.png b/rendering/cases/layer-vectortile-rotate-vector/expected.png
index 94878d923d..d1427b1065 100644
Binary files a/rendering/cases/layer-vectortile-rotate-vector/expected.png and b/rendering/cases/layer-vectortile-rotate-vector/expected.png differ
diff --git a/rendering/cases/layer-vectortile-rotate/expected.png b/rendering/cases/layer-vectortile-rotate/expected.png
index 4422c694e9..471cbbedb1 100644
Binary files a/rendering/cases/layer-vectortile-rotate/expected.png and b/rendering/cases/layer-vectortile-rotate/expected.png differ
diff --git a/rendering/cases/layer-vectortile-simple/expected.png b/rendering/cases/layer-vectortile-simple/expected.png
index 36f239e7f6..9e66f63f62 100644
Binary files a/rendering/cases/layer-vectortile-simple/expected.png and b/rendering/cases/layer-vectortile-simple/expected.png differ
diff --git a/rendering/cases/layer-vectortile-simple/main.js b/rendering/cases/layer-vectortile-simple/main.js
index 2a149087e3..539e864646 100644
--- a/rendering/cases/layer-vectortile-simple/main.js
+++ b/rendering/cases/layer-vectortile-simple/main.js
@@ -25,5 +25,5 @@ new Map({
render({
message: 'Vector tile layer renders',
- tolerance: 0.02
+ tolerance: 0.01
});
diff --git a/rendering/cases/linestring-style-css-filter/index.html b/rendering/cases/linestring-style-css-filter/index.html
index 11dee51983..f23d013313 100644
--- a/rendering/cases/linestring-style-css-filter/index.html
+++ b/rendering/cases/linestring-style-css-filter/index.html
@@ -1,6 +1,7 @@
+
diff --git a/rendering/cases/linestring-style-rotation/expected.png b/rendering/cases/linestring-style-rotation/expected.png
index 795e69ffb3..1c8be42515 100644
Binary files a/rendering/cases/linestring-style-rotation/expected.png and b/rendering/cases/linestring-style-rotation/expected.png differ
diff --git a/rendering/cases/linestring-style-rotation/main.js b/rendering/cases/linestring-style-rotation/main.js
index 98a8f76c57..135be9bbb8 100644
--- a/rendering/cases/linestring-style-rotation/main.js
+++ b/rendering/cases/linestring-style-rotation/main.js
@@ -67,4 +67,4 @@ new Map({
})
});
-render({tolerance: 0.02});
+render({tolerance: 0.01});
diff --git a/rendering/cases/rotated-view/expected.png b/rendering/cases/rotated-view/expected.png
index e7802f7b03..c7c7ca3efa 100644
Binary files a/rendering/cases/rotated-view/expected.png and b/rendering/cases/rotated-view/expected.png differ
diff --git a/rendering/cases/rotated-view/index.html b/rendering/cases/rotated-view/index.html
deleted file mode 100644
index 96cfb5a582..0000000000
--- a/rendering/cases/rotated-view/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
diff --git a/rendering/cases/stacking/expected.png b/rendering/cases/stacking/expected.png
new file mode 100644
index 0000000000..b8307e4a94
Binary files /dev/null and b/rendering/cases/stacking/expected.png differ
diff --git a/rendering/cases/stacking/main.js b/rendering/cases/stacking/main.js
new file mode 100644
index 0000000000..44f24bfc67
--- /dev/null
+++ b/rendering/cases/stacking/main.js
@@ -0,0 +1,82 @@
+/**
+ * Demonstrate stacking with z-index. Layers and controls
+ * can be ordered with z-index, but controls always appear
+ * above layers.
+ */
+
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Layer from '../../../src/ol/layer/Layer.js';
+import Control from '../../../src/ol/control/Control.js';
+import SourceState from '../../../src/ol/source/State.js';
+
+class Element extends Layer {
+ constructor(options, style) {
+ super(options);
+
+ const element = document.createElement('div');
+ element.style.position = 'absolute';
+ Object.assign(element.style, style);
+
+ this.element = element;
+ }
+
+ getSourceState() {
+ return SourceState.READY;
+ }
+
+ render() {
+ return this.element;
+ }
+}
+
+// elements for stacked controls
+const element1 = document.createElement('div');
+const style1 = element1.style;
+style1.position = 'absolute';
+style1.background = 'blue';
+style1.width = '25%';
+style1.height = '50%';
+style1.zIndex = '1';
+
+const element2 = document.createElement('div');
+const style2 = element2.style;
+style2.position = 'absolute';
+style2.background = 'orange';
+style2.width = '75%';
+style2.height = '25%';
+style2.zIndex = '-1';
+
+new Map({
+ target: 'map',
+ layers: [
+ new Element({
+ zIndex: 200
+ }, {
+ background: 'red',
+ width: '50%',
+ height: '100%'
+ }),
+ new Element({
+ zIndex: -200
+ }, {
+ background: 'green',
+ width: '100%',
+ height: '50%'
+ })
+ ],
+ controls: [
+ new Control({
+ element: element1
+ }),
+ new Control({
+ element: element2
+ })
+ ],
+ view: new View({
+ center: [0, 0],
+ zoom: 0
+ })
+});
+
+render();
diff --git a/rendering/cases/text-style/expected.png b/rendering/cases/text-style/expected.png
index e2eade5078..6cac4b25d5 100644
Binary files a/rendering/cases/text-style/expected.png and b/rendering/cases/text-style/expected.png differ
diff --git a/rendering/cases/text-style/main.js b/rendering/cases/text-style/main.js
index bd3e688e62..981551850d 100644
--- a/rendering/cases/text-style/main.js
+++ b/rendering/cases/text-style/main.js
@@ -120,4 +120,4 @@ new Map({
})
});
-render({tolerance: 0.05});
+render({tolerance: 0.02});
diff --git a/rendering/default/index.html b/rendering/default/index.html
index 96cfb5a582..c7131e82f1 100644
--- a/rendering/default/index.html
+++ b/rendering/default/index.html
@@ -1,6 +1,7 @@
+
diff --git a/rendering/test.js b/rendering/test.js
index 85d5660493..d6d0e93b61 100755
--- a/rendering/test.js
+++ b/rendering/test.js
@@ -24,6 +24,8 @@ const staticHandler = serveStatic(__dirname);
const defaultHandler = serveStatic(path.join(__dirname, 'default'));
+const srcHandler = serveStatic(path.join(__dirname, '..', 'src'));
+
function indexHandler(req, res) {
const items = [];
for (const key in config.entry) {
@@ -47,8 +49,8 @@ function notFound(req, res) {
return defaultHandler(req, res, () => indexHandler(req, res));
}
- // fall back to a listing of all cases
- indexHandler(req, res);
+ // next try the src directory (only needed for ol/ol.css)
+ return srcHandler(req, res, () => indexHandler(req, res));
};
}
diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js
index 38474eff8b..c4754fe77e 100644
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -19,7 +19,6 @@ import ViewHint from './ViewHint.js';
import {assert} from './asserts.js';
import {removeNode} from './dom.js';
import {listen, unlistenByKey, unlisten} from './events.js';
-import {stopPropagation} from './events/Event.js';
import EventType from './events/EventType.js';
import {createEmpty, clone, createOrUpdateEmpty, equals, getForViewAndSize, isEmpty} from './extent.js';
import {TRUE} from './functions.js';
@@ -260,6 +259,10 @@ class PluggableMap extends BaseObject {
* @type {!HTMLElement}
*/
this.overlayContainer_ = document.createElement('div');
+ this.overlayContainer_.style.position = 'absolute';
+ this.overlayContainer_.style.zIndex = '0';
+ this.overlayContainer_.style.width = '100%';
+ this.overlayContainer_.style.height = '100%';
this.overlayContainer_.className = 'ol-overlaycontainer';
this.viewport_.appendChild(this.overlayContainer_);
@@ -268,20 +271,11 @@ class PluggableMap extends BaseObject {
* @type {!HTMLElement}
*/
this.overlayContainerStopEvent_ = document.createElement('div');
+ this.overlayContainerStopEvent_.style.position = 'absolute';
+ this.overlayContainerStopEvent_.style.zIndex = '0';
+ this.overlayContainerStopEvent_.style.width = '100%';
+ this.overlayContainerStopEvent_.style.height = '100%';
this.overlayContainerStopEvent_.className = 'ol-overlaycontainer-stopevent';
- const overlayEvents = [
- EventType.CLICK,
- EventType.DBLCLICK,
- EventType.MOUSEDOWN,
- EventType.TOUCHSTART,
- EventType.MSPOINTERDOWN,
- MapBrowserEventType.POINTERDOWN,
- EventType.MOUSEWHEEL,
- EventType.WHEEL
- ];
- for (let i = 0, ii = overlayEvents.length; i < ii; ++i) {
- listen(this.overlayContainerStopEvent_, overlayEvents[i], stopPropagation);
- }
this.viewport_.appendChild(this.overlayContainerStopEvent_);
/**
@@ -917,6 +911,13 @@ class PluggableMap extends BaseObject {
// coordinates so interactions cannot be used.
return;
}
+ let target = mapBrowserEvent.originalEvent.target;
+ while (target instanceof HTMLElement) {
+ if (target.parentElement === this.overlayContainerStopEvent_) {
+ return;
+ }
+ target = target.parentElement;
+ }
this.focus_ = mapBrowserEvent.coordinate;
mapBrowserEvent.frameState = this.frameState_;
const interactionsArray = this.getInteractions().getArray();
diff --git a/src/ol/renderer/Composite.js b/src/ol/renderer/Composite.js
index ac7ae589c5..848ae3dc53 100644
--- a/src/ol/renderer/Composite.js
+++ b/src/ol/renderer/Composite.js
@@ -29,9 +29,9 @@ class CompositeMapRenderer extends MapRenderer {
*/
this.element_ = document.createElement('div');
const style = this.element_.style;
+ style.position = 'absolute';
style.width = '100%';
style.height = '100%';
- style.position = 'relative';
style.zIndex = '0';
this.element_.className = CLASS_UNSELECTABLE + ' ol-layers';