Animate layer visibility

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
function fadeVisibilityOn(layer) {
  // Once this function is called, we create an animating variable
  // to keep track of the animation status.
  let animating = true;
  let opacity = 0;
  // fade layer's opacity from 0 to
  // whichever value the user has configured
  const finalOpacity = layer.opacity;
  // Start the animation by setting the layer's opacity to 0.
  // Technically the layer is now visible (because the LayerList widget
  // controls the visible property of the layer) so to create
  // the illusion of the layer being invisible, we'll set the
  // opacity to 0
  layer.opacity = opacity;

  view.whenLayerView(layer).then((layerView) => {

    // Wait for tiles to finish loading before beginning the fade-in
    // transition. The layer view's 'updating' property is true when
    // data is being downloaded and tiles are drawing in the view
    // Waiting for this property to be false makes the fade-in transition
    // smoother (you don't see tiles) though it forces the user to wait
    // a little longer for the transition to start
    watchUtils.whenFalseOnce(layerView, "updating", (updating) => {
      requestAnimationFrame(incrementOpacityByFrame);
    });

    // This function will fire on every frame before the browser repaints.
    function incrementOpacityByFrame() {
      // Stop the animation if the opacity has reached the same value
      // as the pre-defined finalOpacity
      if((opacity >= finalOpacity) && animating){
        animating = false;
        return;
      }

      // Increment the opacity and set the new value on the layer
      opacity += 0.05;
      layer.opacity = opacity;

      // Continue the animation at the next frame
      requestAnimationFrame(incrementOpacityByFrame);
    }
  });
}

1
2
3
4
5
6
7
layerList.operationalItems.forEach((item) => {
  item.watch("visible", (visible) => {
    if(visible){
      fadeVisibilityOn(item.layer);
    }
  });
});