CODEWITHSUNDEEP
leaflet
CuNimb
CuNimb

Reputation: 164

Efficient way of accessing large data sets to display on Leaflet

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?

Upvotes: 9

Views: 9047

Answers (2)

Josh Braegger
Josh Braegger

Reputation: 93

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);

Upvotes: 3

snkashis
snkashis

Reputation: 2991

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.

Upvotes: 13

Related Questions