Merge pull request #12028 from MoonE/overview-map-no-initial-target

Overview map no initial target

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_();
   }
 

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_();
     }
   }
 

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;
 }