Add WMS map server support on a per-map basis

elastic · Aug 18, 2015 · b20d83a · b20d83a
1 parent 5a8f770
commit b20d83a
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 2 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="isWMS"
+    ng-model="vis.params.isWMS">
+
+    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.isWMS" 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.isWMS"
+      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."></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,17 @@ define(function (require) {
           heatRadius: 25,
           heatBlur: 15,
           heatNormalizeData: true,
+          wms: {
+            url: 'http://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WMSServer',
+            options: {
+              version: '1.3.0',
+              layers: '0,1,2',
+              format: 'image/png',
+              transparent: true,
+              attribution: 'Maps provided by USGS',
+              styles: '',
+            }
+          }
         },
         mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
         canDesaturate: !!supports.cssFilters,

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.isWMS) {
+        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;