Generate continuous color visualization for 3D buildings

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
27
28
29
30
31
const colorParams = {
  layer: layer,
  view: view,
  field: "CNSTRCT_YR",  // construction year
  theme: "above-and-below",
  minValue: 1800,
  maxValue: 2020
};

colorRendererCreator.createContinuousRenderer(colorParams)
  .then((response) => {

    // set the renderer to the layer
    layer.renderer = response.renderer;

    // create the color slider
    const colorSlider = new ColorSlider({
      primaryHandleEnabled: true,
      container: "slider",
      min: response.statistics.min,
      max: response.statistics.max,
      stops: response.visualVariable.stops,
      labelFormatFunction: (value) => {
        return value.toFixed(0);
      }
    });
    // Since data represents years, we don't
    // want values to show decimal places
    colorSlider.viewModel.precision = 0;

  });

1
2
3
4
5
6
7
8
9
function changeEventHandler () {
  const renderer = layer.renderer.clone();
  const colorVariable = renderer.visualVariables[0].clone();
  colorVariable.stops = colorSlider.stops;
  renderer.visualVariables = [ colorVariable ];
  layer.renderer = renderer;
}

colorSlider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);