Generate continuous color visualization | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to generate a data-driven continuous color visualization based on statistics returned from a numeric field or expression in a FeatureLayer.

This is accomplished with the createContinuousRenderer() in the color renderer creator helper object. All that is required for generating a renderer is a Feature Layer and a field name or expression.

Specify input parameters to create a continuous renderer

1
      // Configure parameters for the color renderer generator
2
      // the layer must be specified along with a field name
3
      // or an arcade expression. The view and other properties
4
      // determine the appropriate default color scheme.
5
      const colorParams = {
6
        layer: layer,
7
        valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
8
        view: viewElement.view,
9
        theme: "above-and-below",
10
        outlineOptimizationEnabled: true,
11
      };

Use colorRendererCreator to create continuous renderer and apply to the layer


90 collapsed lines
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Generate continuous color visualization | Sample | ArcGIS Maps SDK for JavaScript</title>
7

8
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
9
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
10

11
    <style>
12
      html,
13
      body {
14
        height: 100%;
15
        margin: 0;
16
      }
17

18
      calcite-card {
19
        padding: 6px;
20
        text-align: center;
21
      }
22
    </style>
23
  </head>
24

25
  <body>
26
    <arcgis-map basemap="gray-vector" center="-85.0502, 33.125524" zoom="5">
27
      <arcgis-popup slot="popup" dock-enabled></arcgis-popup>
28
      <arcgis-zoom slot="top-left"></arcgis-zoom>
29
      <calcite-card slot="bottom-left">
30
        <h2>% population in poverty</h2>
31
        <arcgis-slider-color-legacy precision="1"></arcgis-slider-color-legacy>
32
      </calcite-card>
33
    </arcgis-map>
34

35
    <script type="module">
36
      const [FeatureLayer, colorRendererCreator, histogram] = await $arcgis.import([
37
        "@arcgis/core/layers/FeatureLayer.js",
38
        "@arcgis/core/smartMapping/renderers/color.js",
39
        "@arcgis/core/smartMapping/statistics/histogram.js",
40
      ]);
41

42
      const colorSlider = document.querySelector("arcgis-slider-color-legacy");
43
      await colorSlider.componentOnReady();
44

45
      // Create FeatureLayer instance with popupTemplate
46
      const layer = new FeatureLayer({
47
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0",
48
        popupTemplate: {
49
          // Autocasts as new PopupTemplate()
50
          title: "{COUNTY}, {STATE}",
51
          content: "{POP_POVERTY} of {TOTPOP_CY} people live below the poverty line.",
52
          fieldInfos: [
53
            {
54
              fieldName: "POP_POVERTY",
55
              format: {
56
                digitSeparator: true,
57
                places: 0,
58
              },
59
            },
60
            {
61
              fieldName: "TOTPOP_CY",
62
              format: {
63
                digitSeparator: true,
64
                places: 0,
65
              },
66
            },
67
          ],
68
        },
69
      });
70

71
      // Add layer to map
72
      const viewElement = document.querySelector("arcgis-map");
73
      document.querySelector("arcgis-popup").dockOptions = {
74
        breakpoint: false,
75
      };
76
      await viewElement.viewOnReady();
77
      viewElement.map.add(layer);
78

79
      // Configure parameters for the color renderer generator
80
      // the layer must be specified along with a field name
81
      // or an arcade expression. The view and other properties
82
      // determine the appropriate default color scheme.
83
      const colorParams = {
84
        layer: layer,
85
        valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
86
        view: viewElement.view,
87
        theme: "above-and-below",
88
        outlineOptimizationEnabled: true,
89
      };
90

91
      // Generate a continuous color renderer based on the
92
      // statistics of the data in the provided layer
93
      // and field normalized by the normalizationField.
94
      //
95
      // This resolves to an object containing several helpful
96
      // properties, including color scheme, statistics,
97
      // the renderer and visual variable
98
      const rendererResult = await colorRendererCreator.createContinuousRenderer(colorParams);
99

100
      // Set the renderer to the layer and add it to the map
101
      layer.renderer = rendererResult.renderer;
35 collapsed lines
102

103
      // Generate a histogram for use in the slider. Input the layer
104
      // and field or arcade expression to generate it.
105
      const histogramResult = await histogram({
106
        layer: layer,
107
        valueExpression: colorParams.valueExpression,
108
        view: viewElement.view,
109
        numBins: 70,
110
      });
111

112
      // Construct a color slider from the result of both
113
      // smart mapping renderer and histogram methods
114
      colorSlider.updateFromRendererResult(rendererResult, histogramResult);
115

116
      // Round labels to 1 decimal place
117
      colorSlider.labelFormatFunction = (value) => value.toFixed(1);
118

119
      // When the user slides the handle(s), update the renderer
120
      // with the updated color visual variable object
121
      function changeEventHandler() {
122
        const renderer = layer.renderer.clone();
123
        const colorVariable = renderer.visualVariables[0].clone();
124
        const outlineVariable = renderer.visualVariables[1];
125
        colorVariable.stops = colorSlider.stops;
126
        renderer.visualVariables = [colorVariable, outlineVariable];
127
        layer.renderer = renderer;
128
      }
129

130
      colorSlider.addEventListener("arcgisThumbChange", changeEventHandler);
131
      colorSlider.addEventListener("arcgisThumbDrag", changeEventHandler);
132
      colorSlider.addEventListener("arcgisPropertyChange", changeEventHandler);
133

134
    </script>
135
  </body>
136
</html>

To generate the histogram used by the slider, simply pass similar parameters to the histogram() function. You can then pass the resulting object to the updateFromRendererResult() method.

Generate the grayscale histogram for the colorSlider

1
      // Generate a histogram for use in the slider. Input the layer
2
      // and field or arcade expression to generate it.
3
      const histogramResult = await histogram({
4
        layer: layer,
5
        valueExpression: colorParams.valueExpression,
6
        view: viewElement.view,
7
        numBins: 70,
8
      });
9

10
      // Construct a color slider from the result of both
11
      // smart mapping renderer and histogram methods
12
      colorSlider.updateFromRendererResult(rendererResult, histogramResult);
13

14
      // Round labels to 1 decimal place
15
      colorSlider.labelFormatFunction = (value) => value.toFixed(1);

After the slider is set up with the statistics of the FeatureLayer, you can listen to its events to update the renderer of the layer with the output visual variable in the event object.

Listen for changes to the colorSlider

1
      // When the user slides the handle(s), update the renderer
2
      // with the updated color visual variable object
3
      function changeEventHandler() {
4
        const renderer = layer.renderer.clone();
5
        const colorVariable = renderer.visualVariables[0].clone();
6
        const outlineVariable = renderer.visualVariables[1];
7
        colorVariable.stops = colorSlider.stops;
8
        renderer.visualVariables = [colorVariable, outlineVariable];
9
        layer.renderer = renderer;
10
      }
11

12
      colorSlider.addEventListener("arcgisThumbChange", changeEventHandler);
13
      colorSlider.addEventListener("arcgisThumbDrag", changeEventHandler);
14
      colorSlider.addEventListener("arcgisPropertyChange", changeEventHandler);

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.

Additional visualization samples and resources

Data-driven continuous color

Data-driven extrusion