The line symbol constructor is the simplest, because it can be defined with just three parameters namely style, color, and width.

The style is a module constant. The following styles are provided by the module:

The module provides other style constants such as STYLE_LONGDASH, STYLE_LONGDASHDOT, STYLE_NULL, STYLE_SHORTDASH, STYLE_SHORTDASHDOT, STYLE_SHORTDASHDOTDOT, STYLE_SHORTDOT, and STYLE_SOLID.

STYLE_SOLID is the default style, which provides an uninterrupted solid line.

We can set the color of the line using the simpleLineSymbol.setColor(color) method; here, color is Esri Color object, and simpleLineSymbol is an instance of SimpleLineSymbol object. The style constant can be set using the setStyle(style) method. SimpleLineSymbol.toJson() is an important method that converts a SimpleLineSymbol to an ArcGIS Server JSON representation.

The following code snippet will create a solid red line:

var simpleLineSymbol = new SimpleLineSymbol();
var color = new Color("red");
simpleLineSymbol.setColor(color);
simpleLineSymbol.setWidth(2);

The SimpleMarkerSymbol method is used to symbolize a point. Symbolizing a point geometry has an extra layer of complexity than symbolizing a line in that it accepts an outline parameter which in itself is a SimpleLineSymbol object.

The following style constants are provided by the module:

The setAngle(angle) method rotates the symbol clockwise around its center by a specified angle. The setColor(color) method sets the symbol color. setOffset (x and y) sets the x and y offsets of a marker in screen units. setOutline(outline) sets the outline of the marker symbol. setSize(size) lets us set the size of a marker in pixels. setStyle(style) sets the marker symbol style. toJson() converts objects into their ArcGIS Server JSON representation.

If selecting the appropriate color and style and other properties for a symbol seemed like a difficult choice, the following web page tries to help you out by providing a sandbox to generate any type of symbol and the code required to define a similar symbol in your code. The webpage is at http://developers.arcgis.com/javascript/samples/playground/index.html.

Navigating to this URL will land you in a page similar to the following screenshot. We can select almost any type of symbol:

Selecting one of them will navigate you to another page where you can select the properties and generate the symbology code.

Well, we easily generated the code required to generate a semi-transparent, red-colored, diamond-shaped SimpleMarkerSymbol (with no outline):

// Modules required: 
// esri/symbols/SimpleMarkerSymbol
// esri/symbols/SimpleLineSymbol

var marker = new SimpleMarkerSymbol();
marker.setStyle(SimpleMarkerSymbol.STYLE_DIAMOND);
marker.setColor(new Color([255, 0, 0, 0.55]));
marker.setSize(25);

The SimpleFillSymbol module helps us generate symbology for polygons.

Some of the module constants for the STYLE parameter are given here:

SimpleFillSymbol.STYLE_SOLID is the default styling.

When we need to picture an icon to symbolize a point geometry, we can use this module. Instead of providing the color information as a parameter, we need an image URL to display a picture as a marker symbol.

Searching for the appropriate PictureMarkerSymbol is aided by a web page found at http://developers.arcgis.com/javascript/samples/portal_symbols/index.html.

Navigating to this URL will open a page as shown next. When a picture icon is selected, a code is generated below. This code can be reused to recreate PictureMarkerSymbology as the one selected in the web page.

The generated code is a JSON representation of PictureMarkerSymbol. The JSON object provides the following properties:

Among these, imageData and url are redundant, so we can avoid the imageData property, if we can use the URL property. The imageData property is just the Base64 representation of the image. To avoid this, we can uncheck a box at the top-right corner of the web page, which reads something like Enable Base64 encoding.

Also, if the values for angle, xoffset, and yoffset are 0, we can omit these too.

Using the URL of the icon provided by this web page and in ArcGIS Symbol Playground will enable us to further customize PictureMarkerSymbol.

To customize PictureMakerSymbol use the following:

// Modules required: 
// esri/symbols/PictureMarkerSymbol

var marker = new PictureMarkerSymbol();
marker.setHeight(64);
marker.setWidth(64);
marker.setUrl("http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png");

PictureFillSymbol

PictureFillSymbol goes a step further and lets us fill a polygon geometry with an image.

TextSymbol

Text symbols can be generated in lieu of labels. Text symbols lack geometry, so it needs to be attached to geometry.

The following snippet generated from ArcGIS Symbol Playground demonstrates the components of generating TextSymbol:

// Modules required: 
// esri/symbols/TextSymbol
// esri/symbols/Font

var font = new Font();
font.setWeight(Font.WEIGHT_BOLD);
font.setSize(65);
var textSym = new TextSymbol();
textSym.setFont(font);
textSym.setColor(new Color([255, 0, 0, 1]));
textSym.setText("Sample Text");