ESRI JS API 3.15 - Dynamic Layers Transparency

Dynamic Layers Transparency via "layerDrawingOptions". Keep pressing the button for more random combinations!

by Alex Azuero

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script src="https://js.arcgis.com/3.15/init.js"></script>
<script type="text/javascript">
    var dojoConfig = {
        async: true
    };
</script>
<div id="map">
  <button id="makeTransparent">
    RANOMIZE TRANSPARENCIES!!!!!!!!!
  </button>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
    width: 100%;
    margin: 0px;
}
#makeTransparent {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
}

JavaScript

require([
	'esri/arcgis/utils',
  'esri/map',
	'esri/layers/ArcGISDynamicMapServiceLayer',
  'esri/layers/LayerDrawingOptions',
  'dojo/on',
  'dojo/_base/lang',
  'dojo/dom'
], function (
	arcgisUtils, Map, ArcGISDynamicMapServiceLayer, LayerDrawingOptions,
  on, lang, dom
) {
  var map = new Map("map", {
    center: [-90.1978, 38.6272],
    zoom: 8,
    basemap: "topo"
  });
  
  // add a basic layer that has "dynamic layers" enabled:
	var layer = new ArcGISDynamicMapServiceLayer(
    "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"
  );
  map.addLayer(layer);
  
  on(dom.byId('makeTransparent'), 'click', lang.hitch(this, function(evt) {
  	// for each layer, set the transparancy to 80:
    var layerDrawingOptions = [];
    layer.layerInfos.forEach(function(layerInfo) {
    	layerDrawingOptions.push(new LayerDrawingOptions({transparency:Math.floor(Math.random() * 100)}));
    });
    layer.setLayerDrawingOptions(layerDrawingOptions);
  }));
  
});