Map filter not set appropriately when spy panel is open (#13678) (#13707)

* get dimensions from parent elements when map has not height or width

* clean up test variable names

src/core_plugins/tile_map/public/__tests__/kibana_map.js

@@ -8,14 +8,19 @@ describe('kibana_map tests', function () {
   let domNode;
   let kibanaMap;
 
-  function setupDOM() {
-    domNode = document.createElement('div');
-    domNode.style.top = '0';
-    domNode.style.left = '0';
-    domNode.style.width = '512px';
-    domNode.style.height = '512px';
-    domNode.style.position = 'fixed';
-    domNode.style['pointer-events'] = 'none';
+  function createDiv(width, height) {
+    const div = document.createElement('div');
+    div.style.top = '0';
+    div.style.left = '0';
+    div.style.width = width;
+    div.style.height = height;
+    div.style.position = 'fixed';
+    div.style['pointer-events'] = 'none';
+    return div;
+  }
+
+  function setupDOM(width, height) {
+    domNode = createDiv(width, height);
     document.body.appendChild(domNode);
   }
 
@@ -28,7 +33,7 @@ describe('kibana_map tests', function () {
   describe('KibanaMap - basics', function () {
 
     beforeEach(async function () {
-      setupDOM();
+      setupDOM('512px', '512px');
       kibanaMap = new KibanaMap(domNode, {
         minZoom: 1,
         maxZoom: 10,
@@ -67,38 +72,86 @@ describe('kibana_map tests', function () {
 
   });
 
-  describe('KibanaMap - getUntrimmedBounds', function () {
 
-    beforeEach(async function () {
-      setupDOM();
-      domNode.style.width = '1600px';
-      domNode.style.height = '1024px';
-      kibanaMap = new KibanaMap(domNode, {
-        minZoom: 1,
-        maxZoom: 10,
-        center: [0,0],
-        zoom: 2
-      });
-    });
+  describe('getUntrimmedBounds', function () {
 
     afterEach(function () {
       kibanaMap.destroy();
       teardownDOM();
     });
 
-    it('should get untrimmed map bounds', function () {
-      const bounds = kibanaMap.getUntrimmedBounds(false);
-      expect(bounds.bottom_right.lon.toFixed(2)).to.equal('281.25');
-      expect(bounds.top_left.lon.toFixed(2)).to.equal('-281.25');
+    describe('extended bounds', function () {
+      beforeEach(async function () {
+        setupDOM('1600px', '1024px');
+        kibanaMap = new KibanaMap(domNode, {
+          minZoom: 1,
+          maxZoom: 10,
+          center: [0,0],
+          zoom: 2
+        });
+      });
+
+      it('should get untrimmed map bounds', function () {
+        const bounds = kibanaMap.getUntrimmedBounds();
+        expect(bounds.bottom_right.lon.toFixed(2)).to.equal('281.25');
+        expect(bounds.top_left.lon.toFixed(2)).to.equal('-281.25');
+      });
+    });
+
+    describe('no map height', function () {
+      beforeEach(async function () {
+        setupDOM('386px', '256px');
+        const noHeightNode = createDiv('386px', '0px');
+        domNode.appendChild(noHeightNode);
+        kibanaMap = new KibanaMap(noHeightNode, {
+          minZoom: 1,
+          maxZoom: 10,
+          center: [0,0],
+          zoom: 10
+        });
+      });
+
+      it('should calculate map dimensions based on parent element dimensions', function () {
+        const bounds = kibanaMap.getUntrimmedBounds();
+        expect(bounds).to.have.property('bottom_right');
+        expect(bounds.bottom_right.lon.toFixed(2)).to.equal('0.27');
+        expect(bounds.bottom_right.lat.toFixed(2)).to.equal('-0.18');
+        expect(bounds).to.have.property('top_left');
+        expect(bounds.top_left.lon.toFixed(2)).to.equal('-0.27');
+        expect(bounds.top_left.lat.toFixed(2)).to.equal('0.18');
+      });
+    });
+
+    describe('no map width', function () {
+      beforeEach(async function () {
+        setupDOM('386px', '256px');
+        const noWidthNode = createDiv('0px', '256px');
+        domNode.appendChild(noWidthNode);
+        kibanaMap = new KibanaMap(noWidthNode, {
+          minZoom: 1,
+          maxZoom: 10,
+          center: [0,0],
+          zoom: 10
+        });
+      });
+
+      it('should calculate map dimensions based on parent element dimensions', function () {
+        const bounds = kibanaMap.getUntrimmedBounds();
+        expect(bounds).to.have.property('bottom_right');
+        expect(bounds.bottom_right.lon.toFixed(2)).to.equal('0.27');
+        expect(bounds.bottom_right.lat.toFixed(2)).to.equal('-0.18');
+        expect(bounds).to.have.property('top_left');
+        expect(bounds.top_left.lon.toFixed(2)).to.equal('-0.27');
+        expect(bounds.top_left.lat.toFixed(2)).to.equal('0.18');
+      });
     });
   });
 
 
   describe('KibanaMap - attributions', function () {
 
-
     beforeEach(async function () {
-      setupDOM();
+      setupDOM('512px', '512px');
       kibanaMap = new KibanaMap(domNode, {
         minZoom: 1,
         maxZoom: 10,
@@ -138,10 +191,11 @@ describe('kibana_map tests', function () {
 
   });
 
+
   describe('KibanaMap - baseLayer', function () {
 
     beforeEach(async function () {
-      setupDOM();
+      setupDOM('512px', '512px');
       kibanaMap = new KibanaMap(domNode, {
         minZoom: 1,
         maxZoom: 10,

src/core_plugins/tile_map/public/kibana_map.js

@@ -398,15 +398,46 @@ export class KibanaMap extends EventEmitter {
 
     const southEast = bounds.getSouthEast();
     const northWest = bounds.getNorthWest();
-    const southEastLng = southEast.lng;
-    const northWestLng = northWest.lng;
-    const southEastLat = southEast.lat;
-    const northWestLat = northWest.lat;
+    let southEastLng = southEast.lng;
+    let northWestLng = northWest.lng;
+    let southEastLat = southEast.lat;
+    let northWestLat = northWest.lat;
 
-    //Bounds cannot be created unless they form a box with larger than 0 dimensions
-    //Invalid areas are rejected by ES.
+    // When map has not width or height, calculate map dimensions based on parent dimensions
     if (southEastLat === northWestLat || southEastLng === northWestLng) {
-      return;
+      let parent = this._containerNode.parentElement;
+      while (parent && (parent.clientWidth === 0 || parent.clientHeight === 0)) {
+        parent = parent.parentNode;
+      }
+      let width = 512;
+      let height = 512;
+      if (parent && parent.clientWidth !== 0) {
+        width = parent.clientWidth;
+      }
+      if (parent && parent.clientHeight !== 0) {
+        height = parent.clientHeight;
+      }
+
+      let top = 0;
+      let left = 0;
+      let bottom = height;
+      let right = width;
+      // no height - top is center of map and needs to be adjusted
+      if (southEastLat === northWestLat) {
+        top = height / 2 * -1;
+        bottom = height / 2;
+      }
+      // no width - left is center of map and needs to be adjusted
+      if (southEastLng === northWestLng) {
+        left = width / 2 * -1;
+        right = width / 2;
+      }
+      const containerSouthEast = this._leafletMap.layerPointToLatLng(L.point(right, bottom));
+      const containerNorthWest = this._leafletMap.layerPointToLatLng(L.point(left, top));
+      southEastLng = containerSouthEast.lng;
+      northWestLng = containerNorthWest.lng;
+      southEastLat = containerSouthEast.lat;
+      northWestLat = containerNorthWest.lat;
     }
 
     return {