Hide Table of Contents
esri/dijit/util
esri/process
esri/workers
Class: PictureMarkerSymbol
[ AMD Module Require | Legacy Module Require ]

require(["esri/symbols/PictureMarkerSymbol"], function(PictureMarkerSymbol) { /* code goes here */ });

Description

(Added at v1.0)
Marker symbols are used to draw points and multipoints on the graphics layer. PictureMarkerSymbol uses an image as a marker.

Samples

Search for samples that use this class.

Class hierarchy

esri/symbols/Symbol
|_esri/symbols/MarkerSymbol
  |_esri/symbols/PictureMarkerSymbol

Constructors

NameSummary
new PictureMarkerSymbol(url, width, height)Creates a new PictureMarkerSymbol object.
new PictureMarkerSymbol(json)Creates a new PictureMarkerSymbol object using a JSON object.

Properties

NameTypeSummary
angleNumberThe angle of the marker.
colorColorSymbol color.
heightNumberHeight of the image in pixels.
typeStringThe type of symbol.
urlStringURL of the image.
widthNumberWidth of the image in pixels.
xoffsetNumberThe offset on the x-axis in pixels.
yoffsetNumberThe offset on the y-axis in pixels.

Methods

NameReturn typeSummary
setAngle(angle)MarkerSymbolRotates the symbol clockwise around its center by the specified angle.
setColor(color)SymbolSets the symbol color.
setHeight(height)PictureMarkerSymbolSets the height of the image for display.
setOffset(x, y)MarkerSymbolSets the x and y offset of a marker in screen units.
setUrl(url)PictureMarkerSymbolSets the URL where the image is located.
setWidth(width)PictureMarkerSymbolSets the width of the image for display.
toJson()ObjectConverts object to its ArcGIS Server JSON representation.
Constructor Details

new PictureMarkerSymbol(url, width, height)

Creates a new PictureMarkerSymbol object.
Parameters:
<String> url Required URL of the image.
<Number> width Required Width of the image in pixels. The default value is the actual width of the image.
<Number> height Required Height of the image in pixels. The default value is the actual height of the image.
Sample:

Example 1

require([
  "esri/symbols/PictureMarkerSymbol", ... 
], function(PictureMarkerSymbol, ... ) {
  var pictureMarkerSymbol = new PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 51);
  ...
});

Example 2

require([
  "esri/symbols/PictureMarkerSymbol", ... 
], function(PictureMarkerSymbol, ... ) {
  var pictureMarkerSymbol = new PictureMarkerSymbol('/images/diamond.png', 25, 25);
  ...
});

new PictureMarkerSymbol(json)

Creates a new PictureMarkerSymbol object using a JSON object.

When you create a MarkerSymbol, SimpleMarkerSymbol or PictureMarkerSymbol from a JSON object, you may specify a property angle to rotate the symbol. Be aware that the angle in the JSON is different from MarkerSymbol.angle. The angle in the JSON follows the traditional ArcGIS specification and is rotated counter-clockwise, whereas the angle in the symbol is rotated clockwise.

For example, the following code with angle=-30 in the JSON will create a symbol rotated -30 degrees counter-clockwise; that is, 30 degrees clockwise, which symbol.angle=30 would also produce.
Parameters:
<Object> json Required

JSON object representing the PictureMarkerSymbol. View the REST API Reference for Symbol Objects for details on creating a JSON symbol. Note that when specifying symbol width and height using JSON the values should be entered in points, the JavaScript API then converts the point values to pixels.

Sample:
require([
  "esri/symbols/PictureMarkerSymbol", ... 
], function(PictureMarkerSymbol, ... ) {
  //Height and Width are specified in points
  var symbol =  new PictureMarkerSymbol({
    "url":"graphics/redArrow2.png",
    "height":20,
    "width":20,
    "type":"esriPMS"
    "angle": -30,
  });
});
Property Details

<Number> angle

The angle of the marker.
Default value: 0

<Color> color

Symbol color.

<Number> height

Height of the image in pixels.

<String> type

The type of symbol.
Known values: simplemarkersymbol | picturemarkersymbol | simplelinesymbol | cartographiclinesymbol | simplefillsymbol | picturefillsymbol | textsymbol

<String> url

URL of the image.

<Number> width

Width of the image in pixels.

<Number> xoffset

The offset on the x-axis in pixels.
Default value: 0

<Number> yoffset

The offset on the y-axis in pixels.
Default value: 0
Method Details

setAngle(angle)

Rotates the symbol clockwise around its center by the specified angle.
Return type: MarkerSymbol
Parameters:
<Number> angle Required The angle value. 0 is pointing right and values progress clockwise.

setColor(color)

Sets the symbol color.
Return type: Symbol
Parameters:
<Color> color Required Symbol color.
Sample:
require([
  "esri/Color", ... 
], function(Color, ... ) {
  symbol.setColor(new Color([255,255,0,0.5]));
  ...
});

setHeight(height)

Sets the height of the image for display. The height can be larger or smaller than the actual width of the image. As the image gets larger, it will become more pixilated.
Return type: PictureMarkerSymbol
Parameters:
<Number> height Required Height of marker in pixels.

setOffset(x, y)

Sets the x and y offset of a marker in screen units.
Return type: MarkerSymbol
Parameters:
<Number> x Required The X offset value in pixels.
<Number> y Required The Y offset value in pixels.

setUrl(url)

Sets the URL where the image is located.
Return type: PictureMarkerSymbol
Parameters:
<String> url Required URL location of marker image.

setWidth(width)

Sets the width of the image for display. The width can be larger or smaller than the actual width of the image. As the image gets larger, it will become more pixilated.
Return type: PictureMarkerSymbol
Parameters:
<Number> width Required Width of marker in pixels.

toJson()

Converts object to its ArcGIS Server JSON representation.

Be aware that the angle in the JSON is different from MarkerSymbol.angle. The angle in the JSON follows the traditional ArcGIS specification and is rotated counter-clockwise, whereas the angle in the symbol is rotated clockwise. For example, if your MarkerSymbol has angle=30 (clockwise), this method will return a JSON object where angle=-30 (counter-clockwise):

{
  "color": [255,255,255,64],
  "size": 12,
  "angle": -30,
  "xoffset": 0,
  "yoffset": 0,
  "type": "esriSMS",
  "style": "esriSMSCross",
  "outline": {"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}
}
Return type: Object