Geospatial – News

Drawing large amounts of points with OpenLayers 3 and WebGL

9 December 2014

OpenLayers 3 supports three different rendering technologies: Canvas, DOM and WebGL. The technology currently used by default is Canvas. At this point, the Canvas renderer is the most capable and reliable renderer.

WebGL, which is based on OpenGL, is the Web technology used for 3D and video games. WebGL is very promising for Web mapping thanks to the great performance and 3D capabilities it offers.

From the very beginning of the project, our objective with OpenLayers 3 is to leverage WebGL. Until now, the WebGL renderer could only support “tile” and “image” layers, while the Canvas renderer already supported then “vector” layers (points, lines, polygons, and labels).

Thanks to our latest developments, it is now possible to draw points with WebGL. Below are two examples that we developed:

These examples are not based on real-life data but they demonstrate the styling possibilities that the library offers. In these examples, 50’000 points are drawn (zoom out to see them all). We can notice that the performance is very good: interacting with the map remains very fluid, even when the 50’0000 points are displayed.

This work is based on the prototype we worked on some time ago. This prototype didn’t allow styling points with the same flexibility as the Canvas renderer allowed: only squares with a unique color could be used. As our new examples demonstrate, our latest developments do offer a lot of flexibility in terms of styling, equaling Canvas’s.

We hope that these advances are inspiring and we’re looking forward to building applications based on these advances. Our next steps are the detection features and the capability to draw other types of vectors: lines, polygons, and labels. For more technical details on this work, please read the blog post published on blog.openlayers.org.

We would like to thank Météorage and Camptocamp that both invested to enable the realization of these developments.