Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: SimpleMarkerSymbol

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

Description

(Added at v1.0)
Marker symbols are used to draw points and multipoints on the graphics layer. SimpleMarkerSymbol is used to display points as a simple shape, for example, a circle. In addition, the symbol can have an optional outline, which is defined by a line symbol.
The color property does not apply to marker symbols defined with the cross or x style. Since these styles are wholly comprised of outlines, you must set the color of symbols with those styles via the setOutline() method.
Explore the SimpleMarkerSymbol in the ArcGIS Symbol Playground. This is a place to explore and learn how to work with various properties and methods before implementing it into custom code. Try out new features, customize them, and copy the generated code into your own application. This sample provides a starting point so as to allow use of these features as quickly as possible.

Samples

Search for samples that use this class.

Class hierarchy

esri/symbols/Symbol
|_esri/symbols/MarkerSymbol
  |_esri/symbols/SimpleMarkerSymbol

Constructors

NameSummary
new SimpleMarkerSymbol()Creates a new empty SimpleMarkerSymbol object.
new SimpleMarkerSymbol(style, size, outline, color)Creates a new SimpleMarkerSymbol object with parameters.
new SimpleMarkerSymbol(json)Creates a new SimpleMarkerSymbol object using a JSON object.

Constants

NameDescription
STYLE_CIRCLEThe marker is a circle.
STYLE_CROSSThe marker is a cross.
STYLE_DIAMONDThe marker is a diamond.
STYLE_PATHThe marker is a shape defined using an SVG Path string. See also the setPath method.
STYLE_SQUAREThe marker is a square.
STYLE_XThe marker is a diagonal cross.

Properties

NameTypeSummary
angleNumberThe angle of the marker.
colorColorSymbol color.
outlineSimpleLineSymbolOutline of the marker.
sizeNumberSize of the marker in pixels.
styleStringThe marker style.
typeStringThe type of symbol.
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.
setOffset(x, y)MarkerSymbolSets the x and y offset of a marker in screen units.
setOutline(outline)SimpleMarkerSymbolSets the outline of the marker symbol.
setPath(path)SimpleMarkerSymbolSets the marker shape to the given path string and switches the marker style to STYLE_PATH.
setSize(size)MarkerSymbolSets the size of a marker in pixels.
setStyle(style)SimpleMarkerSymbolSets the marker symbol style.
toJson()ObjectConverts object to its ArcGIS Server JSON representation.
Constructor Details

new SimpleMarkerSymbol()

Creates a new empty SimpleMarkerSymbol object.
Sample:
require([
  "esri/symbols/SimpleMarkerSymbol", ... 
], function(SimpleMarkerSymbol, ... ) {
  var sms = new SimpleMarkerSymbol();
  ...
});

new SimpleMarkerSymbol(style, size, outline, color)

Creates a new SimpleMarkerSymbol object with parameters.
Parameters:
<String> style Required See Constants table for values.
<Number> size Required Size of the marker in pixels.
<SimpleLineSymbol> outline Required See SimpleLineSymbol.
<Color> color Required Symbol color.
Sample:
require([
  "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", ... 
], function(SimpleMarkerSymbol, SimpleLineSymbol, Color, ... ) {
  new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
    new Color([255,0,0]), 1),
    new Color([0,255,0,0.25]));
  ...
});

new SimpleMarkerSymbol(json)

Creates a new SimpleMarkerSymbol 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.
var symbol = new SimpleMarkerSymbol({
  "color": [255,255,255,64],
  "size": 12,
  "angle": -30,
  "xoffset": 0,
  "yoffset": 0,
  "type": "esriSMS",
  "style": "esriSMSCircle",
  "outline": {
    "color": [0,0,0,255],
    "width": 1,
    "type": "esriSLS",
    "style": "esriSLSSolid"
  }
});
Parameters:
<Object> json Required JSON object representing the SimpleMarkerSymbol. View the Symbol Objects (Common data types in ArcGIS) 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.
Property Details

<Number> angle

The angle of the marker.
Default value: 0

<Color> color

Symbol color.
Outline of the marker.

<Number> size

Size of the marker in pixels. The default value is 16 pixels. For marker symbols defined using SVG paths use "auto" to render the SVG path at its original size. (Added at v3.7)

<String> style

The marker style. See the Constants table for valid values.
Default value: STYLE_CIRCLE

<String> type

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

<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]));
  ...
});

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.

setOutline(outline)

Sets the outline of the marker symbol. The color property of the SimpleLineSymbol directly modifies the overall color of marker symbols defined with the cross or x style.
Return type: SimpleMarkerSymbol
Parameters:
<SimpleLineSymbol> outline Required Symbol used for outline.

setPath(path)

Sets the marker shape to the given path string and switches the marker style to STYLE_PATH. (Added at v3.4)
Return type: SimpleMarkerSymbol
Parameters:
<String> path Required SVG path of the icon.

setSize(size)

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

setStyle(style)

Sets the marker symbol style.
Return type: SimpleMarkerSymbol
Parameters:
<String> style Required Marker style. See the Constants table for valid values.

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
Show Modal