MapImageLayer - Set definition expressions on sublayers

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// This layer has four sublayers. You can define the definitionExpression in each sublayer.
const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [
    {
      id: 3,
      visible: false
    },
    {
      id: 2,
      visible: true
    },
    {
      id: 1,
      visible: true
    },
    {
      id: 0,
      visible: true,
      definitionExpression: "pop2000 > 100000"
    }
  ]
});

...

/*****************************************************************
 * Listen for events on when the slider values have changed.
 * When the slider value changes, apply the new value to the
 * MapImageLayer definitionExpression.
 *****************************************************************/
layer.when(() => {
  const cities = layer.findSublayerById(0);

  // calciteSliderChange is fired if the value changes after the mouse is released
  function onChange(event) {
    const value = event.currentTarget.value;
    selectedPopulation = +value;
    cities.definitionExpression = "pop2000 > " + selectedPopulation;
  }
  slider.addEventListener("calciteSliderChange", onChange);

  // calciteSliderInput is fired any time the value changes, also when dragging
  function onInput(event) {
    const value = event.currentTarget.value;
    sliderCount.innerHTML = value;
  }
  slider.addEventListener("calciteSliderInput", onInput);
});