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';

            type: "GET",
            datatype: "jsonp", 
            jsonpCallback: 'getJson',
            contentType: 'application/json',
            success: function (data) {console.log(data)}
  • I suppose you should use info_format "text/javascript". – user30184 Sep 21 '16 at 11:16
  • Thanks but that doesn't make a difference. In fact I don't think I need to specify the info_format at all so will edit the question. – Matt T Sep 21 '16 at 12:09
  • Info_format is indeed optional for GetFeatureInfo but standard does not say which format server should use as default format if server supports several formats like this server does. It may work as you wish without info_format but then it is by chance. I would absolutely keep info_format. – user30184 Sep 21 '16 at 14:47

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'

            jsonp: false,
            url: wmsURL,
            dataType: 'jsonp',
            jsonpCallback: 'getJson',
            success: handleJson_featureRequest

function handleJson_featureRequest(data) 

Working jsfiddle (watch output of console.log):


console.log output of Request

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/

  • Thanks to you and @Alex Leith for your replys. Both really good solutions. Using yours made me realise that I had a typo and was using datatype instead of dataType. – Matt T Sep 22 '16 at 8:10

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)
  url: owsurl + L.Util.getParamString(parameters),
  dataType: 'jsonp',
  success: function (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.

  • 1
    Cheers Alex. I like the bounding box trick. I know the handleJson fuction you're referring to that you use in Storm water map. – Matt T Sep 22 '16 at 8:12
  • Good to know, @MattT! Here's my latest effort at a nice Leaflet map: github.com/alexgleith/tasmap.org tasmap.org - it's trying to be generic, but for Tassie. You can pretty easily point it at any GeoServer and it should just work =) – Alex Leith Sep 23 '16 at 4:36
  • 1
    Thanks for the answer, which helped me a lot. I had to make one minor change - SrsName worked better for me as SRS. Also I noticed that the success function on the AJAX call is superfluous, since the handleJson function is called by the AJAX callback anyway – Stephen Lead Mar 3 '17 at 2:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.