How to add a bounding box filter to this leaflet WFS request?

Question

I use this function to add an interactive layer to my leaflet application. It works great in most browsers, but fails due to time-out error on certain networks and browsers. The solution I think is to add a bounding box filter to this function. Could anybody tell me where to find the information or how to do this?

    var rootUrl = 'http://map.kecoviewer.com/geoserver/ows';

var defaultParameters = {
    service: 'WFS',
    version: '1.1.0',
    request: 'GetFeature',
    typeName: 'cresh:datazones_popup_mini',
    maxFeatures: 6505,
    outputFormat: 'text/javascript', 
    format_options: 'callback: getJson',
    srsName:'EPSG:4326'


};

var parameters = L.Util.extend(defaultParameters);
$.ajax({
    jsonp : false,
    url: rootUrl + L.Util.getParamString(parameters),
    dataType: 'jsonp',
   jsonpCallback: 'getJson',
    success: handleJson
});

var group = new L.featureGroup().addTo(map);
var geojsonlayer;
var featureLayer = new L.GeoJSON();
var defaultStyle = {weight: 0,opacity: 0,fillOpacity: 0};
var highlightStyle = {color: '#f7f90e',weight: 3,opacity: 1,fillOpacity: 0};
var currentlayer; 
function handleJson(data) {
    geojsonlayer=L.geoJson(data, {
        onEachFeature: function(feature, layer) {
            layer.setStyle(defaultStyle);

            (function(layer, properties) {
              layer.on("click", function (e) {
                if (currentlayer) currentlayer.setStyle(defaultStyle); 
                layer.setStyle(highlightStyle);
                window.open("http:\/\/map.kecoviewer.com\/birtviewer\/run?__report=report\/datazone_story_ig.rptdesign&Datazone="+properties.dz,"story")
                currentlayer = layer;
            });

            })(layer, feature.properties);
}
    }).addTo(group);

}

function getJson(data) {
console.log("callback function fired");
}

Answer 1

I would recommend to set a min zoom where you start loading the wfs. Then listen to the move-event of the map and grab the current-extent to make this extent part of the GetFeature-Request:

working jsfiddle here: http://jsfiddle.net/expedio/n5rsdhha/

( or fullscreen: http://jsfiddle.net/expedio/n5rsdhha/embedded/result/ ... here the start-zoom could perhaps be even higher)

and important javascript-part here:

var start_at_zoom = 8;

function onEachFeature(feature, layer) {
    // does this feature have a property named dz?
    if (feature.properties && feature.properties.dz) {
        layer.bindPopup(feature.properties.dz);
    }
}

var featureLayer = new L.GeoJSON(
    null, {
        onEachFeature: onEachFeature
    }).addTo(map);
load_wfs();

function loadGeoJson(data) {
    // console.log(data);
    featureLayer.clearLayers();

    featureLayer.addData(data);

}

map.on('moveend', load_wfs);

function load_wfs() {
    if (map.getZoom() > start_at_zoom) {
        var geoJsonUrl = 'http://map.kecoviewer.com/geoserver/wfs';
        var defaultParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'getFeature',
            typeName: 'cresh:datazones_popup_mini',
            maxFeatures: 3000,
            outputFormat: 'text/javascript',
            format_options: 'callback: getJson',
            srsName: 'EPSG:4326'
        };




        var customParams = {
            bbox: map.getBounds().toBBoxString()
        };
        var parameters = L.Util.extend(defaultParameters, customParams);
        console.log(geoJsonUrl + L.Util.getParamString(parameters));


        $.ajax({
            jsonp: false,
            url: geoJsonUrl + L.Util.getParamString(parameters),
            dataType: 'jsonp',
            jsonpCallback: 'getJson',
            success: loadGeoJson
        });

    } else {
        alert("please zoom in to see the polygons!");
        featureLayer.clearLayers();
    }
}