diff --git a/examples/external-map.js b/examples/external-map.js
index 9a42661061..358f57cf43 100644
--- a/examples/external-map.js
+++ b/examples/external-map.js
@@ -2,14 +2,29 @@ import Map from '../src/ol/Map.js';
import OSM from '../src/ol/source/OSM.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
-import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
+import {
+ Control,
+ FullScreen,
+ defaults as defaultControls,
+} from '../src/ol/control.js';
import {fromLonLat} from '../src/ol/proj.js';
+class UnusableMask extends Control {
+ constructor() {
+ super({
+ element: document.createElement('div'),
+ });
+ this.element.setAttribute('hidden', 'hidden');
+ this.element.className = 'ol-mask';
+ this.element.innerHTML = 'Map not usable
';
+ }
+}
+
const localMapTarget = document.getElementById('map');
const map = new Map({
target: localMapTarget,
- controls: defaultControls().extend([new FullScreen()]),
+ controls: defaultControls().extend([new FullScreen(), new UnusableMask()]),
layers: [
new TileLayer({
source: new OSM(),
@@ -43,20 +58,19 @@ function updateOverlay() {
if (!mapWindow) {
return;
}
- const container = mapWindow.document.querySelector('.container');
- if (!container) {
+ const externalMapTarget = mapWindow.document.getElementById('map');
+ if (!externalMapTarget) {
return;
}
- const externalMapTarget = mapWindow.document.getElementById('map');
if (document.visibilityState === 'visible') {
// Show controls and enable keyboard input
- container.classList.remove('unusable');
+ externalMapTarget.classList.remove('unusable');
externalMapTarget.setAttribute('tabindex', '0');
externalMapTarget.focus();
} else {
// Hide all controls and disable keyboard input
externalMapTarget.removeAttribute('tabindex');
- container.classList.add('unusable');
+ externalMapTarget.classList.add('unusable');
}
}
window.addEventListener('visibilitychange', updateOverlay);
diff --git a/examples/resources/external-map-map.html b/examples/resources/external-map-map.html
index 8526da9a6d..0bc2512495 100644
--- a/examples/resources/external-map-map.html
+++ b/examples/resources/external-map-map.html
@@ -6,39 +6,25 @@
body {
margin: 0;
}
- .container {
- position: relative;
- height: 100%;
- width: 100%;
- }
- #unusable-overlay,
.map {
- position: absolute;
- top: 0;
- left: 0;
height: 100%;
- width: 100%;
}
- .unusable #unusable-overlay {
- background-color: rgba(0, 0, 0, .7);
- font-size: 3rem;
- font-weight: bold;
- color: white;
+ .map.unusable .ol-mask {
+ height: 100%;
display: flex;
align-items: center;
- user-select: none;
justify-content: center;
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ user-select: none;
+ background-color: rgba(0, 0, 0, .7);
+ color: white;
+ font: bold 3rem 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
- .unusable .map .ol-control {
+ .map.unusable .ol-control {
display: none;
}
-
+
-
- Map not usable
-
diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js
index 6c91aeb449..429c1bfc90 100644
--- a/src/ol/control/FullScreen.js
+++ b/src/ol/control/FullScreen.js
@@ -229,7 +229,7 @@ class FullScreen extends Control {
if (this.source_) {
element =
typeof this.source_ === 'string'
- ? document.getElementById(this.source_)
+ ? doc.getElementById(this.source_)
: this.source_;
} else {
element = map.getTargetElement();