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',


var parameters = L.Util.extend(defaultParameters);
    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) {

            (function(layer, properties) {
              layer.on("click", function (e) {
                if (currentlayer) currentlayer.setStyle(defaultStyle); 
                currentlayer = layer;

            })(layer, feature.properties);


function getJson(data) {
console.log("callback function fired");
  • What exactly is failing? The initial AJAX call or the window.open? Besides, your code is quite messed up at many places. – ghybs Nov 5 '15 at 12:34
  • Well, strange enough. The thing actually works but is very slow (causing a timeout in some cases). My question is how can I do this better? At the moment I think it is loading all 6505 features, next the layer changes style plus opens an iframe when clicked. Can I limit the size of the geojsonlayer by using a bounding box filter? Any positive suggestions very welcome. Thanks. – Ilona Kemeling Nov 5 '15 at 15:30
  • Oh, sorry. It's the the loading of the geojson layer which is the slow bit, once it's loaded it is nice and fast. – Ilona Kemeling Nov 5 '15 at 15:32
  • Thank you for having formatted your code, it is much easier to read now! :-) By loading, do you mean the downloading from your AJAX call, or the processing to convert the data into an L.geoJson layer? In the first case, you would have to see what options your remote service offers. It looks like you use a maxFeatures option, it does not help? In the second case, you would have to split your data into smaller chunks and add them to your L.geoJson layer by interval. – ghybs Nov 5 '15 at 15:44
  • 1
    Simply use map.getBounds(), maybe with a little bit of padding. Once you have that latLngBounds, you could try the toBBoxString() as value for your "bbox" parameter. Then on map move end event re-send your request and replace your geoJson layer by the new data. – ghybs Nov 5 '15 at 17:08

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) {

var featureLayer = new L.GeoJSON(
    null, {
        onEachFeature: onEachFeature

function loadGeoJson(data) {
    // console.log(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));

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

    } else {
        alert("please zoom in to see the polygons!");
| improve this answer | |
  • Wonderful! Exactly what I was looking for. I just need to figure out how to get the other functions to work in this setup. Many thanks. – Ilona Kemeling Nov 6 '15 at 10:54
  • your welcome ;) do you mean the loading of the reports? jsfiddle.net/expedio/yrbru3sn – Thomas B Nov 6 '15 at 21:07
  • would also work as a dialog jsfiddle.net/expedio/ka9ccb6f – Thomas B Nov 6 '15 at 21:25
  • Is this caching the data? If I understand correctly the layer is being cleared and reloaded from the server on every map move. – raphael Jun 22 '17 at 20:43

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.