PictureMarkerSymbol | References | ArcGIS Maps SDK for JavaScript

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

const PictureMarkerSymbol = await $arcgis.import("@arcgis/core/symbols/PictureMarkerSymbol.js");

Inheritance: PictureMarkerSymbol→MarkerSymbol→Symbol→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.0

PictureMarkerSymbol renders Point graphics in either a 2D MapView or 3D SceneView using an image. A url must point to a valid image. PictureMarkerSymbols may be applied to point features in a FeatureLayer or individual graphics. The image below depicts a FeatureLayer whose point features are styled with a PictureMarkerSymbol.

Known Limitations:

SVG documents must include a definition for width and height to load properly in Firefox.
Animated GIF and PNG images are not supported in 3D SceneView.
The height and width of the symbol is restricted to no more than 200px.
Animated SVG images are currently not supported.

To avoid CORS issues with this symbol, do one of the following:

Make certain that the image is hosted on a CORS enabled server. Use an image hosted on the same domain as the application. Install a proxy.

See also

Example

let symbol = {
  type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
  url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
  width: "64px",
  height: "64px"
};

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	PictureMarkerSymbolProperties

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
angle inherited	number	MarkerSymbol
color	Color \| null
declaredClass readonly inherited	string	Accessor
height	number
type readonly	"picture-marker"
url	string \| null \| undefined
width	number
xoffset inherited	number	MarkerSymbol
yoffset inherited	number	MarkerSymbol

angle

inherited Property

Type: number

Inherited from: MarkerSymbol

The angle of the marker relative to the screen in degrees.

Default value: 0

color

Property

Type: Color | null

PictureMarkerSymbols do not utilize color information; this property is ignored if set. The color property is present for consistency with other symbol types.

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.

height

autocast Property

Type: number

The height of the image in points. This value may be autocast with a string expressing size in points or pixels (e.g. 12px).

The maximum allowed height of a picture marker symbol is 200px. If you set any value higher than 200px, then the image will be scaled down to a height of 200px while preserving the aspect ratio of the image.

Default value: 12

Examples

// height in points
symbol.height = 14;

// height in pixels
symbol.height = "20px";

// height in points
symbol.height = "14pt";

type

readonly Property

Type: "picture-marker"

The symbol type.

url

Property

Type: string | null | undefined

The URL to an image or SVG document. To avoid CORS issues with this symbol, do one of the following:

Make certain that the image is hosted on a CORS enabled server.
Use an image hosted on the same domain as the application.
Install a proxy.

Known Limitations

SVG documents must include a definition for width and height to load properly in Firefox.
Animated GIF and PNG images are not supported in SceneView. See the Custom WebGL layer view sample to learn how to accomplish this using WebGL.
Animated SVG images are currently not supported.

Examples

symbol.url = "cat-1-hurricane.png";

// render SVG document as a PictureMarkerSymbol
symbol.url = "logo.svg";

width

autocast Property

Type: number

The width of the image in points. This value may be autocast with a string expressing size in points or pixels (e.g. 12px).

The maximum allowed width of a picture marker symbol is 200px. If you set any value higher than 200px, then the image will be scaled down to a width of 200px while preserving the aspect ratio of the image.

Default value: 12

Examples

// height in points
symbol.height = 14;

// height in pixels
symbol.height = "20px";

// height in points
symbol.height = "14pt";

xoffset

autocast inherited Property

Type: number

Inherited from: MarkerSymbol

The offset on the x-axis in points. This value may be autocast with a string expressing size in points or pixels (e.g. 12px).

Default value: 0

Examples

// xoffset in points
symbol.xoffset = 4;

// xoffset in pixels
symbol.xoffset = "2px";

// xoffset in points
symbol.xoffset = "4pt";

yoffset

autocast inherited Property

Type: number

Inherited from: MarkerSymbol

The offset on the y-axis in points. This value may be autocast with a string expressing size in points or pixels (e.g. 12px).

Default value: 0

Examples

// yoffset in points
symbol.yoffset = 4;

// yoffset in pixels
symbol.yoffset = "2px";

// yoffset in points
symbol.yoffset = "4pt";

Methods

Method	Signature	Class
fromJSON inherited static	fromJSON(json: any): any	JSONSupportMixin
clone	clone(): PictureMarkerSymbol
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 (): PictureMarkerSymbol

Creates a deep clone of the symbol.

Returns: PictureMarkerSymbol
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();

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.