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.
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?
No comments:
Post a Comment