Hide Table of Contents
esri
Map
plugins
process
toolbars
workers
Class: PictureMarkerSymbol
[ AMD Module Require | Legacy Module Require ]

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

Description

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/symbol/Symbol
|_esri/symbol/MarkerSymbol
  |_esri/symbol/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
sizeNumberSize of the marker 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

NameTypeSummary
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
setSize(size)MarkerSymbolSets the size of a marker in pixels
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.
Arguments:
<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.
Arguments:
<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.

<Number> size

Size of the marker 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 value: MarkerSymbol
Arguments:
<Number> angle Required The angle value. 0 is pointing right and values progress clockwise.

setColor(color)

Sets the symbol color.
Return value: Symbol
Arguments:
<Color> color Required Symbol color.
Sample:

symbol.setColor(new esri.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 value: PictureMarkerSymbol
Arguments:
<Number> height Required Height of marker in pixels.

setOffset(x,y)

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

setSize(size)

Sets the size of a marker in pixels.
Return value: MarkerSymbol
Arguments:
<Number> size Required The width of the symbol in pixels.
Sample:
          var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
          markerSymbol.setPath(path);
       
          markerSymbol.setColor(new esri.Color(color));
          markerSymbol.setOutline(null);
          markerSymbol.setSize("32");

setUrl(url)

Sets the URL where the image is located.
Return value: PictureMarkerSymbol
Arguments:
<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 value: PictureMarkerSymbol
Arguments:
<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 value: Object