How to group web map layers in layer list by topic?

[RYANCARL]

Hello all,

I have created a web map in ArcGIS Portal from multiple data sources, these are all based on regions of the USA. I would like to have them grouped  for visual organization when the map is displayed in the ArcGIS JS web app that I am building. 

Currently the layer list looks like this:

North West - Buildings 
North West - Harbors 
North West - Land
South West - Buildings 
South West - Harbors 
South West - Land

I would like to have these items displayed like this:

> North West
North West - Buildings 
North West - Harbors 
North West - Land

> South West 
South West - Buildings 
South West - Harbors 
South West - Land

I would like this to allow the user to do the usual toggle on and off of the layer list items, but I would like them to be collapsible into the region. 

This is the code that I have so far:

const webmap = new WebMap({
        portalItem: {
          id: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        }
      });      const view = new MapView({
        container: mapDiv.current,
        map: webmap
      });      view.when(function() {
        const layerList = new LayerList({
          view,
        });
        view.ui.add(layerList, 'bottom-left');
      });

I have not seen an example of a "Group Layer List" used like this yet. Is this possible to do with a single portal item (webmap) that provides all of the data?

[jcarlson · Accepted solution]

What version of Portal are you using? If you have access to the Map Viewer Beta, (now simply the Map Viewer on the AGOL side), you can configure group layers at the map level.

Here's a bit of one of my maps' JSON that covers the group layers, so you can see what it looks like.

{
    "operationalLayers": [
        {
            "id": "179e9600976-layer-17",
            "title": "Group A",
            "layers": [
                {
                    "id": "179e95fd1a6-layer-16",
                    "title": "USA Protected Areas - Fee Managers",
                    "url": "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Fee_Managers/FeatureServer/0",
                    "itemId": "b198973417044e00ab32ec23e69cbc99",
                    "layerType": "ArcGISFeatureLayer"
                },
                {
                    "id": "179e95f82d3-layer-10",
                    "title": "USA 116th Congressional Districts",
                    "url": "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_116th_Congressional_Districts/FeatureServer/0",
                    "itemId": "cc6a869374434bee9fefad45e291b779",
                    "layerType": "ArcGISFeatureLayer"
                },
                {
                    "id": "179e95fc0e5-layer-15",
                    "title": "USA Federal Lands",
                    "url": "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Federal_Lands/FeatureServer/0",
                    "itemId": "5e92f2e0930848faa40480bcb4fdc44e",
                    "layerType": "ArcGISFeatureLayer"
                }
            ],
            "layerType": "GroupLayer"
        },
        {
            "id": "179e9606638-layer-18",
            "title": "Group B",
            "layers": [
                {
                    "id": "179e95f98a8-layer-13",
                    "title": "ACS Geographical Mobility Variables - Centroids - County",
                    "url": "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Geographical_Mobility_Centroids/FeatureServer/1",
                    "itemId": "0226dc77a29049a69aecf2d6ef5246d4",
                    "layerType": "ArcGISFeatureLayer"
                },
                {
                    "id": "179e95f98a5-layer-12",
                    "title": "ACS Geographical Mobility Variables - Centroids - Tract",
                    "url": "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Geographical_Mobility_Centroids/FeatureServer/2",
                    "itemId": "0226dc77a29049a69aecf2d6ef5246d4",
                    "layerType": "ArcGISFeatureLayer"
                },
                {
                    "id": "179e95f98a9-layer-14",
                    "title": "ACS Geographical Mobility Variables - Centroids - State",
                    "url": "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Geographical_Mobility_Centroids/FeatureServer/0",
                    "itemId": "0226dc77a29049a69aecf2d6ef5246d4",
                    "layerType": "ArcGISFeatureLayer"
                }
            ],
            "layerType": "GroupLayer"
        }
    ],
...

There are a handful of other posts that touch on this topic (this one seems both recent and relevant). But again, if you're using a pre-configured web map on Portal, you may as well just configure the groups there, then pull the web map in to your app.

[RYANCARL]

Thank you so much! It worked like a charm. I really appreciate it.