WebGL Context limits

[gavinr]

• Modern web browsers currently have a maximum limit of 16 WebGL contexts in a page.
• For each layer that is created, Esri Leaflet Vector creates a new instance of Mapbox GL JS, and thus a new WebGL context.

Due to the above two facts, right now there is a limitation that no more that 16 Esri Leaflet Vector layers can be added on a page at one time.

Demo case: 17 vector layers in a single map

I have created 17 separate vector layers, each with a single point in the layer. Example case: https://jsbin.com/ludubaz/2/edit?html,output

• Expected: 17 points (one for each layer) are visible on the map
• Actual: 16 points are visible on the map. (due to the fact that the browser can only have 16 WebGL contexts so one of the layers must be destroyed when the 17th is created)

Problem Scope

Having more than 16 vector tile layers in a single map may seem unrealistic right now, but as vector tile layers become more popular I think this situation may become more common.

Solution

Right now, every time an Esri Leaflet Vector layer is created, a new Mapbox GL JS instance is created, and thus a new WebGL context is created. Could we slightly modify how this works to somehow have all the layers share one instance of Mapbox GL JS, thus having all the layers share one WebGL context? Would this add limits on how layers can be re-ordered?