HistogramRangeSlider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
view.whenLayerView(layer).then((layerView) => {

  // temperature in Celsius
  const field = "temp";
  const min = 0;
  const max = 30;

  // generate 100-bin histogram
  histogram({
    layer: layer,
    field: field,
    numBins: 100,
    minValue: min,
    maxValue: max
  }).then((histogramResponse) => {

    // histogram response contains the histogram bins
    // the code block shown below will be placed here

  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const slider = new HistogramRangeSlider({
  bins: histogramResponse.bins,
  min: min,
  max: max,
  values: [min, max],
  excludedBarColor: "#524e4e",
  rangeType: "between",
  container: document.getElementById("slider-container")
});

slider.on(["thumb-change", "thumb-drag", "segment-drag"], (event) => {
  // field is "temp"
  filterByHistogramRange(field);
});

const filterByHistogramRange = promiseUtils.debounce((field) => {
  layerView.filter = {
    // generates the where clause for filtering features
    where: slider.generateWhereClause(field)
  };
});