Efficient way of accessing large data sets to display on Leaflet - leaflet

Question

I have a global database of objects (points on a map) that I would like to show on a Leaflet map. Instead of loading all the database (simply too big) at once and creating the objects on a Leaflet LayerGroup, is there a more efficient way to go about querying data, perhaps as each map tile loads, or am I looking at creating a custom solution for this?

Answer 1

You could watch the 'moveend' event on map with map.on('moveend',loadstuff), make an ajax call inside loadstuff() to grab markers inside the current map.getBounds(), and then add/remove markers(I would assume you have some sort of global identifier for each of them) whether they are inside or outside the current view.

Answer 2

There's a standard and efficient way around doing what snkashis said. Create a tiled geoJSON service, and use the leaflet-tilelayer-geojson plugin.
Then all the code you would need browser-side is (from the Github page):
var geojsonURL = 'http://polymaps.appspot.com/state/{z}/{x}/{y}.json';
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
clipTiles: true,
unique: function (feature) {
return feature.id;
}
}, {
style: style,
onEachFeature: function (feature, layer) {
if (feature.properties) {
var popupString = '<div class="popup">';
for (var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString);
}
if (!(layer instanceof L.Point)) {
layer.on('mouseover', function () {
layer.setStyle(hoverStyle);
});
layer.on('mouseout', function () {
layer.setStyle(style);
});
}
}
}
);
map.addLayer(geojsonTileLayer);