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.time 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.
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;
