Update a renderer's attribute

This sample demonstrates how to change the variable driving a visualization in a renderer while retaining all symbology and other renderer configurations previously made to the layer.

In this case, the layer represents temperature anomaly data from 1880 to 2018. The data is stored in fields F1880, F1881, ..., F2018. The map author configured the renderer in Map Viewer to visualize the data based on the year 2018.

Once loaded, this sample updates the renderer to return data from an Arcade expression rather than a static field (e.g. F2018). The expression uses the $view.timeProperties variable and Year() function to find the year selected by the user with the Time Slider component. As the user slides the slider thumb, the Arcade expression will re-execute and thus update the layer's renderer to return the data for the field corresponding to the Time Slider value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const layer = view.map.layers.getItemAt(0);
const renderer = layer.renderer.clone();

// Returns the value of the "F{year}" field based on the slider's value.
// This expression will re-execute every time the slider's value changes
const valueExpression = `
  Expects($feature, "F*");
  if(HasValue($view, ["timeProperties", "currentEnd"])){
    var y = Year($view.timeProperties.currentEnd);
    var value = $feature["F" + y];
    return value;
  }
  return null;
`;
const valueExpressionTitle = "Temperature Anomaly (1880-2018)";

// Replace the field with the valueExpression so the user can dynamically
// explore the data as it changed from year to year
renderer.field = null;
renderer.valueExpression = valueExpression;
renderer.valueExpressionTitle = valueExpressionTitle;

// ...the sample also updates the renderer's visual variables to reflect the new data

// Set the updated renderer back on the layer
layer.renderer = renderer;

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

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