Intro to SubtypeGroupLayer | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to add a SubtypeGroupLayer to a Map. The data in this sample comes from an electric utility network dataset to highlight how utility network datasets can take advantage of the SubtypeGroupLayer’s features.

How it works

The SubtypeGroupLayer automatically creates a sublayer, known as a SubtypeSublayer, from each subtype in its corresponding feature service. The purpose of this is to treat each subtype in a feature service as its own layer. By treating each subtype as its own layer, we can then configure a renderer, popup, and labels for each sublayer.

This sample illustrates a workflow to configure 13 sublayers using LayerList actions. Keep in mind that this data source is a single feature service, so it is fascinating that we will be able to configure 13 sublayers out of a single layer.

First, let us initialize the SubtypeGroupLayer and add it to the Map.

1
      // Create a SubtypeGroupLayer, allowing for richer interaction with each SubtypeSublayer.
2
      const subtypeGroupLayer = new SubtypeGroupLayer({
3
        portalItem: { id: "b702d7258a724a53aada3fefc3a36829" }, // new PortalItem()
4
        outFields: ["assettype", "assetgroup", "objectid", "transformer_kva", "subnetworkname"],
5
      });
6

7
      viewElement.map.add(subtypeGroupLayer);

Note

In order to use the SubtypeGroupLayer, the data source you publish must be published as a SubtypeGroupLayer. To learn more about how to create a SubtypeGroupLayer using ArcGIS Pro, please read the following documentation.

Using LayerList actions for SubtypeSublayer property controls

With this sample, we will take advantage of the LayerList actions to add toggles for labels and renderers for each sublayer. More specifically, we will use the listItemCreatedFunction property of the LayerList to add toggles for each ListItem in the component. Each ListItem will represent a SubtypeSublayer displayed on the map. The following function handles configuring the layer properties of a sublayer and adding the UI toggles. The UI consists of a switch and a radio-button-group for toggling labels and renderers, respectively.

1
      // Configure the controls for each of the LayerList's ListItems.
2
      layerList.listItemCreatedFunction = async ({ item }) => {
3
        const featureCount = await item.layer.queryFeatureCount();
4
        if (!featureCount) item.layer.listMode = "hide";
5
        if (item.layer === subtypeGroupLayer || !featureCount) return;
6

7
        const { renderer, title } = item.layer; // Get the layer tied to this ListItem.
8
        const layerListItemClone = layerListItemTemplate.content.cloneNode(true);
9
        const open = title === "Service Point"; // Open ListItem if its layer title matches.
10

11
        const content = layerListItemClone.querySelector("calcite-card");
12
        const symbolSwitch = content.querySelector("calcite-switch");
13
        const rendererRadioGroup = content.querySelector("calcite-radio-button-group");
14

15
        // Add event listeners to the ListItem's controls.
16
        symbolSwitch.addEventListener("calciteSwitchChange", () => {
17
          handleLabelsChange(symbolSwitch.checked, item);
18
        });
19
        rendererRadioGroup.addEventListener("calciteRadioButtonGroupChange", () => {
20
          handleRendererChange(rendererRadioGroup.selectedItem, item);
21
        });
22

23
        defaultRenderers[title] = renderer; // Store the layer's original SimpleRenderer.
24
        rendererRadioGroup.name = `${title} Renderer`; // Set a unique button group name.
25
        item.layer.popupTemplate = popupTemplate; // Set the layer's popup configuration.
26
        item.layer.labelingInfo = [labelClass]; // Set the layer's label configuration.
27
        item.panel = { content, open, icon: "gear" }; // Assign the ListItem controls.
28

29
        handleLabelsChange(false, item); // Toggle off feature labels by default.
30
      };

Updating the Renderer

The code in the sample allows users to toggle between a SimpleRenderer and a UniqueValueRenderer with conditionally triggered VisualVariables. This highlights how the SubtypeSublayer supports different types of renderers.

1
      const handleRendererChange = async ({ value }, item) => {
2
        const { title } = item.layer;
3
        const hasVariedAssetTypes = assetGroups[title];
4

5
        // Use the stored original SimpleRenderer.
6
        if (value === "simple") {
7
          item.layer.renderer = defaultRenderers[title];
8
          return;
9
        }
10

11
        // Set uniqueValueInfos if asset types are distinguishable.
12
        if (hasVariedAssetTypes) {
13
          const uniqueValueInfos = createUniqueValueInfos(title);
14
          uniqueValueRenderer.uniqueValueInfos = uniqueValueInfos;
15
          uniqueValueRenderer.visualVariables = [];
16
          item.layer.renderer = uniqueValueRenderer;
17
          return;
18
        }
19

20
        // Apply color gradient by object ID if asset types are not distinguishable.
21
        const visualVariables = await createVisualVariables({
22
          layer: item.layer,
23
          view: viewElement.view,
24
          valueExpression: "( $feature.objectid )",
25
          theme: "high-to-low",
26
        });
27
        uniqueValueRenderer.visualVariables = [visualVariables.color.visualVariable];
28
        item.layer.renderer = uniqueValueRenderer;
29
      };

Known Limitations

The SubtypeGroupLayer does not currently support DotDensityRenderer.
Clustering is not currently supported.