From 0f64bb7459c973ca8b3a772eaa8db3c0d35a54ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 13 Feb 2021 15:53:20 +0100 Subject: [PATCH 1/4] Invalid size set when map is not added to document Parsing of an empty string with parseFloat resulted in NaN. --- src/ol/PluggableMap.js | 20 +++++++++++--------- test/spec/ol/map.test.js | 7 +++++++ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index 7f53e2cd7b..ba6240206b 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -1496,9 +1496,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 - @@ -1512,15 +1511,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/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); From 73d288c191c22587efd231ef9d2db6dc0ca20bab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Mon, 15 Feb 2021 00:04:29 +0100 Subject: [PATCH 2/4] Fix initially empty overview map --- src/ol/control/OverviewMap.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index aab527e568..6e8833a013 100644 --- a/src/ol/control/OverviewMap.js +++ b/src/ol/control/OverviewMap.js @@ -322,6 +322,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(); } } From 022b8cdb626a27fad4d0f2567f43da7ce3ce9cef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sun, 14 Feb 2021 21:06:01 +0100 Subject: [PATCH 3/4] Fix layout of overview map The button should not change its position when the collapsed state changes. The overview map had a somewhat larger padding at the bottom due to being an inline-block element and the configured line-height of 1.5. --- src/ol/ol.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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; } From 59c76334b17d5dd6f64d68914584eebaa6b1aa6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sun, 14 Feb 2021 23:03:16 +0100 Subject: [PATCH 4/4] Draw box if OverviewMap is added to an existing map --- src/ol/control/OverviewMap.js | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index 6e8833a013..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_(); + } } } @@ -519,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 @@ -551,14 +573,7 @@ class OverviewMap extends Control { } ovmap.updateSize(); this.resetExtent_(); - listenOnce( - ovmap, - MapEventType.POSTRENDER, - function (event) { - this.updateBox_(); - }, - this - ); + this.updateBoxAfterOvmapIsRendered_(); } }