{"id":249352,"date":"2018-07-05T11:00:02","date_gmt":"2018-07-05T11:00:02","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=249352"},"modified":"2018-07-16T15:58:43","modified_gmt":"2018-07-16T22:58:43","slug":"labeling-in-2d","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/labeling-in-2d","title":{"rendered":"Introduction to labeling in 2D with ArcGIS JavaScript API 4.8"},"author":7921,"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":[127992,96582,127982,128002,34641],"industry":[],"product":[36831,36601],"class_list":["post-249352","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-4-8","tag-arcgis-api-for-javascript","tag-jsapi","tag-labeling","tag-webgl","product-js-api-arcgis","product-developers"],"acf":{"short_description":"New at version 4.8 of the ArcGIS API for JavaScript, you can now label 2D FeatureLayers and CSVLayers with WebGL!","flexible_content":[{"acf_fc_layout":"content","content":"

The recent release of version 4.8<\/a> of the ArcGIS API for JavaScript\u00a0added more ways to visualize your data and enhance your web apps with new capabilities. One of the most highly anticipated capabilities was labeling with WebGL-enabled<\/a>\u00a0layers. We are proud to announce that labeling<\/a> is now supported for\u00a0FeatureLayers<\/a>\u00a0and\u00a0CSVLayers<\/a>\u00a0in 2D\u00a0MapViews<\/a>!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":268272,"id":268272,"title":"Screenshot","filename":"Screenshot.jpg","filesize":62552,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/labeling-in-2d\/screenshot-4","alt":"","author":"7921","description":"","caption":"","name":"screenshot-4","status":"inherit","uploaded_to":249352,"date":"2018-07-05 17:11:19","modified":"2018-07-05 17:11:19","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1632,"height":815,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","thumbnail-width":213,"thumbnail-height":106,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","medium-width":464,"medium-height":232,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","medium_large-width":768,"medium_large-height":384,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","large-width":1632,"large-height":815,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","1536x1536-width":1536,"1536x1536-height":767,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","2048x2048-width":1632,"2048x2048-height":815,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","card_image-width":826,"card_image-height":412,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot.jpg","wide_image-width":1632,"wide_image-height":815}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/labels-multiple-classes\/index.html"},{"acf_fc_layout":"content","content":"

Adding Labels<\/h2>\n

Adding labels with this new capability is very similar to how we add labels to MapImageLayers<\/a> or to FeatureLayers in\u00a0SceneViews<\/a>.<\/p>\n

The\u00a0labelingInfo<\/a>\u00a0property of\u00a0FeatureLayers<\/a>\u00a0and\u00a0CSVLayers<\/a> is specified as an array of\u00a0LabelClass<\/a>\u00a0objects. The LabelClass<\/a> defines the display logic for the labels, such as: label expressions, label placement options, scale ranges, and symbol type. When working with 2D MapViews, more than one LabelClass can be added to each layer, and the LabelClass symbol property will always be TextSymbol. The\u00a0TextSymbol<\/a>\u00a0class supports altering the graphics of the labels, such as:\u00a0color<\/a>,\u00a0font<\/a>,\u00a0halo<\/a>, and other properties. The Font<\/a> class (which is a property of the TextSymbol) supports styling the font used by the TextSymbol by setting\u00a0the font’s:\u00a0family<\/a>,\u00a0decoration<\/a>,\u00a0size<\/a>,\u00a0style<\/a>, and\u00a0weight<\/a>\u00a0properties.<\/p>\n

Here is a code snippet and a sample of setting the above properties, with labels selectively applied to features with elevations greater than 2000 meters.<\/p>\n"},{"acf_fc_layout":"content","content":"

\r\nvar<\/span> labelClass = {\r\n  \/\/ Content<\/span>\r\n  labelExpressionInfo: {\r\n    expression: \"$feature.ELEVATION + ' m'\"<\/span>\r\n  },\r\n  \r\n  \/\/ Appearance<\/span>\r\n  symbol: {\r\n    type: \"text\"<\/span>,\r\n    color: \"white\"<\/span>,\r\n    haloColor: [30<\/span>, 70<\/span>, 190<\/span>],\r\n    haloSize: 1<\/span>,\r\n    font: {\r\n      family: \"arial\"<\/span>,\r\n      style: \"normal\"<\/span>,\r\n      weight: \"bold\"<\/span>,\r\n      size: 10<\/span>\r\n    }\r\n  },\r\n  \r\n  \/\/ Placement<\/span>\r\n  labelPlacement: \"above-right\"<\/span>,\r\n \r\n  \/\/ Visibility<\/span>\r\n  where: \"ELEVATION > 2000\"<\/span>\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":268532,"id":268532,"title":"Screenshot","filename":"Screenshot-6.png","filesize":52113,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/labeling-in-2d\/screenshot-11","alt":"","author":"7921","description":"","caption":"","name":"screenshot-11","status":"inherit","uploaded_to":249352,"date":"2018-07-05 17:41:40","modified":"2018-07-05 17:41:40","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":996,"height":664,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","thumbnail-width":213,"thumbnail-height":142,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","medium-width":392,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","large-width":996,"large-height":664,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","1536x1536-width":996,"1536x1536-height":664,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","2048x2048-width":996,"2048x2048-height":664,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","card_image-width":698,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-6.png","wide_image-width":996,"wide_image-height":664}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/dawken\/pen\/gKyRyQ?editors=0010"},{"acf_fc_layout":"content","content":"
Now we will walk through the different properties that we described above in further detail.<\/p>\n
 <\/p>\n"},{"acf_fc_layout":"content","content":"
Label Expressions<\/h2>\n
The most important part of any typographic work is the actual text content. With the ArcGIS API for JavaScript, you do not have to set the text feature-by-feature; instead, you can define a generic\u00a0rule that will be executed on each feature to derive the corresponding text.<\/p>\n"},{"acf_fc_layout":"content","content":"
\r\nlabelClass.labelExpressionInfo = {\r\n  expression: \"$feature.NAME + ' (' + $feature.STATE + ')'\"<\/span>\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
These rules are expressions written using Arcade<\/a>, a scripting language that is available across the entire ArcGIS platform.<\/p>\n
When labeling a point layer you can use multiple label classes, so that every feature will be associated with more than one label. This is useful when there are several attributes that should be displayed.<\/p>\n
We prepared an app that displays two labels for each feature<\/a>; notice how the name of a weather station appears to the right of the marker (\"center-right\"<\/code> placement) while the 4-letters ICAO code is displayed just below (\"below-right\"<\/code> placement).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":268302,"id":268302,"title":"Screenshot","filename":"Screenshot-2.png","filesize":84163,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/labeling-in-2d\/screenshot-6","alt":"","author":"7921","description":"","caption":"","name":"screenshot-6","status":"inherit","uploaded_to":249352,"date":"2018-07-05 17:15:14","modified":"2018-07-05 17:15:14","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":795,"height":753,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","thumbnail-width":211,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","medium-width":276,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","medium_large-width":768,"medium_large-height":727,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","large-width":795,"large-height":753,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","1536x1536-width":795,"1536x1536-height":753,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","2048x2048-width":795,"2048x2048-height":753,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","card_image-width":491,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/Screenshot-2.png","wide_image-width":795,"wide_image-height":753}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/dawken\/pen\/jKeNyP?editors=0010"},{"acf_fc_layout":"content","content":"
Label Placement<\/h2>\n
The purpose of\u00a0LabelClass<\/code>\u00a0is to emit a label; the term placement refers to its relative position to the feature. The documentation for LabelClass<\/code>\u00a0lists all possible values<\/a>\u00a0for the placement<\/code> attribute but, in short:<\/p>\n