Loading geojson via ajax in leaflet using bbox

Question

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.

Just keep a reference to the layers that you add (assign the new layer to a variable in your application's scope, instead of just using .addTo(map)). Then when this ajax call is complete you can remove the old layer and reassign it to this new layer. — Thomas, Oct 05 '16 at 21:41

geom · Accepted Answer · 2016-10-05T22:39:42.813

1

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?

edited Oct 05 '16 at 22:39

answered Oct 05 '16 at 22:24

geom

1,286
2
16
27

1

Add n2k_dh_geojson.clearLayers(); to the "success" function, not the onDragEnd function. – Thomas Oct 05 '16 at 22:28
OK, this works now much smoother. Thanks a lot. – geom Oct 05 '16 at 22:34
What work will of course depend on n2k_dh_geojson.php, but is bbox=N,S,E,W normal convention? I have seen Leaflet use [[S, W],[N,E]] so changing it around more is confusing. – Gregory Dec 29 '16 at 11:01
1

To answer my own comment, you could shorten the url part of the code to url: "./mapdata/n2k_dh_geojson.php?bbox=" + map.getBounds().toBBoxString(), which will match the same format, as per the Leaflet documentation http://leafletjs.com/reference.html#latlngbounds-tobboxstring – Gregory Dec 29 '16 at 11:07

Loading geojson via ajax in leaflet using bbox

1 Answers1

Linked