[GIS] How to load GeoJSON from GeoServer to define a variable in Leaflet

geojsongeoserverleafletwfs

How can I load a GeoJSON file from GeoServer in Leaflet? There are lots of suggestions out there, but none of them work for me.

Currently my app loads a js file from the server that starts like this:

var boundaries ={ - followed by the geojson file content

To speed things up (and make it work in older browsers) how do I define variable boundaries = { – GeoJSON from GeoServer?

All I have so far is (not working):

var owsrootUrl = 'http://185.19.29.22:8080/geoserver/cresh/ows';

var defaultParameters = {
    service : 'WFS',
    version : '1.0.0',
    request : 'GetFeature',
    typeName : 'cresh:datazone_popup',
    outputFormat : 'json',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var boundaries = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'json',
    jsonpCallback : 'getJson',
    success : function (response) {
        boundaries = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
                }
        });
    }
});

Geoserver is installed on the same server as my webapp and WFS is running.

Best Answer

Hi your url should be :
/geoserver/workspaceName/wfs?request=GetFeature&version=1.0.0&typeName=storeName:layerName&outputFormat=json

Keep the default style for now, If this doesn't work you should see an error message in your console, which will help you out!

Related Question