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.
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 | | |
Properties
angle
- Type
- number
The angle of the marker relative to the screen in degrees.
- Default value
- 0
color
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 stringsymbol.color = "dodgerblue";// HEX stringsymbol.color = "#33cc33";// array of RGBA valuessymbol.color = [51, 204, 51, 0.3];// object with rgba propertiessymbol.color = { r: 51, g: 51, b: 204, a: 0.7}; height
- 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 pointssymbol.height = 14;// height in pixelssymbol.height = "20px";// height in pointssymbol.height = "14pt"; url
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 PictureMarkerSymbolsymbol.url = "logo.svg"; width
- 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 pointssymbol.height = 14;// height in pixelssymbol.height = "20px";// height in pointssymbol.height = "14pt"; xoffset
- Type
- number
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 pointssymbol.xoffset = 4;// xoffset in pixelssymbol.xoffset = "2px";// xoffset in pointssymbol.xoffset = "4pt"; yoffset
- Type
- number
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 pointssymbol.yoffset = 4;// yoffset in pixelssymbol.yoffset = "2px";// yoffset in pointssymbol.yoffset = "4pt";Methods
fromJSON
- Signature
-
fromJSON (json: any): any
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 | 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
- 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 symbollet symLyr = graphic.symbol.clone(); toJSON
- Signature
-
toJSON (): any
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.