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");
}
Best Answer
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: