[GIS] Loading geojson via ajax in leaflet using bbox

geojsonleafletpostgis

I'm trying to load a geojson-layer from a postgis-database into Leaflet. I only want to fetch the data that is inside the visible bounding box of the map.
The geojson-data comes from a php-script that is fired every time, the bbox changes.

My code works so far, but the geojson-layer is multiplied each time. How can I avoid, to draw the features multiple times on my map.

map.on('dragend', function onDragEnd(){
$.ajax({
    type: "GET",
     url: "./mapdata/n2k_dh_geojson.php?bbox=" + map.getBounds().getWest() + "," + map.getBounds().getSouth() + "," + map.getBounds().getEast() + "," + map.getBounds().getNorth(),
    dataType: 'json',
    success: function (response) {
        n2k_dh_geojson = L.geoJson(response, {
            onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.sitename);
            }
        }).addTo(map);
    }
});
});

Maybe there is already an existing js-code to do that.

But beside leaflet-vector-layers from Jason Sandford (which isn't developped anymore and which doesn't deliver pure geojson) I didn't find anything, that works with point, line and polygon-layers.

Best Answer

I hope I understood what You mean. I've changed tho code like this:

var n2k_dh_geojson = L.geoJson(null);

map.on('dragend', function onDragEnd(){
n2k_dh_geojson.clearLayers();

$.ajax({
    type: "GET",
     url: "./mapdata/n2k_dh_geojson.php?bbox=" + map.getBounds().getWest() + "," + map.getBounds().getSouth() + "," + map.getBounds().getEast() + "," + map.getBounds().getNorth(),
    dataType: 'json',
    success: function (response) {
        n2k_dh_geojson = L.geoJson(response, {
            onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.sitename);
            }
        });
        n2k_dh_geojson.addTo(map);
    }
});
});

Now the 'old' data is erased from the map before the 'new' data is drawn, which produces always a little decay in time, which isn't nice or is there a way to cache the old data?

Related Question