Merge pull request #4823 from lukasolson/enhancement/custom-map-url

Add WMS map server support
elastic · Sep 2, 2015 · a1f991f · a1f991f
2 parents 4463355 + 22269a5
commit a1f991f
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 3 deletions.
diff --git a/src/plugins/kbn_vislib_vis_types/public/editors/tile_map.html b/src/plugins/kbn_vislib_vis_types/public/editors/tile_map.html
@@ -113,6 +113,85 @@
 
     Desaturate map tiles
 
-    <kbn-info info="Reduce the vibrancy of tile colors, this does not work in any version of Internet Explorer"
+    <kbn-info info="Reduce the vibrancy of tile colors, this does not work in any version of Internet Explorer"></kbn-info>
   </label>
 </div>
+
+<div class="vis-option-item form-group">
+  <label>
+    <input type="checkbox"
+    name="wms.enabled"
+    ng-model="vis.params.wms.enabled">
+
+    WMS compliant map server
+
+    <kbn-info info="Use WMS compliant map tile server. For advanced users only."></kbn-info>
+  </label>
+</div>
+
+<div ng-show="vis.params.wms.enabled" class="well">
+  <div class="vis-option-item form-group">
+
+    <p>
+      WMS maps are 3rd party mapping services that have not been verified to work with Kibana. 
+      These should be considered expert settings.
+    </p>
+
+    <label>
+      WMS url*
+    </label>
+    <input type="text" class="form-control"
+      name="wms.url"
+      ng-model="vis.params.wms.url">    
+  </div>
+
+  <div class="vis-option-item form-group">
+    <label>
+      WMS layers* <kbn-info info="A comma seperated list of layers to use."></kbn-info>
+    </label>
+    <input type="text" class="form-control"
+      ng-require="vis.params.wms.enabled"
+      ng-model="vis.params.wms.options.layers"   
+      name="wms.options.layers">
+  </div>
+
+  <div class="vis-option-item form-group">
+    <label>
+      WMS version* <kbn-info info="The version of WMS the server supports"></kbn-info>
+    </label>
+    <input type="text" class="form-control"
+      name="wms.options.version"
+      ng-model="vis.params.wms.options.version">    
+  </div>
+
+  <div class="vis-option-item form-group">
+    <label>
+      WMS format* <kbn-info info="Usually image/png or image/jpeg. Use png if the server will return transparent layers"></kbn-info>
+    </label>
+    <input type="text" class="form-control"
+      name="wms.options.format"
+      ng-model="vis.params.wms.options.format">    
+  </div>
+
+  <div class="vis-option-item form-group">
+    <label>
+      WMS attribution <kbn-info info="Attribution string for the lower right corner<"></kbn-info>
+    </label>
+    <input type="text" class="form-control"
+      name="wms.options.attribution"
+      ng-model="vis.params.wms.options.attribution">    
+  </div>
+
+  <div class="vis-option-item form-group">
+    <label>
+      WMS styles* <kbn-info info="A comma seperated list of WMS server supported styles to use. Blank in most cases."></kbn-info>
+    </label>
+    <input type="text" class="form-control"
+      name="wms.options.styles"
+      ng-model="vis.params.wms.options.styles">    
+  </div>
+
+  <p>* if this parameter is incorrect, maps will fail to load.</p>
+
+
+</div>
diff --git a/src/plugins/kbn_vislib_vis_types/public/tileMap.js b/src/plugins/kbn_vislib_vis_types/public/tileMap.js
@@ -22,6 +22,7 @@ define(function (require) {
           heatRadius: 25,
           heatBlur: 15,
           heatNormalizeData: true,
+          wms: config.get('visualization:tileMap:WMSdefaults')
         },
         mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
         canDesaturate: !!supports.cssFilters,

diff --git a/src/ui/public/Vis/Vis.js b/src/ui/public/Vis/Vis.js
@@ -70,7 +70,10 @@ define(function (require) {
       if (_.isString(this.type)) this.type = visTypes.byName[this.type];
 
       this.listeners = _.assign({}, state.listeners, this.type.listeners);
-      this.params = _.defaults({}, _.cloneDeep(state.params || {}), this.type.params.defaults || {});
+      this.params = _.defaults({},
+        _.cloneDeep(state.params || {}),
+        _.cloneDeep(this.type.params.defaults || {})
+      );
 
       this.aggs = new AggConfigs(this, state.aggs);
     };

diff --git a/src/ui/public/config/defaults.js b/src/ui/public/config/defaults.js
@@ -77,6 +77,22 @@ define(function () {
         'search-aggregations-bucket-geohashgrid-aggregation.html#_cell_dimensions_at_the_equator" target="_blank">' +
         'Explanation of cell dimensions.</a>',
       },
+      'visualization:tileMap:WMSdefaults': {
+        value: JSON.stringify({
+          enabled: false,
+          url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WMSServer',
+          options: {
+            version: '1.3.0',
+            layers: '0',
+            format: 'image/png',
+            transparent: true,
+            attribution: 'Maps provided by USGS',
+            styles: '',
+          }
+        }, null, '  '),
+        type: 'json',
+        description: 'Default properties for the WMS map server support in the tile map'
+      },
       'csv:separator': {
         value: ',',
         description: 'Separate exported values with this string',

diff --git a/src/ui/public/vislib/__tests__/visualizations/tile_maps/map.js b/src/ui/public/vislib/__tests__/visualizations/tile_maps/map.js
@@ -35,6 +35,8 @@ describe('TileMap Map Tests', function () {
     leafletMocks.tileLayer = { on: sinon.stub() };
     leafletMocks.map = { on: sinon.stub() };
     leafletStubs.tileLayer = sinon.stub(L, 'tileLayer', _.constant(leafletMocks.tileLayer));
+    leafletStubs.tileLayer.wms = sinon.stub(L.tileLayer, 'wms', _.constant(leafletMocks.tileLayer));
+
     leafletStubs.map = sinon.stub(L, 'map', _.constant(leafletMocks.map));
 
     TileMapMap = Private(require('ui/vislib/visualizations/_map'));
@@ -96,6 +98,14 @@ describe('TileMap Map Tests', function () {
       map._createMap({});
       expect(mapStubs.destroy.callCount).to.equal(1);
     });
+
+    it('should create a WMS layer if WMS is enabled', function () {
+      expect(L.tileLayer.wms.called).to.be(false);
+      map = new TileMapMap($mockMapEl, geoJsonData, {attr: {wms: {enabled: true}}});
+      map._createMap({});
+      expect(L.tileLayer.wms.called).to.be(true);
+      L.tileLayer.restore();
+    });
   });
 
   describe('attachEvents', function () {

diff --git a/src/ui/public/vislib/visualizations/_map.js b/src/ui/public/vislib/visualizations/_map.js
@@ -264,7 +264,11 @@ define(function (require) {
       this._mapZoom = _.get(this._geoJson, 'properties.zoom') || defaultMapZoom;
 
       // add map tiles layer, using the mapTiles object settings
-      this._tileLayer = L.tileLayer(mapTiles.url, mapTiles.options);
+      if (this._attr.wms && this._attr.wms.enabled) {
+        this._tileLayer = L.tileLayer.wms(this._attr.wms.url, this._attr.wms.options);
+      } else {
+        this._tileLayer = L.tileLayer(mapTiles.url, mapTiles.options);
+      }
 
       // append tile layers, center and zoom to the map options
       mapOptions.layers = this._tileLayer;