When using WMS, the zoom settings of the manifest should not be used (#11707)

When a user configures a WMS, we should not use the zoom-settings from the manifest. These depend on the user's license level, and are not relevant when using a 3rd party WMS service.

src/ui/public/vis_maps/kibana_map.js

@@ -293,6 +293,10 @@ export class KibanaMap extends EventEmitter {
     return this._leafletMap.getZoom();
   }
 
+  getMaxZoomLevel() {
+    return this._leafletMap.getMaxZoom();
+  }
+
   getAutoPrecision() {
     return zoomToPrecision(this._leafletMap.getZoom(), 12, this._leafletMap.getMaxZoom());
   }

src/ui/public/vis_maps/lib/tilemap_settings.js

@@ -12,7 +12,6 @@ uiModules.get('kibana')
   .service('tilemapSettings', function ($http, tilemapsConfig, $sanitize, kbnVersion) {
     const attributionFromConfig = $sanitize(marked(tilemapsConfig.deprecated.config.options.attribution || ''));
     const optionsFromConfig = _.assign({}, tilemapsConfig.deprecated.config.options, { attribution: attributionFromConfig });
-
     const extendUrl = (url, props) => (
       modifyUrl(url, parsed => _.merge(parsed, props))
     );

src/ui/public/vis_maps/maps_renderbot.js

@@ -24,6 +24,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       this._buildChartData = buildChartData.bind(this);
       this._geohashLayer = null;
       this._kibanaMap = null;
+      this._$container = $el;
       this._kibanaMapReady = this._makeKibanaMap($el);
 
       this._baseLayerDirty = true;
@@ -39,7 +40,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       });
     }
 
-    async _makeKibanaMap($el) {
+    async _makeKibanaMap() {
 
       if (!tilemapSettings.isInitialized()) {
         await tilemapSettings.loadSettings();
@@ -51,8 +52,11 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         notify.warning(tilemapSettings.getError().message);
       }
 
-      const containerElement = $($el)[0];
+      if (this._kibanaMap) {
-      const options = _.clone(tilemapSettings.getMinMaxZoom(false));
+        this._kibanaMap.destroy();
+      }
+      const containerElement = $(this._$container)[0];
+      const options = _.clone(this._getMinMaxZoom());
       const uiState = this.vis.getUiState();
       const zoomFromUiState = parseInt(uiState.get('mapZoom'));
       const centerFromUIState = uiState.get('mapCenter');
@@ -104,6 +108,11 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       });
     }
 
+    _getMinMaxZoom() {
+      const mapParams = this._getMapsParams();
+      return tilemapSettings.getMinMaxZoom(mapParams.wms.enabled);
+    }
+
     _recreateGeohashLayer() {
       if (this._geohashLayer) {
         this._kibanaMap.removeLayer(this._geohashLayer);
@@ -146,10 +155,17 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
     updateParams() {
 
       this._paramsDirty = true;
-      this._kibanaMapReady.then(() => {
+      this._kibanaMapReady.then(async() => {
         const mapParams = this._getMapsParams();
+        const { minZoom, maxZoom } = this._getMinMaxZoom();
+
         if (mapParams.wms.enabled) {
-          const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
+
+          if (maxZoom > this._kibanaMap.getMaxZoomLevel()) {
+            this._geohashLayer = null;
+            this._kibanaMapReady = this._makeKibanaMap();
+          }
+
           this._kibanaMap.setBaseLayer({
             baseLayerType: 'wms',
             options: {
@@ -160,6 +176,13 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
             }
           });
         } else {
+
+          if (maxZoom < this._kibanaMap.getMaxZoomLevel()) {
+            this._geohashLayer = null;
+            this._kibanaMapReady = this._makeKibanaMap();
+            this._kibanaMap.setZoomLevel(maxZoom);
+          }
+
           if (!tilemapSettings.hasError()) {
             const url = tilemapSettings.getUrl();
             const options = tilemapSettings.getTMSOptions();

test/functional/apps/visualize/_tile_map.js

@@ -305,6 +305,42 @@ export default function ({ getService, getPageObjects }) {
           expect(enabled).to.be(false);
         });
       });
+
+      it('wms switch should change allow to zoom in further', function () {
+
+        return PageObjects.visualize.collapseChart()
+          .then(function () {
+            return PageObjects.visualize.clickOptions();
+          })
+          .then(function () {
+            return PageObjects.visualize.selectWMS();
+          })
+          .then(function () {
+            return PageObjects.visualize.clickGo();
+          })
+          .then(function () {
+            return PageObjects.header.waitUntilLoadingHasFinished();
+          })
+          .then(function () {
+            return PageObjects.common.sleep(2000);
+          })
+          .then(function () {
+            return PageObjects.visualize.getMapZoomInEnabled();
+          })
+          .then(function (enabled) {//should be able to zoom in again
+            expect(enabled).to.be(true);
+          })
+          .then(function () {
+            return PageObjects.visualize.clickMapZoomIn();
+          })
+          .then(function () {
+            return PageObjects.visualize.getMapZoomInEnabled();
+          })
+          .then(function (enabled) {//should be able to zoom in again
+            expect(enabled).to.be(true);
+          });
+
+      });
     });
   });
 }

test/functional/page_objects/visualize_page.js

@@ -325,6 +325,21 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       });
     }
 
+    clickOptions() {
+      return remote
+        .setFindTimeout(defaultFindTimeout)
+        .findByPartialLinkText('Options')
+        .click();
+    }
+
+    selectWMS() {
+      return remote
+        .setFindTimeout(defaultFindTimeout)
+        .findByCssSelector('input[name="wms.enabled"]')
+        .click();
+    }
+
+
     saveVisualization(vizName) {
       return testSubjects.click('visualizeSaveButton')
       .then(() => {