Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to toggle a layer's visibility with a fade in transition using requestAnimationFrame.

How it works

By default, when a user toggles a layer's visibility on and off, it flashes between visible and invisible. You can use the layer's opacity property in conjunction with requestAnimationFrame to create a smooth fade-in transition from invisible to visible.

The following function demonstrates how to do this. See the comments for a detailed walk-through of how this works.

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(function(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", function(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);
    }
  });
}

Watch the visible property of a ListItem in the LayerList widget to fire the fadeVisibilityOn function each time the user toggles a layer's visibility.

layerList.operationalItems.forEach(function(item){
  item.watch("visible", function(visible){
    if(visible){
      fadeVisibilityOn(item.layer);
    }
  });
});