topic Re: How to group web map layers in layer list by topic? in ArcGIS JavaScript Maps SDK Questions

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

RYANCARL — Mon, 07 Jun 2021 23:37:30 GMT

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?

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

jcarlson — Tue, 08 Jun 2021 02:14:17 GMT

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.

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

RYANCARL — Tue, 08 Jun 2021 20:40:01 GMT

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