{"id":356062,"date":"2019-01-02T08:25:04","date_gmt":"2019-01-02T16:25:04","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=356062"},"modified":"2019-01-10T13:10:46","modified_gmt":"2019-01-10T21:10:46","slug":"choose-your-own-labeling-adventure","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure","title":{"rendered":"Choose Your Own Labeling Adventure"},"author":7451,"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":[27491,128002],"industry":[],"product":[36831,36601],"class_list":["post-356062","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-jsapi4","tag-labeling","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Here we will take a look at the current labeling capabilities of the 4.x version of the ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"

Welcome to labeling<\/a> with the 4.x version of the ArcGIS API for JavaScript<\/a>. Every release adds new functionality and enhancements to labeling in 2D MapViews and 3D SceneViews. What makes labeling so exciting is that it’s much like a Choose Your Own Adventure<\/a> novel in reverse: you know your desired ending, but how you start and how you get there is totally up to you.<\/p>\n

A previous blog<\/a> introduced 2D labeling at version 4.8<\/a>, and contains some solid fundamental information. As of\u00a0version 4.10<\/a>, you can label pretty much everything. You can label all the major layers<\/a>. You can label all the geometry<\/a> types. You can use different font<\/a> families, colors, and alignments. You can print labels, either in 2D MapViews with the PrintTask<\/a>, PrintWidget<\/a>, or\u00a0MapView.takeScreenshot<\/a>\u00a0method, or in 3D SceneViews with the\u00a0SceneView.takeScreenshot<\/a>\u00a0method.<\/p>\n"},{"acf_fc_layout":"content","content":"

Choose Your Own Labeling Adventure: The Great Outdoors<\/h3>\n

I have been fortunate to spend most of my adult life in or around nature, which is really the best place to go camping. For this adventure, I created a 2D Labeling app<\/a> that displays outdoor recreation locations (FeatureLayer points) and rivers (FeatureLayer polylines) in the United States.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":401462,"id":401462,"title":"labeling_app_blog3","filename":"labeling_app_blog3.png","filesize":273399,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\/labeling_app_blog3","alt":"","author":"7451","description":"","caption":"","name":"labeling_app_blog3","status":"inherit","uploaded_to":356062,"date":"2019-01-07 17:47:07","modified":"2019-01-07 17:47:07","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":1163,"height":528,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3-300x136.png","medium-width":300,"medium-height":136,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3-768x349.png","medium_large-width":768,"medium_large-height":349,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3-1024x465.png","large-width":1024,"large-height":465,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3.png","1536x1536-width":1163,"1536x1536-height":528,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3.png","2048x2048-width":1163,"2048x2048-height":528,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3-826x375.png","card_image-width":826,"card_image-height":375,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/labeling_app_blog3.png","wide_image-width":1163,"wide_image-height":528}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/noashx.github.io\/blog\/Adding_Labels_4.10.html"},{"acf_fc_layout":"content","content":"

Use the Bookmarks widget<\/a> to easily navigate between different scale ranges to see different labels and features displayed on the map. Click the above image to interact with the live app. It’s worth pointing out that the labels are generated on the fly based on the app’s data. So as you zoom or rotate the map, the label placement will change as labels\u00a0are deconflicted and optimized for display. This allows for massive amount of simultaneous labels to be displayed in the app.<\/p>\n

Now let’s explore the code. There are two different labeling styles here to investigate.<\/p>\n"},{"acf_fc_layout":"content","content":"

FeatureLayer (point) – Life Savers Bold<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":401482,"id":401482,"title":"PointLayer6","filename":"PointLayer6.png","filesize":56381,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\/pointlayer6","alt":"","author":"7451","description":"","caption":"","name":"pointlayer6","status":"inherit","uploaded_to":356062,"date":"2019-01-07 18:03:41","modified":"2019-01-07 18:03:41","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":561,"height":220,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6-300x118.png","medium-width":300,"medium-height":118,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6.png","medium_large-width":561,"medium_large-height":220,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6.png","large-width":561,"large-height":220,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6.png","1536x1536-width":561,"1536x1536-height":220,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6.png","2048x2048-width":561,"2048x2048-height":220,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6.png","card_image-width":561,"card_image-height":220,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/PointLayer6.png","wide_image-width":561,"wide_image-height":220}},"image_position":"left-center","orientation":"horizontal","hyperlink":"https:\/\/noashx.github.io\/blog\/Adding_Labels_4.10.html"},{"acf_fc_layout":"content","content":"

First, we label a FeatureLayer that displays outdoor recreation opportunities with point geometry. Similar to the above code example, the LabelClass is autocast<\/a>, meaning that we do not need to import the\u00a0LabelClass module, and can instead just create an object to hold all the labeling properties. This will be treated as a LabelClass object when we pass it to the labelingInfo<\/a> property of the FeatureLayer.\u00a0Here is an example code snippet:<\/p>\n"},{"acf_fc_layout":"content","content":"

const<\/span> labelClass = {  \r\n  symbol: {\r\n    type: \"text\"<\/span>,  \r\n    color: \"green\"<\/span>,\r\n    haloColor: \"white\"<\/span>,\r\n    haloSize: 2<\/span>,\r\n    font: {  \r\n      family: \"life-savers\"<\/span>,\r\n      size: 12<\/span>,\r\n      weight: \"bold\"<\/span>\r\n    }\r\n  },\r\n  labelPlacement: \"above-right\"<\/span>,\r\n  labelExpressionInfo: {\r\n    expression: 'DefaultValue($feature.MARKER_ACTIVITY, \"no data\")'<\/span>\r\n  }\r\n};\r\n\r\nvar<\/span> featureLayer = new<\/span> FeatureLayer({\r\n  portalItem: { id: \"6012738cd1c74582a5f98ea30ae9876f\"<\/span> },\r\n  labelingInfo: [labelClass]\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
FeatureLayer (polyline) – Arial Unicode MS Regular<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":388942,"id":388942,"title":"rivers2","filename":"rivers2.png","filesize":29653,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\/rivers2","alt":"","author":"7451","description":"","caption":"","name":"rivers2","status":"inherit","uploaded_to":356062,"date":"2018-12-20 21:16:22","modified":"2018-12-20 21:16:22","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":478,"height":262,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2-300x164.png","medium-width":300,"medium-height":164,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2.png","medium_large-width":478,"medium_large-height":262,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2.png","large-width":478,"large-height":262,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2.png","1536x1536-width":478,"1536x1536-height":262,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2.png","2048x2048-width":478,"2048x2048-height":262,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2.png","card_image-width":478,"card_image-height":262,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/rivers2.png","wide_image-width":478,"wide_image-height":262}},"image_position":"left-center","orientation":"horizontal","hyperlink":"https:\/\/noashx.github.io\/blog\/Adding_Labels_4.10.html"},{"acf_fc_layout":"content","content":"
Next, we have a sneaky good way to label features. For this app, we loaded a webmap<\/a> that serves as both the basemap and a container to hold the polyline layer. 2D FeatureLayer polyline labeling is new at version 4.10. Rather than create a new LabelClass and a new FeatureLayer or MapImageLayer referencing the polyline layer and the LabelClass, we simply added the polyline layer to the webmap and configured the labels in ArcGIS Online<\/a>. Here is an example code snippet of what that looks like:<\/p>\n"},{"acf_fc_layout":"content","content":"
const<\/span> map = new<\/span> WebMap({\r\n  portalItem: {  \r\n    id: \"901ab4abfc884c408fc6057f2dc53fbc\"<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
Supported Fonts<\/h3>\n
There are different font properties and resources available depending on the layer type, geometry type, and if you are working in 2D or 3D. Let’s look at the different font choices, and how they work.<\/p>\n
MapView Fonts<\/strong><\/p>\n
All font properties are supported in 2D MapViews. The supported\u00a0font families<\/a>\u00a0for\u00a0FeatureLayer<\/a>,\u00a0CSVLayer<\/a>, and\u00a0StreamLayer<\/a> in a 2D\u00a0MapView\u00a0are based on Esri hosted fonts files, which are download by the app as needed in\u00a0.pbf<\/code>\u00a0format. \u00a0If the app requests a font that is not available, it will use the default\u00a0font family, which\u00a0is arial-unicode-ms<\/code>. See the currently supported fonts<\/a> section of the Labeling guide page to find out more.<\/p>\n
For an interactive experience, check out the below 2D FeatureLayer Font Explorer app<\/a> that let’s you choose your own adventure with different font sizes, decorations, families, and arcade expressions.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":386472,"id":386472,"title":"FootballFontExplorer","filename":"FootballFontExplorer.png","filesize":120638,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\/footballfontexplorer","alt":"","author":"7451","description":"","caption":"Explore different font properties and arcade expressions (click image to view live app)","name":"footballfontexplorer","status":"inherit","uploaded_to":356062,"date":"2018-12-19 19:44:19","modified":"2018-12-19 19:58:26","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":776,"height":507,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer-300x196.png","medium-width":300,"medium-height":196,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer-768x502.png","medium_large-width":768,"medium_large-height":502,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer.png","large-width":776,"large-height":507,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer.png","1536x1536-width":776,"1536x1536-height":507,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer.png","2048x2048-width":776,"2048x2048-height":507,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer-712x465.png","card_image-width":712,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/FootballFontExplorer.png","wide_image-width":776,"wide_image-height":507}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/noashx.github.io\/blog\/FootballFontExplorer.html"},{"acf_fc_layout":"content","content":"
The supported\u00a0font families\u00a0for\u00a0MapImageLayers<\/a>\u00a0in a\u00a0MapView\u00a0are dependent upon the fonts installed on the\u00a0ArcGIS Server<\/a>\u00a0that published the layer. To check what fonts are available on ArcGIS Server, run the\u00a0Available Fonts<\/code>\u00a0task under\u00a0Home > services > System > PublishingTools (GPServer)<\/code>\u00a0(requires administrator access).<\/p>\n
SceneView Fonts<\/strong><\/p>\n
The supported\u00a0font families<\/a>\u00a0for 3D\u00a0SceneViews<\/a>\u00a0are dependent upon the fonts installed on the user’s computer and web browser. If an app uses a font that is not installed, the\u00a0Font<\/a>\u00a0class implements a fallback mechanism that will use the default\u00a0font family\u00a0value, which is\u00a0sans-serif<\/code>. See the Known Limitations (SceneView)<\/a> section of the Labeling guide page to understand the current restrictions.<\/p>\n"},{"acf_fc_layout":"content","content":"
Esri Icon Fonts<\/strong><\/p>\n
The Esri Icon Font<\/a> is a monochromatic icon set used at Esri for a consistent Esri branded theme. Icon fonts have several advantages, such as the ability to quickly change their color, and the fact that icon fonts can size themselves to be proportional to text placed with them. While the main use of the Esri Icon Fonts is to use them as the\u00a0symbol<\/a>\u00a0property of a\u00a0Graphic<\/a>,\u00a0one could also use them as the\u00a0font.family<\/a>\u00a0property of the\u00a0Label class<\/a>. This font works with\u00a02D MapViews and 3D SceneViews.<\/p>\n"},{"acf_fc_layout":"content","content":"
Labeling Recap<\/h3>\n
The starting point for labeling features is the LabelClass<\/a>. Here is where you choose your layer type by setting the labelExpression<\/a> property when working with MapImageLayer, or the labelExpressionInfo<\/a> property when working with other layer types. Then you set the symbol<\/a> property depending on\u00a0whether you are working with a 2D MapView or a 3D SceneView. If you choose 2D MapView, your next step is the TextSymbol<\/a>. You can explore the TextSymbol properties, and how they look, in the Symbol Playground<\/a>. If you choose 3D SceneView, your next steps are LabelSymbol3D<\/a> then TextSymbol3DLayer<\/a>. Each of these classes have specific properties and methods that you can access and set as you progress forward to your final destination: Font<\/a>. Now let’s take a look at the image below that summarizes the current labeling options.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":406982,"id":406982,"title":"4x_Labeling_Flowchart","filename":"4x_Labeling_Flowchart.png","filesize":719579,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\/4x_labeling_flowchart","alt":"","author":"7451","description":"","caption":"Labeling Flowchart (click to enlarge)","name":"4x_labeling_flowchart","status":"inherit","uploaded_to":356062,"date":"2019-01-10 21:09:17","modified":"2019-01-10 21:10:00","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":1450,"height":815,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart-300x169.png","medium-width":300,"medium-height":169,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart-768x432.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart-1024x576.png","large-width":1024,"large-height":576,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart.png","1536x1536-width":1450,"1536x1536-height":815,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart.png","2048x2048-width":1450,"2048x2048-height":815,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart.png","wide_image-width":1450,"wide_image-height":815}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/4x_Labeling_Flowchart.png"},{"acf_fc_layout":"content","content":"
This image depicts the classes needed for labeling, and their associated properties. The green text indicates that the property is a doorway to move through to the next relevant class. While all labeling choices terminate at Font, your options there are affected by your path.<\/p>\n
The Road Ahead<\/h3>\n
We have come a long way, both in terms of labeling functionality and in reading this blog post. We reviewed a lot of different labeling choices and opportunities, and hopefully you found the path that is right for you.<\/p>\n
Future releases will include additional\u00a0labelPlacement<\/code>\u00a0values for polylines and polygons in 2D\u00a0MapViews\u00a0and 3D\u00a0SceneViews, improved where clause<\/a> functionality, and so much more. Best of luck to you on your next labeling adventure!<\/p>\n"}],"authors":[{"ID":7451,"user_firstname":"Noah","user_lastname":"Sager","nickname":"Noah Sager","user_nicename":"noah-sager","display_name":"Noah Sager","user_email":"NSager@esri.com","user_url":"https:\/\/www.noahsager.net\/","user_registered":"2018-03-21 18:21:19","user_description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","user_avatar":""}],"related_articles":[{"ID":363902,"post_author":"4271","post_date":"2018-12-13 10:06:06","post_date_gmt":"2018-12-13 18:06:06","post_content":"","post_title":"What's New in ArcGIS API 4.10 for JavaScript (December 2018)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-4-10-december-2018","to_ping":"","pinged":"","post_modified":"2019-04-01 11:50:41","post_modified_gmt":"2019-04-01 18:50:41","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=363902","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":249352,"post_author":"7921","post_date":"2018-07-05 11:00:02","post_date_gmt":"2018-07-05 11:00:02","post_content":"","post_title":"Introduction to labeling in 2D with ArcGIS JavaScript API 4.8","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"labeling-in-2d","to_ping":"","pinged":"","post_modified":"2018-07-16 15:58:43","post_modified_gmt":"2018-07-16 22:58:43","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=249352","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":177411,"post_author":"4951","post_date":"2011-11-21 18:13:12","post_date_gmt":"2011-11-21 18:13:12","post_content":"","post_title":"Adding labels to ArcGIS Online web maps: Part 1","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"adding-labels-to-arcgis-online-web-maps-part-1","to_ping":"","pinged":"","post_modified":"2018-12-18 10:35:10","post_modified_gmt":"2018-12-18 18:35:10","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=177411","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/label_blog_card2.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/AlaskanRiversBackground_Update.png"},"yoast_head":"\nChoose Your Own Labeling Adventure<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Choose Your Own Labeling Adventure\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-10T21:10:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\"},\"author\":{\"name\":\"Noah Sager\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\"},\"headline\":\"Choose Your Own Labeling Adventure\",\"datePublished\":\"2019-01-02T16:25:04+00:00\",\"dateModified\":\"2019-01-10T21:10:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"jsapi4\",\"labeling\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\",\"name\":\"Choose Your Own Labeling Adventure\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-01-02T16:25:04+00:00\",\"dateModified\":\"2019-01-10T21:10:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Choose Your Own Labeling Adventure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\",\"name\":\"Noah Sager\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"caption\":\"Noah Sager\"},\"description\":\"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.\",\"sameAs\":[\"https:\/\/www.noahsager.net\/\",\"https:\/\/www.linkedin.com\/in\/noah-sager\",\"https:\/\/x.com\/noashx\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Choose Your Own Labeling Adventure","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure","og_locale":"en_US","og_type":"article","og_title":"Choose Your Own Labeling Adventure","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2019-01-10T21:10:46+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure"},"author":{"name":"Noah Sager","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068"},"headline":"Choose Your Own Labeling Adventure","datePublished":"2019-01-02T16:25:04+00:00","dateModified":"2019-01-10T21:10:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure"},"wordCount":5,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["jsapi4","labeling"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure","name":"Choose Your Own Labeling Adventure","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-01-02T16:25:04+00:00","dateModified":"2019-01-10T21:10:46+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/choose-your-own-labeling-adventure#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Choose Your Own Labeling Adventure"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068","name":"Noah Sager","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","caption":"Noah Sager"},"description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","sameAs":["https:\/\/www.noahsager.net\/","https:\/\/www.linkedin.com\/in\/noah-sager","https:\/\/x.com\/noashx"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager"}]}},"text_date":"January 2, 2019","author_name":"Noah Sager","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/AlaskanRiversBackground_Update.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":128002,"name":"labeling","slug":"labeling","term_group":0,"term_taxonomy_id":128002,"taxonomy":"post_tag","description":"","parent":0,"count":14,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2698,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":765,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/356062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7451"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=356062"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/356062\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=356062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=356062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=356062"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=356062"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=356062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
That’s it! A few lines of code adds a new FeatureLayer with beautiful labels, and all we have to do is input the portalItem id<\/a>. We could have used this method for all of our layers and labels, but I think it was valuable to see other choices and paths we could have taken to the end.<\/p>\n
Here we did two interesting things. First, we choose the Life Savers Bold font family, because it has a whimsical and outdoorsy look (totally subjective, but it’s my choice after all). I found the syntax to use this font on\u00a0the currently supported fonts<\/a> section of the Labeling guide page. Second, because I want the labels to standout against any background, I define the haloColor<\/a> and haloSize<\/a> properties of the TextSymbol class to contrast the color<\/a> property value.<\/p>\n"},{"acf_fc_layout":"content","content":"