ArcGIS JS API (v4.x) – Performance Issues with Nested GroupLayers Rendering When Not Visible

[AfdalCahaya]

Hi everyone,

I’m building a web mapping app using HTML, CSS, and JavaScript with the ArcGIS API for JavaScript (v4.x). I’m currently running into some performance issues that I’d appreciate any insights or suggestions on.

Here’s the setup:

• My map uses ~12 group layers.
• Each group layer contains nested subtype group layers.
• Each subtype group layer includes multiple sublayers.
• All layers are hosted feature layers, not tiled or cached.
• The app is built using HTML, CSS and JS with the ArcGIS API JS SDK.

The main performance issue is:

• The map lags significantly.
• Layers are rendering even when they're not visible, which I suspect is a big part of the issue.

I've reviewed the Performance Tips for ArcGIS Online maps article, but I’m still struggling with a performance issue in my current web app.

[JonathanDawe_BAS]

That is a lot of layers in a map! Are you loading in webmap by ID or instantiating the map in the application?

As I understand it, using subtypegroup layers should be relatively efficiently requesting data for its layers, but working with so many separate ones at once means that there will be a huge number of requests going to lots of different services... 

My only thoughts are that you need to consolidate layers, or re-architecture the application to only bring in layers as and when you need them. 

[AfdalCahaya]

Thanks Jonathan! I’m instantiating the map manually using the ArcGIS JS API SDK (not loading a webmap by ID).

I’m creating subtype group layers from their URLs in AGOL. The challenge is: even if layers are invisible, they're still requested/rendered and making the map very lag.

I’d love to show all layers in the LayerList without actually adding them to the map until toggled on.
The layer count is high by design, but grouping them as subtype groups helped a lot already.

Now I’m just looking for a way to delay requests and load layers only when needed. Appreciate any ideas!

[JonathanDawe_BAS]

I’m creating subtype group layers from their URLs in AGOL. The challenge is: even if layers are invisible, they're still requested/rendered and making the map very lag.

---

This sounds odd to me - are you saying that the layers are showing as hidden in the layerlist but are rendering features in the map? 

In terms of a "lazy loading" approach to the layer list, I'm wondering whether this is a limitation of Esri's implementation of their layer list. For some custom applications I've built I have created my own layer list component which gives more control over the layer display logic - e.g. I can only add layers to the map once they are switched on by the user. The complication is that you would need to handle the group layer view visibility logic and layer loading which is fiddly.

[AfdalCahaya]

Yes exactly — I’ve set the visible property to false for all sublayers, so they’re not shown on the map.

But I believe they’re still loading/rendering in the background, which may explain the map lag (zoom in/out delay). or this because the large number of layers requested from the AGOL in one time.

I thought about a custom LayerList too, but that would mean manually rendering a row per feature/layer — and with thousands of nested sublayers, it’s not scalable or practical.

Ideally, I want to display all layers in the LayerList, but only add/request them when toggled on.
That would help reduce the initial load without re-architecting the visibility logic from scratch.

[Sage_Wall]

@AfdalCahaya,

@JonathanDawe_BAS is right that is a lot of layers for one map to handle. It's also a lot of layers for users to have to navigate through. We realize there are performance issues in the LayerList for maps with lot's of layers like this one and hope to improve the performance in the future.

The LayerList is designed to show the current state of all the layers in the map.  In order to render the list we need to load the layers from the server even if they are not visible, otherwise we wouldn't know if the layer was visible or not or know its title and other properties. There is no way to add a layer to the Esri LayerList that isn't loaded into the map it's a 1 to 1 relationship between the Map's layers and the LayerList.

If you would prefer the layers to be added to the map after the user selects them you would need to develop this functionality in the application.

It might also be worth looking into whether or not the network requests themselves are slow and impacting the performance more than the code and that the client machine has a dedicated GPU and sufficient CPU and memory.