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
Constants
STYLE_CIRCLE | The marker is a circle. |
STYLE_CROSS | The marker is a cross. |
STYLE_DIAMOND | The marker is a diamond. |
STYLE_PATH | The marker is a shape defined using an SVG Path string. See also the setPath method. |
STYLE_SQUARE | The marker is a square. |
STYLE_TRIANGLE | The marker is a triangle. |
STYLE_X | The marker is a diagonal cross. |
Properties
Methods
Constructor Details
Creates a new empty SimpleMarkerSymbol object.
Sample:
require([
"esri/symbols/SimpleMarkerSymbol", ...
], function(SimpleMarkerSymbol, ... ) {
var sms = new SimpleMarkerSymbol();
...
});
Creates a new SimpleMarkerSymbol object with parameters.
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]));
...
});
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
The angle of the marker.
Default value: 0
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)
The marker style. See the Constants table for valid values.
Default value: STYLE_CIRCLE
The type of symbol.
Known values: simplemarkersymbol | picturemarkersymbol | simplelinesymbol | cartographiclinesymbol | simplefillsymbol | picturefillsymbol | textsymbol
The offset on the x-axis in pixels.
Default value: 0
The offset on the y-axis in pixels.
Default value: 0
Method Details
Rotates the symbol clockwise around its center by the specified angle.
Parameters:
<Number > angle |
Required |
The angle value. 0 is pointing right and values progress clockwise. |
Sets the symbol color.
Parameters:
<Color > color |
Required |
Symbol color. |
Sample:
require([
"esri/Color", ...
], function(Color, ... ) {
symbol.setColor(new Color([255,255,0,0.5]));
...
});
Sets the x and y offset of a marker in screen units.
Parameters:
<Number > x |
Required |
The X offset value in pixels. |
<Number > y |
Required |
The Y offset value in pixels. |
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.
Sets the marker shape to the given path string and switches the marker style to STYLE_PATH. (Added at v3.4)
Parameters:
<String > path |
Required |
SVG path of the icon. |
Sets the size of a marker in pixels.
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");
Sets the marker symbol style.
Parameters:
<String > style |
Required |
Marker style. See the Constants table for valid values. |
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"}
}