{"id":164321,"date":"2009-10-26T22:37:03","date_gmt":"2009-10-26T22:37:03","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=164321"},"modified":"2018-12-18T10:45:14","modified_gmt":"2018-12-18T18:45:14","slug":"working-with-textsymbol-in-the-arcgis-javascript-api","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/working-with-textsymbol-in-the-arcgis-javascript-api","title":{"rendered":"Working with TextSymbol in the ArcGIS JavaScript API"},"author":4801,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[23591,24921,23011,26501],"industry":[],"product":[36831,36601],"class_list":["post-164321","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis-server","tag-javascript","tag-raster","tag-services","product-js-api-arcgis","product-developers"],"acf":{"short_description":"This post discusses how you can add text to your map using the ArcGIS JavaScript API. Your map service probably already has some labeling in it.","flexible_content":[{"acf_fc_layout":"content","content":"
\n

This post discusses how you can add text to your map using the ArcGIS JavaScript API. Your map service probably already has some labeling in it, but you may want to add descriptive information about graphics that you add on top of your map through tasks or queries. The ArcGIS JavaScript API does not have a built-in labeling engine with conflict detection and label placement algorithims, but you can use the\u00a0TextSymbol<\/a>\u00a0class to add text at a specific point location on the map.<\/p>\n

The\u00a0TextSymbol<\/a>\u00a0class has several properties that you can use to fine-tune the position and content of the text element such as angle, offset, font, and kerning (spacing between the letters).<\/p>\n

Use the TextSymbol.setFont() method to specify a font for the text. You can use the\u00a0Font<\/a>\u00a0class to set properties like text size, style and weight.<\/p>\n

Creating a text graphic<\/h3>\n

Let\u2019s look at a code snippet that uses several of the Font and TextSymbol properties to create a new TextSymbol and add it to our map as a text graphic. This graphic will denote an unexplored area on our map using an old cartographic phrase \u201cHere be dragons\u201d. First, we\u2019ll create the Font object and specify the font weight and size.<\/p>\n

    \r\n         var font  = new esri.symbol.Font();\r\n         font.setSize(\"12pt\");\r\n         font.setWeight(esri.symbol.Font.WEIGHT_BOLD);<\/pre>\n
Now we need to create a new TextSymbol and specify that it should be maroon, set at a 15-degree angle and be aligned to the start of our input point.Next, we use the setFont() method to assign the font we just created to the TextSymbol. Finally, we create a new graphic, assign it the newly created TextSymbol, then add the graphic to the map.<\/p>\n
         var textSymbol = new esri.symbol.TextSymbol(\"Here be dragons\");\r\n         textSymbol.setColor( new dojo.Color([128, 0, 0]));\r\n         textSymbol.setAlign(esri.symbol.TextSymbol.ALIGN_START);\r\n         textSymbol.setAngle(15);\r\n         \r\n         textSymbol.setFont(font);      \r\n        \r\n         var pt=  new esri.geometry.Point(x,y,map.spatialReference)\r\n         var gra = new esri.Graphic(pt,textSymbol);      \r\n         map.graphics.add(gra);<\/pre>\n
Simplifying the code<\/h3>\n
The code above is written in a verbose style to make it easier to examine the values we set for the TextSymbol and Font properties. We can reduce the length of the code snippet by using object constructors and chaining method calls. Let\u2019s explore this approach a bit:<\/p>\n