You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

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);
    }
  });
});

Sample search results

TitleSample
Loading...