WebGL Contexts Error

[joerodmey]

Get this error when adding layers to my AGOL web map:

What's causing such a problem?

[Anonymous User]

1. Is the layer a vector tile layer hosted in ArcGIS Online?

2. Are you adding this to a previously created map that already contains other layers? If so:

a. What other types of layers are in this map?

b. How many of each type are in the the map?

3. Do you get this message if you add the layer to a new map? 

[joerodmey]

Yes to all

There are tile layers and other vector tile layers. I've followed this process previously with success.

[Anonymous User]

How many layers? 

[joerodmey]

When I got this error I had about 20 total layers...in the end I will probably have around 100 layers

[MikeMinami]

WebGL (Web Graphics Library) is a JavaScript API used to draw 2D and 3D graphics in a web browser. The ArcGIS JavaScript API 3.x and 4.x use WebGL to draw some layers.

The short answer

You've reached the limit of the number of layers you can add to your map for layers that utilize WebGL.

The longer answer

The web browser has a limit of about 16 WebGL Contexts and the ArcGIS JavaScript API 3.x, upon which the map viewer is currently built, utilizes one context per layer. A vector tile layer will always utilize a WebGL context and a feature layer may utilize a WebGL context (if editing is disabled, there are no labels and a few other things AND a context is available). To maximize the use of WebGL contexts, I think you can add the vector tile layers first. So, the limit will be 16 vector tile layers.

The long term solution

When the map viewer is redesigned using the JavaScript 4.x API--which utilizes WebGL contexts differently--you won't encounter this limit.

Mike

[DavidColey]

Hi Mike - so is there a work around on this?  For us this happens alot when we use the human geography basemap, and a recently created local base map that uses the Light gray base, a local base vector tile, a local detail vector tile as a reference, and a copy of the light gray reference vector tile as a reference.

How do I stop or otherwise disallow my hosted feature layers in the agol or portal map viewer to not utilize webgl?  Is that possible?

[MikeMinami]

How many layers do you have in your map? Are you approaching 16 layers? Could you make separate maps with less layers?

Are you using the map viewer or have you written your own custom app? If you're using AGOL map viewer, there's not much you can do, other than remove layers. If you're writing your own app, you could disable WebGL for particular hosted feature layers but not others, or alternatively write your app with the JavaScript 4.x API.

Mike

[DavidColey]

Hi Mike - some of our sections have to have data explorer and lookup maps with lots of layers.  Think utilities.  Most of staff uses the online web app builder and other online templates so that's not really an option for them.  The WebGL usually behaves in the developer edition of the web app builder (in that you can see all your layers and not lose them during a basemap switch in the app) and in any online webmaps that use a raster base.

A workaround may be that staff has to save a map with a raster base in order to have 16+ visible (but scale-dependent) layers, or that more layers have to be set not visible.  Either seems to work for the most part.  Awaiting the 4x map viewer.

Thanks,

David

[SaurabhUpadhyaya]

Hi Mike,

In Custom React app on JS 4.29, we are utilizing multimap view and each map view approximately 8 feature layers through FeatureLayer.

In one screen 2 map views, and loading layers dynamically on these map views, to reduce webGL contexts intializing map, and view every time before loading the layers.

I tried map.destroy(), view.destroy() and also applied tryFatalErrorRecovery but still some times map went blank means nothing is displaying on map.

As a result of this error, the map displays as blank, and all added layers are removed. It's worth noting that in the blank map, the search and zoom in/out controls are still visible, but the layers are not showing.

We would greatly appreciate any suggestions or guidance on how to resolve this issue.

Thank you.