Symbology in vector tiles—ArcGIS Pro

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.

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

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 Symbol 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

Values that are out of bounds (either negative or greater than 2) draw with the default property defined in the Format Symbol pane.

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 markers are stored as circle layers in the vector tile style. The layer property names stored in the style for circles are different than icon point symbols that use sprites, as outlined in this list:

Transparency—circle-opacity
Color—circle-color
Rotation—Not supported
Transparency—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]]
        }

Transparency

Unique value symbology

Graduated symbols symbology

Graduated colors symbology

Unclassed colors symbology

Color

Graduated symbols symbology

Unclassed colors symbology

Rotation

Unique value symbology

Graduated symbols symbology

Point rotation alignment

Size

Attribute-driven symbols

Circle layers

Related topics

In this topic