HOW TO

Set the transparency of a symbol using ArcGIS API for JavaScript

Last Published: April 25, 2020

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}]
          
        }) ;
The image of image transparency result

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

Receive notifications and find solutions for new or common issues

Get summarized answers and video solutions from our new AI chatbot.

Download the Esri Support App

Related Information

Discover more on this topic

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options