2

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 5 '16 at 21:41
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?

  • 1
    Add n2k_dh_geojson.clearLayers(); to the "success" function, not the onDragEnd function. – Thomas Oct 5 '16 at 22:28
  • OK, this works now much smoother. Thanks a lot. – geom Oct 5 '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 leafletjs.com/reference.html#latlngbounds-tobboxstring – Gregory Dec 29 '16 at 11:07

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.