require(["esri/symbols/TextSymbol"], function(TextSymbol) { /* code goes here */ });
Description
(Added at v1.0)
Text symbols are used to add text on the graphics layer. Text symbols can also be used to define the symbol property of
Graphic if the geometry type is
Point or
Multipoint.
Samples
Search for
samples that use this class.
Class hierarchy
esri/symbols/Symbol
|_esri/symbols/TextSymbol
Constructors
Constants
ALIGN_END | The end of the text string is aligned with the point. |
ALIGN_MIDDLE | The center of the text string is aligned with the point. |
ALIGN_START | The beginning of the text string is aligned with the point. |
DECORATION_LINETHROUGH | Text has a lined striked through it. |
DECORATION_NONE | Text has no decoration. |
DECORATION_OVERLINE | Text has a line along the top. |
DECORATION_UNDERLINE | Text is underlined. |
Properties
Methods
Constructor Details
Creates a new TextSymbol object that includes only the text.
Parameters:
<String > text |
Required |
Text string for display in the graphics layer. |
Sample: Create a new text symbol using the default values for color, size, etc.
require([
"esri/symbols/TextSymbol", ...
], function(TextSymbol, ... ) {
var textSym = new TextSymbol("Hello World");
...
});
Create a new text symbol and set new values for color, weight, font and angle.
require([
"esri/symbols/TextSymbol", "esri/Color", "esri/symbols/Font", ...
], function(TextSymbol, Color, Font, ... ) {
var textSymbol = new TextSymbol("Hello World").setColor(
new Color([128,0,0])).setAlign(Font.ALIGN_START).setAngle(45).setFont(
new Font("12pt").setWeight(Font.WEIGHT_BOLD)) ;
...
});
Creates a new TextSymbol object.
Parameters:
<String > text |
Required |
Text string for display in the graphics layer. |
<Font > font |
Required |
Font for displaying text. |
<Color > color |
Required |
Symbol color. |
Creates a new TextSymbol object using a JSON object.
Parameters:
<Object > json |
Required |
JSON object representing the TextSymbol. 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. The TextSymbol does not support backgroundColor , borderLineColor , verticalAlignment or horizontalAlignment properties. |
Property Details
The text alignment in relation to the point. See the Constants table for valid values. Deprecated at v3.8. Use horizontalAlignment
and verticalAlignment
instead.
Default value: ALIGN_MIDDLE
Text angle. 0 is horizontal and the angle moves clockwise.
Default value: 0
The decoration on the text. See the Constants table for valid values.
Deprecated at v3.8. Use Font.decoration instead. Default value: DECORATION_NONE
Font for displaying text.
The halo color used for the text symbol.
Known limitations:- IE 9 and below not supported.
- Sub-pixel halo (i.e. fractional size such as 1.25px) renders inconsistently in various browsers.
(Added at v3.15)
The size (in pixel units) used if setting a halo on a text symbol.
Known limitations:- IE 9 and below not supported.
- Sub-pixel halo (i.e. fractional size such as 1.25px) renders inconsistently in various browsers.
(Added at v3.15)
Horizontal alignment of the text
with respect to the graphic. (Added at v3.8)
Known values: "left" | "right" | "center" | "justify"
Default value: "center"
Determines whether to adjust the spacing between characters in the text string.
Known values: true | false
Default value: true
Determines whether every character in the text string is rotated.
Known values: true | false
Default value: false
Text string for display in the graphics layer.
The type of symbol.
Known values: simplemarkersymbol | picturemarkersymbol | simplelinesymbol | cartographiclinesymbol | simplefillsymbol | picturefillsymbol | textsymbol
Vertical alignment of the text
with respect to the graphic.
Vertical alignment is not supported in Internet Explorer versions 7-10. Also, it is not supported when the graphics layer uses HTML Canvas to draw graphics. (Added at v3.8)
Known values: "baseline" | "top" | "middle" | "bottom"
Default value: "baseline"
The offset on the x-axis in pixels from the point.
Default value: 0
The offset on the y-axis in pixels from the point.
Default value: 0
Method Details
Sets the alignment of the text. Deprecated at v3.8. Use setHorizontalAlignment
and setVerticalAlignment
instead.
Parameters:
<String > align |
Required |
The text alignment. See the Constants table for valid values. |
Sample:
require([
"esri/symbols/TextSymbol", ...
], function(TextSymbol, ... ) {
var textSymbol = new TextSymbol();
textSymbol.setAlign(TextSymbol.ALIGN_START);
...
});
Sets the angle of the text.
Parameters:
<Number > angle |
Required |
Angle value between 0 and 359. |
Sample:
textSymbol.setAngle(15);
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 decoration for the text. Many browsers including Internet Explorer 7, Firefox and Opera 9 do not support the decoration properties for text symbols.
Deprecated at v3.8. Use Font.setDecoration instead. Parameters:
<String > decoration |
Required |
The decoration on the text. See the Constants table for valid values. |
Sets the text font.
Parameters:
<Font > font |
Required |
Text font. |
Sample:
require([
"esri/symbols/TextSymbol", "esri/symbols/Font", ...
], function(TextSymbol, Font, ... ) {
var textSymbol = new TextSymbol( ... );
var font = new Font();
font.setSize("12pt");
font.setWeight(Font.WEIGHT_BOLD);
textSymbol.setFont(font);
...
});
Sets a halo color for the text symbol.
NOTE: Known limitations when working with the text symbol halo:
- IE 9 and below not supported.
- Sub-pixel halo (i.e. fractional size such as 1.25px) renders inconsistently in various browsers.
(Added at v3.15) Parameters:
<Color > color |
Required |
The color used for the text symbol halo. |
Sample:
ts.setHaloColor(new Color([255, 0, 0]));
Sets the size of the halo (in pixels) used for the text symbol.
NOTE: Known limitations when working with the text symbol halo:
- IE 9 and below not supported.
- Sub-pixel halo (i.e. fractional size such as 1.25px) renders inconsistently in various browsers.
(Added at v3.15) Parameters:
<Number > size |
Required |
The size (in pixels) of the text symbol halo. |
Sample:
ts.setHaloSize(1);
Updates the horizontal alignment of the text symbol. (Added at v3.8)
Parameters:
<String > alignment |
Required |
Horizontal alignment of the text with respect to the graphic. See horizontalAlignment property for the list of supported options. |
Sets whether to adjust the spacing between characters in the text string.
Parameters:
<Boolean > kerning |
Required |
Set to true for kerning. |
Sets the x and y offset of the text.
Parameters:
<Number > x |
Required |
X offset value in pixels. |
<Number > y |
Required |
Y offset value in pixels. |
Sets whether every character in the text string is rotated. Many browsers including Internet Explorer 7, Firefox and Opera 9 do not support rotated for text symbols.
Parameters:
<Boolean > rotated |
Required |
Set to true to rotate all characters in the string. |
Sets the text string.
Parameters:
<String > text |
Required |
The text string. |
Updates the vertical alignment of the text symbol. (Added at v3.8)
Parameters:
<String > alignment |
Required |
Vertical alignment of the text with respect to the graphic. See verticalAlignment property for the list of supported options. |
Converts object to its ArcGIS Server JSON representation.