WebStyleSymbol | References | ArcGIS Maps SDK for JavaScript

import WebStyleSymbol from "@arcgis/core/symbols/WebStyleSymbol.js";

Inheritance:: WebStyleSymbol→Symbol→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.1

WebStyleSymbol is a class used to conveniently create vector 2D symbols and realistic and thematic 3D symbols. It is a wrapper for creating CIMSymbol and PointSymbol3D objects that point to a web style resource available in the API.

Web styles are collections of symbols stored in an ArcGIS Enterprise portal or ArcGIS Online item. As of the current release, only Esri Web Style Symbols (2D) and Esri Web Style Symbols (3D) can be used in conjunction with this class. Note that the 2D web style symbols are only supported in 2D and 3D web style symbols are only supported in 3D with an exception of EsriIconsStyle which can be used in both 2D and 3D.

A WebStyleSymbol does not contain any symbology definition itself; it only contains a reference to a web style symbol. For visualization purposes, it is internally replaced with the CIMSymbol or the PointSymbol3D instance it refers to. You can use fetchSymbol() to retrieve the actual symbol object from the web style to alter its color or size.

A web style can be referenced either directly with a URL (styleUrl) or registered style's unique name (styleName).

Known Limitation

Currently, fetchSymbol() method will only work for 3d web style symbols

See also

Examples

// Referencing a web style via styleName
let symbol = {
  type: "web-style",  // autocasts as new WebStyleSymbol()
  styleName: "EsriThematicShapesStyle",
  name: "Standing Diamond"
};

// Referencing a web style via styleUrl
let symbol = {
  type: "web-style",  // autocasts as new WebStyleSymbol()
  styleUrl: "http://www.arcgis.com/sharing/rest/content/items/bf27400d167d4c2e8e12c8a46f87afe4/data",
  name: "Centered Sphere"
};

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`WebStyleSymbolProperties`

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`color` inherited	`Color \| null \| undefined`	Symbol
`declaredClass` readonly inherited	`string`	Accessor
`name`	`string \| null \| undefined`
`portal`	`Portal \| null \| undefined`
`styleName`	`string \| null \| undefined`
`styleUrl`	`string \| null \| undefined`
`type` readonly	`"web-style"`

color

autocast inherited Property

Type: Color | null | undefined

Inherited from: Symbol

The color of the symbol. This can be autocast with an array of rgb(a) values, named string, hex string or an hsl(a) string, an object with r, g, b, and a properties, or a Color object.

Default value: "black"

Examples

// CSS color string
symbol.color = "dodgerblue";

// HEX string
symbol.color = "#33cc33";

// array of RGBA values
symbol.color = [51, 204, 51, 0.3];

// object with rgba properties
symbol.color = {
  r: 51,
  g: 51,
  b: 204,
  a: 0.7
};

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

Since: ArcGIS Maps SDK for JavaScript 4.7

The name of the class. The declared class name is formatted as esri.folder.className.

name

Property

Type: string | null | undefined

The name of the symbol within the web style. Each symbol in a web style is identified by a unique name. Only Esri Web Style Symbols (2D) and Esri Web Style Symbols (3D) can be referenced here.

See also

Guide - WebStyleSymbol reference list

portal

autocast Property

Type: Portal | null | undefined

The portal that contains the web style this symbol refers to. Only required when styleName is set.

Defaults to the value in Config (e.g. https://www.arcgis.com).

styleName

Property

Type: string | null | undefined

A registered web style name. Only Esri Web Style Symbols (2D) and Esri Web Style Symbols (3D) can be referenced here. Note that the 2D web style symbols are only supported in 2D and 3D web style symbols are only supported in 3D with an exception of EsriIconsStyle which can be used in both 2D and 3D.

Requires portal property to be set. Can not be used in conjunction with styleUrl.

See class description for example.

See also

Guide - WebStyleSymbol reference list

styleUrl

Property

Type: string | null | undefined

URL that points to the web style definition. Cannot be used in conjunction with styleName and portal.

See class description for example.

type

readonly Property

Type: "web-style"

The symbol type.

Methods

Method	Signature	Class
`fromJSON` inherited static	`fromJSON(json: any): any`	JSONSupportMixin
`clone`	`clone(): WebStyleSymbol`
`fetchSymbol`	`fetchSymbol(options?: WebStyleSymbolFetchSymbolOptions \| null \| undefined): Promise<Symbol2D3DUnion>`
`toJSON` inherited	`toJSON(): any`	JSONSupportMixin

fromJSON

inheritedstatic Method

Signature: fromJSON (json: any): any

Inherited from: JSONSupportMixin

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameters

Parameter	Type	Description	Required
json	`any`	A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.

Returns: any
Returns a new instance of this class.

clone

Method

Signature: clone (): WebStyleSymbol

Creates a deep clone of the symbol.

Returns: WebStyleSymbol
A deep clone of the object that invoked this method.

Example

// Creates a deep clone of the graphic's symbol
let symLyr = graphic.symbol.clone();

fetchSymbol

Method

Signature: fetchSymbol (options?: WebStyleSymbolFetchSymbolOptions | null | undefined): Promise<Symbol2D3DUnion>

Resolves and returns the symbol instance the WebStyleSymbol refers to.

See also

Guide - Visualizing points with 3D symbols

Parameters

Parameter	Type	Description	Required
options	`WebStyleSymbolFetchSymbolOptions \| null \| undefined`	An object with the following properties.

Returns: Promise<Symbol2D3DUnion>
When resolved, returns a symbol instance.

Example

// Given a SimpleRenderer with a WebStyleSymbol, replaces the symbol with its non-referencing version by fetching it
renderer.symbol.fetchSymbol().then(function(actualSymbol) {
  renderer.symbol = actualSymbol;
});

toJSON

inherited Method

Signature: toJSON (): any

Inherited from: JSONSupportMixin

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.

Returns: any
The ArcGIS portal JSON representation of an instance of this class.

Type definitions

WebStyleSymbolFetchSymbolOptions

Type definition

Supertypes: AbortOptions

acceptedFormats

Property

Type: WebStyleAcceptedFormat[] | undefined

A list of accepted formats. The symbol will resolve to the first accepted format in the list.

Default value: ["web", "cim"]