Rendering points in web mapping: the match

An original idea

Some years ago, I discovered through a GIS.stackexchange.com website discussion a demo to simply show how well the browser was supporting a large number of points. It was not technically complex but really interesting to see how many points a web mapping library can handle in the browser. Produced by Derek Swingley using OpenLayers 2.x series, you can see below a screenshot and click on it for a live demo. We used the Internet Archive Wayback Machine to make it as some CSS resources for buttons were missing).

Original Derek Swingley demo

So what’s the point?

We simply choose to modernize it. We made it for Leaflet, MapboxGL JS, OpenLayers with two recipes as we were aware of two options (disclosure: we wrote a book about OpenLayers, so we wanted to dive into more details for the library)

They look quite similar to the original for the bottom left box “How Many Points…” and we only choose to change default colors for points.

All of samples are available as Gihub GISTs so you can copy them and we use the excellent http://bl.ocks.org website to display them (Thanks to M.Bostock)

Leaflet version

We simply changed the renderer to use Canvas. It supports less number of features than the two other libraries.

Mapbox GL JS version

Mapbox GL seems the fastest (only a feeling, no benchmark here, so no hard feelings) and support some hundred thousands points

OpenLayers 4 with ol.layer.Image and ol.source.ImageVector

This version should be faster than the last one among the two OpenLayers 4 demos. Both supports WebGL renderer and fallback to Canvas if not available. It supports some hundred thousands of points and seems a bit slower than Mapbox GL JS.

OpenLayers 4 with ol.layer.Vector and ol.source.Vector

It should be slower than previous demo version for OpenLayers 4.

From our tests with no benchmark, it seems that Mapbox GL JS seems a bit faster than OpenLayers but for the number of supported features, they both crash before a million points. The last one for this use case is Leaflet.

Try the various demos, make your opinion(s). Input for improvements & remarks are welcome as we may missed some options that “change the game”.