MapImageLayer - Explore data from a dynamic workspace

This sample demonstrates how to use the Smart Mapping renderer creators to generate a renderer for a Sublayer created from a dynamic data layer. The dynamic layer joins ancestry data from a table in a dynamic workspace to a map service layer. Select elements are provided to the user, allowing him/her to dynamically change the renderer based on different ancestry variables and classification methods.

To generate a renderer using the Smart Mapping creator methods, you must first create a FeatureLayer using the same data source as the Sublayer. The createFeatureLayer() method is a convenience method for creating matching FeatureLayer instances from Sublayers.

1
2
3
4
5
6
7
8
9
// Get the sublayer to explore
const ancestrySublayer = layer.sublayers.find((sublayer) => {
  return sublayer.title === "% population with selected ancestry";
});

ancestrySublayer.createFeatureLayer().then((ancestryFeatureLayer) => {
  // use the feature layer instance for some other purpose,
  // such as generating a renderer
});

Use the FeatureLayer instance to generate the renderer. Then set the output renderer back on the Sublayer instance.

1
2
3
4
5
6
7
8
9
10
11
12
13
const params = {
  // set FeatureLayer as input
  layer: ancestryFeatureLayer,
  // Arcade is used to normalize and round the data
  valueExpression: "Round( ( $feature['" + ancestrySelect.value + "'] / $feature['states.POP2007'] ) * 100, 1);",
  view: view, // required with valueExpression
  classificationMethod: classSelect.value
};

colorRendererCreator.createClassBreaksRenderer(params).then((response) => {
  // set the renderer on the sublayer
  ancestrySublayer.renderer = response.renderer;
});

Note that an Arcade expression is used to generate the renderer in this sample. Be aware that Arcade expressions and visual variables are only supported in ArcGIS Enterprise Map Services versions 10.6.1 and later that are published from ArcGIS Pro.

The select elements are placed within the LayerList widget's panel content. Note that individual list items can contain multiple content items within the same panel. In this case, we add the div element containing the select elements, and a Legend instance (indicated using the legend helper string) as an array of content items.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Set LayerList with two content elements in the same panel
// 1. A div element containing the select elements for data exploration
// 2. a legend instance
const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: (event) => {
    const item = event.item;
    item.panel = {
      content: [document.getElementById("infoDiv"), "legend"],
      open: true
    };
  }
});
view.ui.add(layerList, "top-right");

A word of caution

Keep in mind that generating renderers should be avoided in most applications because of the performance cost affecting the end user. As stated in the Smart Mapping guide topic, the Smart Mapping APIs were designed for two types of applications: data exploration apps and visualization authoring apps similar to ArcGIS Online. In all other cases, renderers should be saved to the layer or manually created using any of the renderer classes.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close