[GIS] How to add Geoserver WFS to Leaflet JS Application

geoserverleafletpostgiswfs

I have a PostGIS database and have successfully consumed a table into GeoServer and published a WFS. Are there REST endpoints available for these WFS' akin to ESRI's feature services? How are parameters to be constructed?

Best Answer

To learn more about the Rest-Module of geoserver i can recommend you this website: http://geoserver.geo-solutions.it/edu/en/rest/using_rest.html but I guess that you just want to load a WFS-Layer into your Leaflet-map, so you can have a look at this post:

http://blog.georepublic.info/2012/leaflet-example-with-wfs-t/ Here the Requests for the WFS-layer are written from scatch. I have tested it and it works.

Or this Leaflet-Plugin: https://github.com/flatrockgeo/leaflet.wfs-t

If you don't need WFS-T than on of these posts could be enough:

https://stackoverflow.com/questions/25187937/loading-geojson-layers-from-geoserver-to-leaflet-map-based-on-the-current-boundi (answer of user "user3919282")

or this post where it is explained how to enable jsonp in Geoserver: Getting WFS data from Geoserver into leaflet

I have tested this post (Answer from user "geomajor56") GeoServer 2.4.1: How to use JSONP in a WFS request? and made a JSFiddle: http://jsfiddle.net/expedio/8r1ncv6a/

Related Solutions

[GIS] Java client for WFS-T

The GeoTools library supports WFS-T.

By using the class org.geotools.data.wfs.WFSDataStoreFactory you can connect to a WFS service. A transaction can be created using any class that implements the interface org.geotools.data.Transaction, for instance, the class org.geotools.data.DefaultTransaction.

GeoTools has also classes that will allow you to work with features, filters and expressions.

An example of WFS-T update request using GeoTools can be found here.

Geoserver to Leaflet – Getting WFS Data from Geoserver into Leaflet

While you can set up a proxy with your webserver, there is an easier way.

First, enable JSONP in GeoServer.

Then form your data requests like this:

var owsrootUrl = 'https://<GEOSERVER URL - CHANGEME>/geoserver/ows';

var defaultParameters = {
    service : 'WFS',
    version : '2.0',
    request : 'GetFeature',
    typeName : '<WORKSPACE:LAYERNAME - CHANGEME>',
    outputFormat : 'text/javascript',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:4326'
};

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

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
        WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("Popup text, access attributes with feature.properties.ATTRIBUTE_NAME"
                    ,popupOptions);
            }
        }).addTo(map);
    }
});

This has the additional advantage on working on your test server, as it avoids cross site scripting issues due to the use of JSONP (quoted json objects, from my understanding).

For an example of this in action, see these two maps:

Code here (for posterity).

By the way, I use nginx for the webserver and have the proxy stuff working. If you would like to know how please let me know and I'll edit something in here.

EDIT: another way of getting rid of this error is enabling CORS in either Tomcat (or Jetty, maybe?) or your reverse proxy.

Best Answer

Related Solutions

[GIS] Java client for WFS-T

Geoserver to Leaflet – Getting WFS Data from Geoserver into Leaflet

Related Question