This post is not complete, I will be expanding it.
A short video…
Leaflet is very quick and easy to get a map up and running.
If you return points from your data server as geojson they can be hooked straight in
That is a bit ugly, but the Leaflet.markerclusterer comes to the rescue
If you don't have an awful lot of data then you could simply load all of it from a single geojson file. We have 35000+ plaques on Open Plaques so passing the entire database is not an option.
The standard functionality is to trigger a bounding box query with leaflet-vector-layers or similar. Top-left and bottom-right coordinates are sent as parameters in whatever url structure you tell it.
A bounding box is a very simple SQL query
SELECT * from plaques WHERE latitude between (a and b) AND longitude between (x and y)
And if you index on 'latitude, longitude' then it should run pretty quick.
However, once you do a big zoom then you'll be doing a correspondingly large SQL query :( Large numbers of records could be returned. In our case this pushed the http call past the Heroku 12 second maximum and it assumed that our server had hung.
A slippymap is made of tiles…
It is fairly trivial to convert from tile number -> coordinates and vice versa. The formulae are published on the OpenStreetMap Wiki Slippy_map_tilenames
Big zoom. Lots of little SQL queries :)
Standardize on one zoom level for the data calls. This will reduce the number of calls made and enable us to cache the results.
Alternatives? * http://agentscript.org/docs/data.tile.html * http://bl.ocks.org/glenrobertson/6203331