Access data from an OGC WMS server and return JSON or GeoJSON for MapBox map

Question

How can I use a freely available public WMS server with Government Survey Permanent marks for a web application I am building?

This "GetCapabilities" xml: https://spatial-gis.information.qld.gov.au/arcgis/services/Location/SurveyControl/MapServer/WMSServer?request=GetCapabilities&service=WMS is where to start, but I am not exactly sure how to build a query string to return data to put into a MapBox or Leaflet type map.

I've tried a heap of combos, but regularly end up with errors like "Parameter 'layers' cannot be empty" on a request like this: https://spatial-gis.information.qld.gov.au/arcgis/services/Location/SurveyControl/MapServer/WmsServer?service=WMS&version=1.3.0&request=GetFeatureInfo&layers=destroyed&styles=&crs=EPSG:4326&bbox=136.891955,-29.734784,155.770310,-9.142266&width=1000&height=1000&info_format=application/geojson&format=application/geojson

Can anyone suggest an example of a working http request that returns some data? Once I see how this is done I should be right to go.

Answer 1

When in doubt you can read the standard which explains all the parameters that you need. However, since WMS is an open standard there are many clients out there that already know how to view WMS maps so perhaps you could consider using one of those rather than reinventing the wheel.

Answer 2

What is missing in your GetFeatureInfo request is query_layers parameter which is usually the same as layers parameter.

When trying to display Destroyed layer in Leaflet, it seemed to be empty. I had more success with CORS Sites layer.

Here is the code I used to display CORS Sites layer and get feature info on feature click:

L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
  onAdd: function (map) {
    L.TileLayer.WMS.prototype.onAdd.call(this, map);
    map.on('click', this.getFeatureInfo, this);
  },
  onRemove: function (map) {
    L.TileLayer.WMS.prototype.onRemove.call(this, map);
    map.off('click', this.getFeatureInfo, this);
  },
  getFeatureInfo: function (evt) {
    var url = this.getFeatureInfoUrl(evt.latlng),
        showResults = L.Util.bind(this.showGetFeatureInfo, this);
    $.ajax({
      url: url,
      success: function (data, status, xhr) {
        var err = typeof data === 'string' ? null : data;
        showResults(err, evt.latlng, data);
      },
      error: function (xhr, status, error) {
        showResults(error);  
      }
    });
  },
  getFeatureInfoUrl: function (latlng) {
    var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
        size = this._map.getSize(),
        params = {
          request: 'GetFeatureInfo',
          service: 'WMS',
          styles: this.wmsParams.styles,
          transparent: this.wmsParams.transparent,
          version: this.wmsParams.version,      
          format: this.wmsParams.format,
          bbox: this._map.getBounds().toBBoxString(),
          height: size.y,
          width: size.x,
          layers: this.wmsParams.layers,
          query_layers: this.wmsParams.layers,
          info_format: 'text/html',
        };
    params[params.version === '1.3.0' ? 'i' : 'x'] = Math.round(point.x);
    params[params.version === '1.3.0' ? 'j' : 'y'] = Math.round(point.y);
    params[params.version === '1.3.0' ? 'crs' : 'srs'] = 'EPSG:4326';
              
    var url = this._url + L.Util.getParamString(params, this._url, true);
    
    if(typeof this.wmsParams.proxy !== "undefined") {
      console.log(this.wmsParams.proxy, this.wmsParams.proxyParamName);
      if(typeof this.wmsParams.proxyParamName == "undefined") {
        this.wmsParams.proxyParamName = 'url';
      }
      _proxy = this.wmsParams.proxy + '?' + this.wmsParams.proxyParamName + '=';
      url = _proxy + encodeURIComponent(url);
    } 
    return url;
  },
  
  showGetFeatureInfo: function (err, latlng, content) {
    if (err) { console.log(err); return; }
    content = '<div style="width: 100%; overflow-x: auto">' + content + '<div>';
    L.popup({maxWidth: 800, offset: L.point(0, - 10)})
      .setLatLng(latlng)
      .setContent(content)
      .openOn(this._map);
  }
});

L.tileLayer.betterWms = function (url, options) {
  return new L.TileLayer.BetterWMS(url, options);  
};

var map = L.map('map', {
  center: [-27, 152],
  zoom: 8
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var url = 'https://spatial-gis.information.qld.gov.au:443/arcgis/services/Location/SurveyControl/MapServer/WMSServer';      
L.tileLayer.betterWms(url, {
  layers: 'CORS sites',
  transparent: true,
  format: 'image/gif',
}).addTo(map);

This is the result with one feature info displayed upon click:

Code above uses WMS 1.1.1. When I tried WMS 1.3.0, GetFeatureInfo returned empty result. I didn't try to find the reason, since I copied code for L.TileLayer.BetterWMS from somewhere a long time ago.