Request WFS from GeoServer with Jquery AJAX using INTERSECT cql_filter error

Question

I am trying to make an AJAX request from a Leaflet map with Jquery to GeoServer to return a WFS selection using the INTERSECT sql_filter param. I have it working fine using the BBOX sql_filter.

Successful request using BBOX filter

   var geojsonLayer = new L.GeoJSON();
   var currSelectionLayer = 'DRCOGPUB:rea_drcog_jurisdiction_county';
   var sw_lat = 39.93290692296977;
   var sw_long = -105.39459228515624;
   var ne_lat = 40.094882122321174;
   var ne_long = -105.150146484375;


   function loadGeoJson(data) {
            console.log(data);
            geojsonLayer.addData(data);
        }
   var geoJsonUrl = "http://gis.drcog.org/geoserver/DRCOGPUB/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+ currSelectionLayer +"&srsName=EPSG:4326&maxFeatures=10000&outputFormat=json&format_options=callback:getJson&cql_filter=BBOX(the_geom," + ne_long + "," + ne_lat + "," + sw_long + "," + sw_lat + ")"; 
        
   $.ajax({
            url: geoJsonUrl,
            dataType: 'jsonp',
            jsonpCallback: 'getJson',
            contentType: 'application/json',
            success: loadGeoJson
        });
   map.addLayer(geojsonLayer);

However, when I apply an INTERSECT filter I get this error:

Resource interpreted as Script but transferred with MIME type text/xml

Here is my code for trying to get the INTERSECT filter to work:

Un-successful request using INTERSECT filter

        var geojsonLayer = new L.GeoJSON();
        var currSelectionLayer = 'DRCOGPUB:rea_drcog_jurisdiction_county';

        function loadGeoJson(data) {
            console.log(data);
            geojsonLayer.addData(data);
        }

        var geoJsonUrl = "http://gis.drcog.org/geoserver/DRCOGPUB/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=" + currSelectionLayer + "&srsName=EPSG:4326&maxFeatures=10000&outputFormat=json&format_options=callback:loadGeoJson&cql_filter=INTERSECT(the_geom,%20POINT%20(-105.36369323730467%2040.10013461308659)";
        $.ajax({
            url: geoJsonUrl,
            dataType: 'jsonp',
            jsonpCallback: 'getJson',
            contentType: 'application/json',
            success: loadGeoJson
        });
        map.addLayer(geojsonLayer);

I have tried many variations on the AJAX request and tweaking my Apache config but have had no luck. Any ideas would be appreciated. Please let me know if you need more info.

---

I enabled the mime_module (mod_mime.so) in Apache and added the content type with this config code:

AddType text/javascript .js

---

Final Fixed Code:

        var geojsonLayer = new L.GeoJSON();
        var currSelectionLayer = 'DRCOGPUB:rea_drcog_jurisdiction_county';

        function loadGeoJson(data) {
            console.log(data);
            geojsonLayer.addData(data);
        }
        
        // using INTERSECT strategy
        var geoJsonUrl = "http://gis.drcog.org/geoserver/DRCOGPUB/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=" + currSelectionLayer + "&srsName=EPSG:4326&maxFeatures=10000&outputFormat=json&format_options=callback:getJson&cql_filter=INTERSECTS(the_geom,%20POINT(-104.986145%2039.733066))";
        $.ajax({
            url: geoJsonUrl,
            dataType: 'jsonp',
            jsonpCallback: 'getJson',
            contentType: 'application/json',
            success: loadGeoJson
        });
        map.addLayer(geojsonLayer);

Answer 1

I think the problem is that your request is malformed and so GeoServer is returning you a service exception as XML. Looking at your request it looks like your CQL filter parameter is missing a final bracket. The other issue is that there should not be a space between the word POINT and the opening bracket. And finally the filter function is INTERSECTS and not INTERSECT. You need to rewrite your CQL filter parameter to be:

cql_filter=INTERSECTS(the_geom,%20POINT(-105.36369323730467%2040.10013461308659))

Have a look at the bottom of this page for the geometric filters you can use.

---

Just ran your URL directly in the browser and the response back from the server is a service exception in XML:

Could not parse CQL filter list. Encountered "" at line 1, column 65. Was expecting one of: ")" ... "," ... Parsing : INTERSECT(the_geom, POINT (-105.36369323730467 40.10013461308659).

Which I think confirms my answer. Correcting your cql_filter parameter should sort the issue out.