Vector tiles can be created from feature layers with symbology that varies by transparency, color, rotation, and size.
Transparency
Vector tiles can be created from feature layers with symbology that varies by transparency.
The property is stored in the vector tile style file as "opacity" for ArcGIS Arcade, qualified by the feature layer type as follows:
- Polygon layers—"fill-opacity"
- Line layers—"line-opacity"
- Point and multipoint layers—"icon-opacity"
Opacity values are not stored in the style file for any features that are excluded or not contained in the displayed symbol classes.
Transparency values in the symbology are converted to opacity values in the vector tile style. For example, 90 percent symbol transparency is equivalent to 10 percent opacity, expressed as 0.1. Opacity is expressed as a decimal value between 0 and 1 in the style file. The default value is 1, which corresponds to no transparency, or fully opaque. This default value is applied to all null feature values.
Unique value symbology
For layers that are symbolized by unique values, features symbolized by All other values also support opacity values.
Graduated symbols symbology
For layers that are symbolized by graduated symbols, opacity values are stored in the style file for all values including those values that are out of range. High and low transparency range values are stored as "stops" in the style file.
In the case of polygon features symbolized by graduated symbol symbology, opacity is stored for the Template point symbol only. The following is an example:
"paint" : {
"icon-opacity”: {
"property”: "opacity",
"default”: 1,
"stops”: [[-1, 0.1], [300, 1]]
}
}
Graduated colors symbology
For layers that are symbolized by graduated colors, high and low range transparency values are stored as "stops" in the style file. The following is an example:
"paint" : {
"line-opacity" : {
"property" : "opacity",
"default" : 1,
"stops" : [[-50, 0.1], [125, 1]]
}
}
Unclassed colors symbology
For layers that are symbolized by unclassed colors, opacity values are created and applied together with other color classes. High and low transparency range values are stored as "stops" in the style file. The following is an example:
"paint" : {
"line-color" : {
"property" : "ColorVar",
"default" : "#000000",
"stops" : [[30, "#17F4F7"], [140, "#5719F4"], [250, "#FF25F5"]]
},
"line-width" : 21.3333,
"line-opacity" : {
"property" : "opacity",
"default" : 1,
"stops" : [[-50, 0.1], [125, 1]]
}
}
Color
Vector tiles can be created from feature layers with symbology that varies by color.
The property is stored in the vector tile style file as "color" for ArcGIS Arcade and complex VBScript expressions, qualified by the feature layer type as follows:
- Polygon layers—"fill-color"
- Line layers—"line-color"
- Point and multipoint layers—"icon-color"
The following is an example:
"paint" : {
"line-color”: {
"property" : "color",
"default" : "#000000",
"stops" : [[-30, "#17F4F7"], [110, "#5719F4"], [250, "#FF25F5"]]
}
}
When simple VBScript expressions are used, the property is stored as "[fieldname]".
When the color properties of a symbol are connected to a field attribute of hexadecimal or web color values, a constant value or an expression is saved to the vector tile style file.
Caution:
When you work with hsl and hsla colors, the % sign must be included with the s (saturation) and l (light) values to render correctly in vector tiles even though they are correctly rendered in feature layers without the % sign. For example, the color value "hsl(215, 75%, 50%)" renders the same in vector tiles and feature layers, but "hsl(215, 75, 50)" renders as white in vector tiles. This is because the s and l values greater than or equal to 1 are treated as 100% when the % sign is missing.
Graduated symbols symbology
For layers that are symbolized by graduated symbols, color values are stored in the style file for all values including those values that are out of range.
In the case of polygon features symbolized by graduated symbol symbology, "color" is stored for the Template point symbol only. The following is an example:
"paint" : {
"icon-color" : {
"property" : "color",
"default" : "#C93100",
"stops" : [[-20, "#17F4F7"], [-2.5, "#5719F4"], [15, "#FF25F5"]]
}
}
Unclassed colors symbology
For layers that are symbolized by unclassed colors, color variables are created and applied as a "color" property. "Stops" are created for the color variations.
Rotation
Vector tiles can be created from feature layers with symbology that varies by rotation. Only point symbols in point or multipoint feature layers or template point symbols in graduated symbols symbology can be rotated with the rotation variable in vector tiles.
The property is stored in the vector tile style file as "angle" for ArcGIS Arcade and complex VBScript expressions. Angle values are not stored in the style file for any features that are excluded or not contained in the displayed symbol classes. When simple VBScript expressions are used, the property is stored as "[fieldname]".
The default value is 0, which corresponds to no rotation. This default value is applied to all null feature values. Arithmetic and geographic values are converted to angles. Only angles between 0 degrees and 360 degrees are valid.
Unique value symbology
For layers that are symbolized by unique values, features symbolized by All other values also support angle values.
Graduated symbols symbology
For layers that are symbolized by graduated symbols, opacity values are stored in the style file for all values including those values that are out of range. High and low transparency range values are stored as "stops" in the style file.
In the case of polygon features symbolized by graduated symbol symbology, rotation is stored for the Template point symbol only. The following is an example:
"paint" : {
"icon-rotate" : {
"property" : "angle ",
"default" : 0
}
}
Point rotation alignment
By default, point symbols stay upright even when the map is rotated. Alternatively, point symbols can be configured to rotate with the map by setting the Angle Alignment symbol property to Map on the Symbol tab 
in the Format Point Symbol pane. This is honored in vector tiles by storing the "icon-rotation-alignment" style property set to map.
Size
Vector tiles can be created from feature layers with symbology that varies by size.
The property is stored in the vector tile style file as "size" for ArcGIS Arcade and complex VBScript expressions. When simple VBScript expressions are used, the property is stored as "[fieldname]".
Size values are not stored in the style file for any features that are excluded or not contained in the displayed symbol classes.
Size values are stored differently for points and lines as follows:
- Points (icons)—[value] / marker size
- Line widths—[value] * 1.333
Size is applied as a ratio. The default value is 1 for "icon size", which corresponds to no resizing of the sprite or icon. For line widths, the default is 1.333, which corresponds to 1 pt. For example, if a marker size in the sprite is 10, a value of 5 will be stored as 5 / 10 = 0.5. The marker is scaled down to half its size. A value of 5 will be stored as 5 * 1.333 = 6.6667. The line width will be 5 times its original size.
The following is an example for icons:
"paint" : {
"icon-size”: {
"property”: "size",
"default”: 1
}
}
The following is an example for line widths:
"paint" : {
"line-width”: {
"property" : "size",
"default" : 2.66667,
"stops" : [[-20, 1.33333], [15, 17.3333]]
}
}
The default values are applied to all null feature values. Values of zero or negative are not rendered. For symbol layers using scale-based symbol sizing, "stops" are created for the "size" property. If the size of the symbols is limited to a size range, the "size" property will be applied with "stops" to get variations in size based on the values. The following is an example:
"paint" : {
"icon-size" : {
"property" : "SYMSIZE",
"default" : 1,
"stops" : [[2.5, 1.08108], [81.975, 3.24324]]
}
}
Attribute-driven symbols
In addition to having visual variables that are mapped at layer level, symbol layer properties can also have variables based on attribute values within vector tiles.
The following properties are supported:
- Color (for points, lines, and polygons)
- Rotation (for points)
- Size (for points)
- Width (for line width)
- CapStyle (for line cap type)
- JoinStyle (for line join type)
- AngleToLine (for markers along a line)
The CapStyle and JoinStyle properties can be mapped to numeric fields (short and long) to match LineCapStyle and LineJoinStyle enumeration values from ArcGIS.Core.CIM.LineCapStyle. Values are as follows:
| Value | CapStyle | JoinStyle |
|---|---|---|
0 | Butt | Bevel |
1 | Round | Miter |
2 | Square | Round |
The Rotation, Size, Width, and AngleToLine properties can be connected to short integer, long integer, float, or double fields.
The Color property can be connected to a text field. Supported formats are hexadecimal values, Web Colors, rgb, rgba, hsl, and hsla values. Unsupported formats draw with the default "color" property that is defined in the Format Symbol pane. The following are examples of valid attribute values:
- "rgb(80.50,45,235)"
- "rgba(80.50,45,235,0.6)"
- "RGB(100%, 50%, 88%)"
- "rgba(100%, 50%, 88%, 0.6)"
- "hsl(60,94.16%,50%)"
- "HSLa(60,94.16%,50%,0.6)"
Circle layers
Point layers symbolized with circle shape marker symbol layer properties created using Insert shape from Form in the Format Symbol pane are stored as "circle" layers in the vector tile style. The layer property names stored in the style for circles are different from icon point symbols that use sprites, as outlined in this list:
Transparency—"circle-opacity"
Color—"circle-color"
Rotation—Not supported
Size—Combines "circle-radius" and "circle-stroke-width" to match input appearance
Otherwise, circle layers with varying symbology are defined in a manner similar to other layer types. The following is an example of high and low "circle-radius" values stored as "stops" in the style:
"paint" : {
"circle-radius" : {
"property" : "size",
"default" : 6.2,
"stops" : [[2, 2.2], [26, 29.5333]]
}
}