Load markers for only visible tiles?

[Rick Chase]

I have a database of about 15,000 places that I plot on my map.  Obviously, loading in all those points takes a very long time.  I'm wondering if it is possible to only load markers on the map tiles that are currently visible.  So, I set the default zoom to 15, it will only load a few tiles.  As I zoom out, more tiles display, and more markers are loaded.

PHP, MySQL.

I've been over and over and over the documentation, but am just not finding what I need.

Your advice is greatly welcomed.  Thank you.

[Chris Hill]

> --
When I first looked at Leaflet May last year I wrote a blog about doing
exactly that. It's a bit out of date now because leaflet has moved on,
but the idea is still sound. The blog is here
http://chris-osm.blogspot.co.uk/2011/05/leaflet.html . Some of the
comments point out what might be better done with newer features.

The key trick is to use Ajax to request the markers that fall into the
current visible area - a very common solution to your problem. My map
only has 40 markers, but it will work with thousands. You can go on to
merge multiple markers that are close together on ow zoom levels as a
cluster - I didn't need to.

Feel free to ask questions or comment. If you bring the code up-to-date
with the latest features of Leaflet I would be pleased to see what you do.

--
Cheers, Chris
user: chillly

[Koko A.]

You could also consider implementing something with GeoJSON tiles. While not supported directly by Leaflet I think there are a few other options such as this one:

https://gist.github.com/1716010 

I think that draws the points on a canvas layer. I use another solution which I don't think is ideal for your situation but it might give you some other ideas to tackle the problem. This is to use the tileload event of my underlying data layer to load in geojson tiles (using TileStache).  If a tile on my data/map layer is fetched, then so is the geojson tile. That way I don't need to worry about calculating bounds and checking which points have already loaded or not. Something like:

dataLayer.on('tileload', function(e) {

    /* turn a url like http://web/tileset/layer/10/345/123.png into http://web/tileset/<somegeojsonlayer>/<z>/<x>/<y>.geojson */

    var tile=e.url.split("/");

    var z=tile[tile.length-3];

    var x=tile[tile.length-2];

    var y=tile[tile.length-1].split(".")[0];

    var geojsontile="http://web/tileset/geojsonlayer/"+z+"/"+x+"/"+y+".json";

    $.getJSON(geojsontile, function(data){

        geojsonLayer.addData(data);

    });

});

Only thing is when you change the zoom level it fetches all the geojson tiles again for the new layer (because it also fetches new map tiles, triggering the tileload again). For me this is not an issue as I have different features for each zoom level, I just remove all the geojson objects on a zoomstart event with geojsonLayer.clearLayers() and then let the new ones load in as the new underlying map tiles are loaded.

map.on('zoomstart',function(e) {

    geojsonLayer.clearLayers();

});

Anyway this works really well for panning around, maybe less so for zooming out, but perhaps it can be a starting point for another idea.

[Jake Wilson]

I know this is an old thread, but in case anyone is wondering, I'm pretty sure you can load your points onto canvas layers.  That way the only points that render are the point that are on the canvas tiles that are visible at the time.

[Peter Koraca]

Hey Mr. Koko

I've just made a gist at github with the the whole javascript code that works for me (including the map and layer setup).

Thank you for the fantastic idea. Go check it out at github and tell me if you think I've attributed you right or if you have any website link or full name I would be happy to put it in.

https://gist.github.com/pkorac/5287314

Have fun,

Peter