Enable WebGL Feature Layer in Web AppBuilder Developer Edition 2.8

[Jianxia]

The WebGL rendering of feature Layer allows you to display more data in the map and update the visualization of features more rapidly. Although it is not supported in Web AppBuilder Developer Editon 2.8, you can manually opt in with the steps below.

1. Find the init.js file in the client/stemapp folder
2. Add a line to dojoConfig:

dojoConfig = {
   parseOnLoad: false,
   async: true,
   tlmSiblingOfDojo: false,
   has: {
   'extend-esri': 1,
   // add this line
   'esri-featurelayer-webgl': 1
   }
};

3. Save the file
3. Start Web AppBuilder Developer Edition 2.8 and create a new 2D app

To verify whether the layer is rendered in WebGL, access the layer through this.map.getLayer in the Widget.js file. Then call the following properties and method:

var layerId = this.map.graphicsLayerIds[0];
var layer = this.map.getLayer(layerId);

console.log("webgl enabled on map? ", this.map.webglEnabled);
console.log("webgl enabled on layer? ", layer.webglEnabled);
console.log("layer drawn with webgl? ", layer.hasWebGLSurface());

Also, see known limitations for the WebGL Feature Layer.

[DavidColey]

Terrific, thanks for this Jianxia.

[Cook_CountyGIS]

This is great, thank you!  

How does this interact with the service parameter: Maximum Number of Records Returned by Server, which is usually set below 10,000?

[Jianxia]

The maximum number will be honored on the query capability in the Attribute table, for example. However,  the number of features displaying on the map will be factored into 2 and the maximum number of records by default.

[Cook_CountyGIS]

This is a real game changer for sluggish app performance due to huge datasets, thank you!

I put this in one of the widget's Widget.js file and called this.checkWebGL(); from postCreate. Might help somebody.

checkWebGL: function(){
        console.log("webgl enabled on map? ", this.map.webglEnabled);
        for(j=0;j<this.map.graphicsLayerIds.length;j++){
          var layerId = this.map.graphicsLayerIds[j];
                var layer = this.map.getLayer(layerId);
          console.log("Layer: ", layer.arcgisProps.title);
                console.log("webgl enabled on layer? ", layer.webglEnabled);
                console.log("layer drawn with webgl? ", layer.hasWebGLSurface());
                }
        },‍‍‍‍‍‍‍‍‍‍

[Jianxia]

Thank you for sharing!