This sample demonstrates how to generate a data-driven continuous color visualization based on statistics returned from a numeric field in a SceneLayer.
This is accomplished with the createContinuousRenderer() in the color renderer creator helper object. All that is required for generating a renderer is a SceneLayer and a field name. However, you can set other parameters including a theme. In this case we use an above-and-below theme, which returns a scheme with two colors diverging from a midpoint.
// Configure parameters for the color renderer generator. // The layer must be specified along with a field name // or arcade expression. The view and other properties determine // the appropriate default color scheme. const colorParams = { layer: layer, view: viewElement.view, field: "CNSTRCT_YR", theme: "above-and-below", minValue: 1800, maxValue: 2020, edgesType: "solid", };
// Generate a continuous color renderer based on the // statistics of the data in the provided layer // and field. // // This resolves to an object containing several helpful // properties, including color scheme, statistics, // the renderer and visual variable const rendererResult = await colorRendererCreator.createContinuousRenderer(colorParams);
// set the renderer to the layer layer.renderer = rendererResult.renderer; if (!layer.visible) { layer.visible = true; }
const histogramResult = await histogram({ ...colorParams, numBins: [] });
colorSlider.min = rendererResult.statistics.min; colorSlider.max = rendererResult.statistics.max; colorSlider.labelFormatFunction = (value) => value.toFixed(0); colorSlider.updateFromRendererResult(rendererResult, histogramResult);After the ColorSlider is constructed with the statistics of the SceneLayer, you can listen to its events to update the renderer of the layer with the output visual variable in the event object
// when the user slides the handle(s), update the renderer // with the updated color visual variable stops function changeEventHandler() { const renderer = layer.renderer.clone(); const colorVariable = renderer.visualVariables[0].clone(); colorVariable.stops = colorSlider.stops; renderer.visualVariables = [colorVariable]; layer.renderer = renderer; }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.