Fade a layer on/off smoothly?

StephenLead — Thu, 12 May 2011 04:58:12 GMT

Is it possible to fade a layer on/off smoothly, rather than simply showing/hiding?

Thanks,
Steve

Re: Fade a layer on/off smoothly?

HemingZhu — Thu, 12 May 2011 12:16:50 GMT

Is it possible to fade a layer on/off smoothly, rather than simply showing/hiding?

Thanks,
Steve

Layer.opacity =0;

Re: Fade a layer on/off smoothly?

derekswingley1 — Thu, 12 May 2011 14:20:07 GMT

Which type of layer? Graphics/Feature layer? Dynamic? Tiled?

Re: Fade a layer on/off smoothly?

StephenLead — Thu, 12 May 2011 22:35:03 GMT

Hi Derek,

In this case, it's a feature layer. A good example is the sample script at http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_ondemand.html

Rather than simply switching the Hydrography layer on/off when the button is pressed, is it possible to fade it off/on smoothly?

Cheers,
Steve

Re: Fade a layer on/off smoothly?

derekswingley1 — Fri, 10 Dec 2021 22:41:33 GMT

I tweaked the sample you linked to so that layers are faded in/out when you click a button: http://jsfiddle.net/swingley/ew8VY/

The code is available there but here it is again for convenience:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>FeatureLayer On Demand</title> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> 
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">djConfig = { parseOnLoad:true };</script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> 
    <script type="text/javascript"> 
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");

      var mapLayers = [];  //array of layers in client map
      var map;
      function init() {
        var extent = new esri.geometry.Extent({"xmin":-96.6063,"ymin":38.3106,"xmax":-96.4764,
              "ymax":38.3689,"spatialReference":{"wkid":4269}});
        map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)});
        dojo.connect(map, "onLoad", initOperationalLayer);

        var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
        map.addLayer(imagery);
        mapLayers.push(imagery);
      }
      function initOperationalLayer(map) {
        var content = "<b>Type</b>: ${ftype}" +
                      "<br /><b>Code</b>: ${fcode}";

        var infoTemplate = new esri.InfoTemplate("Rivers", content);

        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        map.addLayer(featureLayer);
        map.infoWindow.resize(150,105);
        mapLayers.push(featureLayer);  //this client side map layer is the maps graphics layer
      
      }

      function layerVisibility(layer) {
        console.log('clicked button ', layer.opacity);
        if (layer.visible) {
          fader(layer, 0.9, 'out');
        } else {  
          fader(layer, 0, 'in');
        }
      }

      function fader(layer, op, dir) {
        if (dir == 'out') {
          if (op > 0) { // fading out
            layer.setOpacity(op.toFixed(1));
            op-=0.1;
            setTimeout(function() {
              fader(layer, op, dir);
            }, 50);
          } else { // fade out finished
            layer.hide();
          }
        } else if (dir == 'in') { 
          if ( ! layer.visible ) {
            layer.show();
          }
          if (op < 1) { // fading in
            layer.setOpacity(op.toFixed(1));
            op+=0.1;
            setTimeout(function() {
              fader(layer, op, dir);
            }, 50);
          } 
        }
      }
      dojo.ready(init);
    </script> 
  </head> 
  <body class="claro"> 
    <div style="position:relative;width:100%;height:100%;"> 
      <div id="map" style="border:1px solid #000;width:100%;height:100%;">
        <div style="position:absolute; left:100px; top:10px; z-Index:999;"> 
          <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[0]);">Imagery Cached Base Map</button> 
          <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[1]);">Hydrography Operational Graphics Layer</button> 
        </div> 
      </div>
    </div> 
  </body> 
</html>

The relevant stuff is the layerVisibility function as well as the fader function which is called recursively to get the desired effect. This seems like more of a novelty than anything and I doubt it works in IE...I only tested in Chrome.

Re: Fade a layer on/off smoothly?

StephenLead — Fri, 13 May 2011 02:51:08 GMT

Awesome, thanks so much for posting that!

I noticed that fading in a feature layer is less successful, as it's more dependent on the server's performance, but for fading out it's perfect.

Thanks again,
Steve

Re: Fade a layer on/off smoothly?

derekswingley1 — Fri, 13 May 2011 03:17:22 GMT

Glad I could help! I figured it was possible since you can do essentially the same thing with a slider.

Performance should be dependent on the client browser/machine since this is all done client side. The server shouldn't be an issue. There aren't any requests sent to the server by clicking a button to toggle a layer.

topic Re: Fade a layer on/off smoothly? in ArcGIS JavaScript Maps SDK Questions

Fade a layer on/off smoothly?

Re: Fade a layer on/off smoothly?

Re: Fade a layer on/off smoothly?

Re: Fade a layer on/off smoothly?

Re: Fade a layer on/off smoothly?

Re: Fade a layer on/off smoothly?

Re: Fade a layer on/off smoothly?