Using JSONP with Leaflet and GetFeatureInfo request

Question

Is it possible to use JSONP with the GetFeatureInfo request?

I'm using a GetFeatureInfo function in Leaflet that works fine with JSON data but I'm really struggling to replicate this with JSONP and get a CORS error. The server does have JSONP enabled.

I've have a function that fills a popup but below I'm just logging the data.

var wmsURL = 'http://maps.dartmoor.gov.uk/geoserver/wms?version=1.1.1&REQUEST=GetFeatureInfo&layers=general:tpo_points&BBOX='+BBOX+'&FEATURE_COUNT=5&outputFormat=text/javascript&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&query_layers=general:tpo_points&SRS=EPSG:4326&X='+X+'&Y='+Y+'&format_options=callback:getJson';

    $.ajax({
            url:wmsURL,
            type: "GET",
            datatype: "jsonp", 
            jsonpCallback: 'getJson',
            contentType: 'application/json',
            success: function (data) {console.log(data)}
            });

Answer 1

This is how I do it for a GeoServer WMS endpoint:

var parameters = {
  service: 'WMS',
  version: '1.1.1',
  request: 'GetFeatureInfo',
  layers: currentLayer,
  query_layers: currentLayer,
  feature_count: 10,
  info_format: 'text/javascript',
  format_options: 'callback:handleJson',
  SrsName: 'EPSG:4326',
  width: 101,
  height: 101,
  x: 50,
  y: 50,
  bbox: (lng - 0.1) + ',' + (lat - 0.1) + ',' + (lng + 0.1) + ',' + (lat + 0.1)
}
var url = owsurl + L.Util.getParamString(parameters)
$.ajax({
  url: owsurl + L.Util.getParamString(parameters),
  dataType: 'jsonp',
  success: function (data) {
    handleJson(data)
  }
})

The bbox is a bit rough, but it works for me. You might need to have a smaller box (extend it by less than 0.1 degree).

My handleJson method is a bit complex, so I wont include it here, but you can follow the examples on the Leaflet doco for handling regular JSON at this point.

Also keep in mind that you may want to enable CORS on your server. And if you're getting CORS errors, you are probably not being returned JSONP, but regular JSON.

Answer 2

Yes you can use JSONP with the GetFeatureInfo-Request.

Example with static URL(for testing):

    var wmsURL = 'http://belstone.nationalparks.gov.uk/geoserver/general/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&QUERY_LAYERS=general:tpo_points&LAYERS=general:tpo_points&INFO_FORMAT=text/javascript&FEATURE_COUNT=5&X=50&Y=50&SRS=EPSG:27700&WIDTH=101&HEIGHT=101&BBOX=269291.6026625545,66769.35257397332,277003.10021540907,74480.85012682788&format_options=callback:getJson'

    $.ajax({
            jsonp: false,
            url: wmsURL,
            dataType: 'jsonp',
            jsonpCallback: 'getJson',
            success: handleJson_featureRequest
        });

function handleJson_featureRequest(data) 
        {
            console.log(data);
        }

Working jsfiddle (watch output of console.log):

http://jsfiddle.net/expedio/xovLvt0h/

PS: In case it's irritating that in this example there is also a GetFeatureRequest for visualizing the points here is also a basic example with just the GetFeatureInfo-Request: http://jsfiddle.net/expedio/0hteqraq/