We have been working on an OpenLayers 3 Proof of Concept to demonstrate that WebGL can be used to draw „many“ vector features on a map. By „many“ we mean an order of magnitude more than what we have traditionally done using Canvas and SVG.
This example is the result of this PoC work. In this example 100,000 points are drawn using WebGL. The points here are „cell towers“ from the opencellid database – many thanks to the opencellid project.
To be able to view this example, your browser must support WebGL. If your browser does not support WebGL then „This map requires a browser that supports WebGL“ will be displayed in red below the map. If your browser supports WebGL, you should see yellow points (cell towers) across the world.
You can observe that the map remains very responsive while panning and zooming. Drawing 100,000 points on each frame is really not a problem for WebGL. We have even tried with one million points (yes we did!) and panning and zooming were still very smooth. We do not use one million points in the example because data loading then becomes an issue.
This prototype uses WebGL’s „draw points“ mode (gl.Points), which is typically used for particle effects (used to show explosions, flames, smoke, …). This mode does not allow for complex styling (e.g. stroked circles), so OpenLayers 3 will use triangles and textures to render points in the future.
In this prototype TinyWKB from Nicklas Avéns is used as the data transport format. This format packs the 100,000 points in a 684 KB file (uncompressed). The same data in a GeoJSON file weighs 14 MB. We are currently researching using other binary formats. We are also looking at other loading strategies than the naive „load all at once“ strategy used in this example.