How to get JSON from Geoserver using AJAX request

Question

I am building a web mapping application using Leaflet and a sort of customized WFS-T API to place and retrieve features from PostGIS. I have the script for putting features in PostGIS tables down solid, and I've managed to publish my tables as WFS services using Geoserver. My problem--which seems simple enough--is how to import those vector features back onto my map. I figured it would be easiest to go with the JSON option Geoserver provides, but when I make the below request using jQuery:

    $.ajax({
    url: "http://localhost:8090/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:markers&maxFeatures=50&outputFormat=json&callback=?",
    dataType: "jsonp",
    success: function() {
        //
    }
}).done(function ( data ) {
    console.log(data);
});

or:

    $.getJSON("http://localhost:8090/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:markers&maxFeatures=50&outputFormat=json&jsoncallback=?", function(data){ 
     console.log(data);
});

I get the following error:

SyntaxError: invalid label [Break On This Error]    
{"type":"FeatureCollection","features":[{"type":"Feature","id":"markers.1","geom...

Now, I know that these two functions are equivalent; what would seem to be a mismatch between specifying json in the url string and jsonp as the datatype is in fact correct because Javascript interprets the response as Javascript rather than true JSON. I've also figured out from reading other forum posts that the problem is the json script is not being properly contained in an object variable; the syntax error is due to missing parentheses on either side -- ({jsonobject}) -- like so. My question is, how the heck do I fix the syntax to get JavaScript to work with it? Obviously everything I want is coming through--it's just breaking because of a stupid syntax error that I can't figure out how to overcome. Any help on this would be much appreciated.

Answer 1

GeoServer has its own convention for JSONP callbacks, which is described here (coudn't find it mentioned in the official docs).

So I quickly hacked a jsfiddle showing how you can use it with jQuery, just remember to set the url, workspace and layers so that they point to your geoserver.

Answer 2

For anybody interested in how to correctly use ajax and return jsonp from geoserver this is how its done:

var url = "http://localhost:8080/geoserver/Common/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:markers&outputFormat=text/javascript&format_options=callback:getJson";

                    $.ajax({
                        jsonp: false,
                        jsonpCallback: 'getJson',
                        type: 'GET',
                        url: url,
                        async: false,
                        dataType: 'jsonp',
                        success: function(data) {
                            useMyJson(data);
                        }
                    });

Hopefully this helps someone.

Answer 3

Thanks unicoletti, the callback change worked. I now have:

$.ajax({
    url: "http://localhost:8090/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:markers&maxFeatures=50&outputFormat=json&format_options=callback:processMarkers",
    dataType: "jsonp",
});

and it returns the json, which I successfully added to my map as a layer using the callback function. After more research, I think the reason it will only return a jsonp (I also tried getting the GML and CSV, to no avail) is that I'm being blocked by the Same Origin Policy since I'm using Geoserver on localhost:8090 and actually serving my website through EnterpriseDB's PHP Apache server on localhost:8080. I've read that I can use Cross-Origin Resource Sharing as a workaround, but I can't figure out how to configure Geoserver to add the "Access-Control-Allow-Origin" HTTP Response header. If anyone has any bright ideas on how to do this in Windows that a complete noob can comprehend, I'd love to hear them.

Answer 4

first of all check if your server, and website are on same domain and port. Because of XSS (cross site-scripting) it can be hard to connect via AJAX to different domain. Secound of all this question is similar to this: How do I get GeoJSON data from GeoServer into show up on my Leaflet map? so I recommend you to use build-in geoserver method instead of using jQuery AJAX.