Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: SimpleMarkerSymbol
[ AMD Module Require | Legacy Module Require ]
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
| Name | Summary |
|---|---|
| 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
| Name | Description |
|---|---|
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_X | The marker is a diagonal cross. |
Properties
| Name | Type | Summary |
|---|---|---|
| angle | Number | The angle of the marker. |
| color | Color | Symbol color. |
| outline | SimpleLineSymbol | Outline of the marker. |
| size | Number | Size of the marker in pixels. |
| style | String | The marker style. |
| type | String | The type of symbol. |
| xoffset | Number | The offset on the x-axis in pixels. |
| yoffset | Number | The offset on the y-axis in pixels. |
Methods
| Name | Return type | Summary |
|---|---|---|
| setAngle(angle) | MarkerSymbol | Rotates the symbol clockwise around its center by the specified angle. |
| setColor(color) | Symbol | Sets the symbol color. |
| setOffset(x, y) | MarkerSymbol | Sets the x and y offset of a marker in screen units. |
| setOutline(outline) | SimpleMarkerSymbol | Sets the outline of the marker symbol. |
| setPath(path) | SimpleMarkerSymbol | Sets the marker shape to the given path string and switches the marker style to STYLE_PATH. |
| setSize(size) | MarkerSymbol | Sets the size of a marker in pixels. |
| setStyle(style) | SimpleMarkerSymbol | Sets the marker symbol style. |
| toJson() | Object | Converts object to its ArcGIS Server JSON representation. |
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.
Parameters:
< |
Required | See Constants table for values. |
< |
Required | Size of the marker in pixels. |
< |
Required | See SimpleLineSymbol. |
< |
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]));
...
});
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.
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:
< |
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
<Color
ColorSymbol color.
<SimpleLineSymbol
SimpleLineSymbolOutline of the marker.
<Number
NumberSize 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
StringThe marker style. See the Constants table for valid values.
Default value:
STYLE_CIRCLE<String
StringThe type of symbol.
Known values:
simplemarkersymbol | picturemarkersymbol | simplelinesymbol | cartographiclinesymbol | simplefillsymbol | picturefillsymbol | textsymbolMethod Details
Rotates the symbol clockwise around its center by the specified angle.
Return type:
MarkerSymbolParameters:
< |
Required | The angle value. 0 is pointing right and values progress clockwise. |
Sets the symbol color.
Return type:
SymbolParameters:
< |
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.
Return type:
MarkerSymbolSets 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:
SimpleMarkerSymbolParameters:
< |
Required | Symbol used for outline. |
Sets the marker shape to the given path string and switches the marker style to STYLE_PATH. (Added at v3.4)
Return type:
SimpleMarkerSymbolParameters:
< |
Required | SVG path of the icon. |
Sets the size of a marker in pixels.
Return type:
MarkerSymbolParameters:
< |
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.
Return type:
SimpleMarkerSymbolParameters:
< |
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):
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