How To: Set the Transparency of a Symbol Using ArcGIS API for JavaScript

Summary

Polygon features can be displayed as color indexed, and the setOpacityInfo method can be used to set the opacity level of the rendered polygon. This method changes the transparency of the entire symbol, its outline and fill.

Procedure

The following instructions describe how to set the transparency of a polygon feature in a web map using ArcGIS API for JavaScript.

Insert the following code snippet into the script:

renderer.setOpacityInfo({
          field:"STATE_NAME",
           stops:[
             {value: 10, opacity:[value 0-1]}]
          
        }) ;

In the script above, the transparency value can be set as a decimal value to get the desired transparency level of the polygon. 0 represents total transparency while 1 represents solid polygons. The following is an example of a working script that sets the opacity to 0.35 and a screenshot of the result.

Example:
renderer.setOpacityInfo({
          field:"STATE_NAME",
           stops:[
             {value: 10, opacity:0.35}]
          
        }) ;

Alternatively, if only the fill of the symbol is desired to be transparent, use the SimpleFillSymbol method to set as STYLE_NULL, resulting in a completely transparent polygon, with just the outline. If a change in the symbology is required for the symbol, the RGBA constructor can be used to change the color of the symbol. This method works regardless of the presence of the renderer.setOpacityInfo method described above. The following code snippet demonstrates how the SimpleFillSymbol method works.

new SimpleFillSymbol( 
SimpleFillSymbol.STYLE_NULL, 
new SimpleLineSymbol( 
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, 
new Color([105, 105, 105]), 
2 
), new Color([255, 255, 0, 0.25]) 
)

In the above snippet, the SimpleFillSymbol.STYLE_NULL line sets no style on the polygon feature, giving the polygon layer only an outline. The RGBA constructor, new Color uses the RGB Decimal 105 for black, and 255 for white.

Article ID:000014291

Software:

ArcGIS API for JavaScript 4 x
ArcGIS API for JavaScript 3 x

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options

Related Information

ArcGIS API for JavaScript: Class: Layer

Set the transparency of a symbol using ArcGIS API for JavaScript

Summary

Procedure

Related Information

Discover more on this topic