diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index d0ff8e5b92..7c35c43747 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -1480,9 +1480,8 @@ class PluggableMap extends BaseObject { updateSize() { const targetElement = this.getTargetElement(); - if (!targetElement) { - this.setSize(undefined); - } else { + let size = undefined; + if (targetElement) { const computedStyle = getComputedStyle(targetElement); const width = targetElement.offsetWidth - @@ -1496,15 +1495,18 @@ class PluggableMap extends BaseObject { parseFloat(computedStyle['paddingTop']) - parseFloat(computedStyle['paddingBottom']) - parseFloat(computedStyle['borderBottomWidth']); - if (height === 0 || width === 0) { - // eslint-disable-next-line - console.warn( - "No map visible because the map container's width or height are 0." - ); + if (!isNaN(width) && !isNaN(height)) { + size = [width, height]; + if (!hasArea(size)) { + // eslint-disable-next-line + console.warn( + "No map visible because the map container's width or height are 0." + ); + } } - this.setSize([width, height]); } + this.setSize(size); this.updateViewportSize_(); } diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index aab527e568..9fc0268252 100644 --- a/src/ol/control/OverviewMap.js +++ b/src/ol/control/OverviewMap.js @@ -306,6 +306,10 @@ class OverviewMap extends Control { this.resetExtent_(); } } + + if (!this.ovmap_.isRendered()) { + this.updateBoxAfterOvmapIsRendered_(); + } } } @@ -322,6 +326,11 @@ class OverviewMap extends Control { } const newView = this.getMap().getView(); this.bindView_(newView); + } else if ( + !this.ovmap_.isRendered() && + (event.key === MapProperty.TARGET || event.key === MapProperty.SIZE) + ) { + this.ovmap_.updateSize(); } } @@ -514,6 +523,24 @@ class OverviewMap extends Control { } } + /** + * @private + */ + updateBoxAfterOvmapIsRendered_() { + if (this.ovmapPostrenderKey_) { + return; + } + this.ovmapPostrenderKey_ = listenOnce( + this.ovmap_, + MapEventType.POSTRENDER, + function (event) { + delete this.ovmapPostrenderKey_; + this.updateBox_(); + }, + this + ); + } + /** * @param {MouseEvent} event The event to handle * @private @@ -546,14 +573,7 @@ class OverviewMap extends Control { } ovmap.updateSize(); this.resetExtent_(); - listenOnce( - ovmap, - MapEventType.POSTRENDER, - function (event) { - this.updateBox_(); - }, - this - ); + this.updateBoxAfterOvmapIsRendered_(); } } diff --git a/src/ol/ol.css b/src/ol/ol.css index 8c51bdad8c..1f6dfd7f93 100644 --- a/src/ol/ol.css +++ b/src/ol/ol.css @@ -245,7 +245,7 @@ } .ol-overviewmap .ol-overviewmap-map, .ol-overviewmap button { - display: inline-block; + display: block; } .ol-overviewmap .ol-overviewmap-map { border: 1px solid #7b98bc; @@ -253,8 +253,8 @@ margin: 2px; width: 150px; } -.ol-overviewmap:not(.ol-collapsed) button{ - bottom: 1px; +.ol-overviewmap:not(.ol-collapsed) button { + bottom: 2px; left: 2px; position: absolute; } diff --git a/test/spec/ol/map.test.js b/test/spec/ol/map.test.js index 4546c2f44d..e02a0bca83 100644 --- a/test/spec/ol/map.test.js +++ b/test/spec/ol/map.test.js @@ -687,6 +687,7 @@ describe('ol.Map', function () { }); describe('#setTarget', function () { + /** @type {Map|undefined} */ let map; beforeEach(function () { @@ -696,6 +697,12 @@ describe('ol.Map', function () { expect(map.handleResize_).to.be.ok(); }); + describe('map with target not attached to dom', function () { + it('has undefined as size with target not in document', function () { + expect(map.getSize()).to.be(undefined); + }); + }); + describe('call setTarget with null', function () { it('unregisters the viewport resize listener', function () { map.setTarget(null);