5

I am attempting to add multiple WFS layers from GeoServer into a Leaflet map using JQuery ajax calls. It works if I set async: false, but this is deprecated and should not be used. If I remove async: false, not all layers load. I've enabled jsonp in GeoServer and on the webserver, and that part seems to work. How can I load multiple WFS layers?

var map = L.map('map', {
    center: [<lat>, <lon>],
    zoom: 12,
    minZoom: 11,
    maxZoom: 21
});

var tileLayer_OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 22,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var baseMaps = {
    "Base Map (OSM Colour)": tileLayer_OpenStreetMap_Mapnik

};

tileLayer_OpenStreetMap_Mapnik.addTo(map);

var popup = L.popup();
function onEachFeature(feature, layer) {
    var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push('<tr><td><strong>' + prop + ': </strong></td><td>' + feature.properties[prop] + '</td></tr>');
    }
    layer.bindPopup('<table>' + popupcontent.join("</tr>") + '</table>');
};


var owsrootUrl = 'http://myurl/geoserver/ows';

function doGetJson(layerName) {
    var defaultParameters = {
        service : 'WFS',
        version : '2.0',
        request : 'GetFeature',
        typeName : layerName,
        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;
    return $.ajax({
        url : URL,
        dataType : 'jsonp',
        async: false,
        jsonpCallback : 'getJson',
        index: i,
        success : handleJson
    });
};

function handleJson(data) {
    WFSLayer = L.geoJson(data, {
        style: function (feature) {
            //style the objects based on type of geometry
            switch (feature.geometry.type)
            {
                case 'Polygon' : return {
                        color: '#000000',
                        fillColor: '#000000',
                        fillOpacity: 1,
                        weight: 2
                };
                case 'LineString' : return {
                        color: '#000000',
                        opacity: '#000000',
                        weight: 2
                };                      
            }
        },
        crs: L.CRS.EPSG4326,
        onEachFeature: onEachFeature
    });
    map.addLayer(WFSLayer);
};


var layers = "<WORKSPACE NAME>:<LAYER NAME1>,<WORKSPACE NAME>:<LAYER NAME2>,<WORKSPACE NAME>:<LAYER NAME3>".split(",");
for (var i = 0; i<layers.length ; i++ )
{   
    doGetJson(layers[i]);
}
  • Seems ironic that you have to explicitly state async=false when using Asynchronous JavaScript and XML (AJAX) – nmtoken Jun 5 '17 at 12:34
2

It turns out that I think JQuery is re-using the callback function name "getJson". To avoid this, I create callback function names for each layer using the actual GeoServer layer name. My layer names are in the "layers" array in the form WORKSPACE NAME:LAYER NAME. So in the above code, wherever I referenced the callback function "getJson" I replaced it with:

layerName.replace(":","");

So the function doGetJson now looks like this:

function doGetJson(layerName) {
var defaultParameters = {
    service : 'WFS',
    version : '2.0',
    request : 'GetFeature',
    typeName : layerName,
    outputFormat : 'text/javascript',
    format_options : 'callback:' + layerName.replace(":",""),
    SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);
var WFSLayer = null;
return $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : layerName.replace(":",""),
    index: i,
    success : handleJson
});

};

This makes each callback unique. Now it works.

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.