Labeling

Overview

Labeling features is supported across many classes in the API. However, there are different properties and resources available depending on the layer type, rendering mechanism, and if you are working in 2D or 3D.

SceneView

Labeling is supported for CSVLayers, FeatureLayers, SceneLayer, StreamLayer, and Sublayer, in 3D SceneViews. The labelingInfo property is specified as an array of LabelClass objects, which contains the labelExpressionInfo, labelPlacement, and TextSymbol3DLayer. The TextSymbol3DLayer class supports altering the material, font, halo, and other properties of the label graphic.

Sample: Flat vs. volumetric 3D symbol layers

Known Limitations (SceneView)

  • Labeling is currently supported for points.
  • The Font.decoration property is currently not supported.
  • Currently only one LabelClass per layer is supported.

Fonts for SceneView

The supported font families for 3D SceneViews are dependent upon the fonts installed on the user's computer and web browser. If an app uses a font that is not installed, the Font class implements a fallback mechanism that will use the default font family value, which is sans-serif.

See these references for instructions on how to install a new font on Windows or Mac.

MapView

FeatureLayer and CSVLayer

As of version 4.8, labeling is supported for FeatureLayers, and CSVLayers in 2D MapViews, when the layers are created from either feature services hosted on ArcGIS Online, or from non-hosted enterprise services from version 10.6.1 or later of ArcGIS Server.

The labelingInfo property is specified as an array of LabelClass objects, which contains the labelExpressionInfo, labelPlacement, and TextSymbol. The TextSymbol class supports altering the color, font, halo, and other properties of the label graphic.

Sample: Multi-line labels

Known Limitations (MapView)

  • Labeling is currently supported for points and polygons.
  • Support for Font.family, Font.style, and Font.weight properties are based on hosted fonts files in .pbf format. By default, fonts are available on https://static.arcgis.com/fonts. The URL can be configured by setting the esriConfig.fontsUrl property. See fonts for available font families.

Fonts for FeatureLayer and CSVLayer

Support for Font.family, Font.style, and Font.weight properties are based on hosted fonts files in .pbf format. By default, the fonts available are mostly the same ones used by the Esri Vector Basemaps These fonts are listed on page 29 in the Esri Vector Basemap Reference Document. These fonts are available via https://static.arcgis.com/fonts. The URL can be configured to point to your own font resources by setting the esriConfig.fontsUrl property.

If a Font is not available, it will use the default font family, which is sans-serif. This uses the arial-unicode-ms font file.

Fonts with bold, italic, or both, require these properties to be set in the Font.style and Font.weight properties, as opposed to being set in the Font.family. To see which fonts support what types of characters (e.g. Latin, Cyrillic, CJKV), you can search for the font name in the Microsoft Typography or Google Fonts.

List of currently supported fonts:

FontStyleWeightCode Snippet
Abril Fatface Regularnormalnormalfont: { family: 'abril-fatface', style: 'normal', weight: 'normal' }
Alegreya Boldnormalboldfont: { family: 'alegreya', style: 'normal', weight: 'bold' }
Alegreya Bold Italicitalicboldfont: { family: 'alegreya', style: 'italic', weight: 'bold' }
Alegreya Italicitalicnormalfont: { family: 'alegreya', style: 'italic', weight: 'normal' }
Alegreya Regularnormalnormalfont: { family: 'alegreya', style: 'normal', weight: 'normal' }
Alegreya Sans Italicitalicnormalfont: { family: 'alegreya-sans', style: 'italic', weight: 'normal' }
Alegreya SC Boldnormalboldfont: { family: 'alegreya-sc', style: 'normal', weight: 'bold' }
Alegreya SC Italicitalicnormalfont: { family: 'alegreya-sc', style: 'italic', weight: 'normal' }
Alegreya SC Regularnormalnormalfont: { family: 'alegreya-sc', style: 'normal', weight: 'normal' }
Amarante Regularnormalnormalfont: { family: 'amarante', style: 'normal', weight: 'normal' }
Amatic SC Boldnormalboldfont: { family: 'amatic-sc', style: 'normal', weight: 'bold' }
Arial Boldnormalboldfont: { family: 'arial', style: 'normal', weight: 'bold' }
Arial Bold Italicitalicboldfont: { family: 'arial', style: 'italic', weight: 'bold' }
Arial Italicitalicnormalfont: { family: 'arial', style: 'italic', weight: 'normal' }
Arial Regularnormalnormalfont: { family: 'arial', style: 'normal', weight: 'normal' }
Arial Unicode MS Boldnormalboldfont: { family: 'arial-unicode-ms', style: 'normal', weight: 'bold' }
Arial Unicode MS Regularnormalnormalfont: { family: 'arial-unicode-ms', style: 'normal', weight: 'normal' }
Atomic Age Regularnormalnormalfont: { family: 'atomic-age', style: 'normal', weight: 'normal' }
Audiowide Regularnormalnormalfont: { family: 'audiowide', style: 'normal', weight: 'normal' }
Avenir Next LT Pro Boldnormalboldfont: { family: 'avenir-next-lt-pro', style: 'normal', weight: 'bold' }
Avenir Next LT Pro Bold Italicitalicboldfont: { family: 'avenir-next-lt-pro', style: 'italic', weight: 'bold' }
Avenir Next LT Pro Demi Italicitalicnormalfont: { family: 'avenir-next-lt-pro-demi', style: 'italic', weight: 'normal' }
Avenir Next LT Pro Italicitalicnormalfont: { family: 'avenir-next-lt-pro', style: 'italic', weight: 'normal' }
Avenir Next LT Pro Light Italicitalicnormalfont: { family: 'avenir-next-lt-pro-light', style: 'italic', weight: 'normal' }
Avenir Next LT Pro Regularnormalnormalfont: { family: 'avenir-next-lt-pro', style: 'normal', weight: 'normal' }
AvenirNext LT Pro Light Italicitalicnormalfont: { family: 'avenirnext-lt-pro-light', style: 'italic', weight: 'normal' }
AvenirNext LT Pro Light Regularnormalnormalfont: { family: 'avenirnext-lt-pro-light', style: 'normal', weight: 'normal' }
AvenirNext LT Pro Medium Boldnormalboldfont: { family: 'avenirnext-lt-pro-medium', style: 'normal', weight: 'bold' }
AvenirNext LT Pro Medium Bold Italicitalicboldfont: { family: 'avenirnext-lt-pro-medium', style: 'italic', weight: 'bold' }
AvenirNext LT Pro Regular Boldnormalboldfont: { family: 'avenirnext-lt-pro-regular', style: 'normal', weight: 'bold' }
AvenirNext LT Pro Regular Bold Italicitalicboldfont: { family: 'avenirnext-lt-pro-regular', style: 'italic', weight: 'bold' }
AvenirNext LT Pro Regular Italicitalicnormalfont: { family: 'avenirnext-lt-pro-regular', style: 'italic', weight: 'normal' }
AvenirNext LT Pro Regular Regularnormalnormalfont: { family: 'avenirnext-lt-pro-regular', style: 'normal', weight: 'normal' }
Belleza Regularnormalnormalfont: { family: 'belleza', style: 'normal', weight: 'normal' }
Black Ops One Regularnormalnormalfont: { family: 'black-ops-one', style: 'normal', weight: 'normal' }
Cabin Sketch Boldnormalboldfont: { family: 'cabin-sketch', style: 'normal', weight: 'bold' }
Cabin Sketch Regularnormalnormalfont: { family: 'cabin-sketch', style: 'normal', weight: 'normal' }
Coming Soon Regularnormalnormalfont: { family: 'coming-soon', style: 'normal', weight: 'normal' }
Homemade Apple Regularnormalnormalfont: { family: 'homemade-apple', style: 'normal', weight: 'normal' }
IM FELL DW Pica PRO Italicitalicnormalfont: { family: 'im-fell-dw-pica', style: 'italic', weight: 'normal' }
IM FELL DW Pica PRO Regularnormalnormalfont: { family: 'im-fell-dw-pica', style: 'normal', weight: 'normal' }
Josefin Sans Regularnormalnormalfont: { family: 'josefin-sans', style: 'normal', weight: 'normal' }
Josefin Sans Semibold Italicitalicnormalfont: { family: 'josefin-sans-semibold', style: 'italic', weight: 'normal' }
Josefin Slab Boldnormalboldfont: { family: 'josefin-slab', style: 'normal', weight: 'bold' }
Josefin Slab Bold Italicitalicboldfont: { family: 'josefin-slab', style: 'italic', weight: 'bold' }
Josefin Slab Italicitalicnormalfont: { family: 'josefin-slab', style: 'italic', weight: 'normal' }
Josefin Slab Lightnormalnormalfont: { family: 'josefin-slab-light', style: 'normal', weight: 'normal' }
Josefin Slab Light Italicitalicnormalfont: { family: 'josefin-slab-light', style: 'italic', weight: 'normal' }
Josefin Slab Regularnormalnormalfont: { family: 'josefin-slab', style: 'normal', weight: 'normal' }
Josefin Slab Semibold Italicitalicnormalfont: { family: 'josefin-slab-semibold', style: 'italic', weight: 'normal' }
Josefin Slab Thin Italicitalicnormalfont: { family: 'josefin-slab-thin', style: 'italic', weight: 'normal' }
Just Another Hand Regularnormalnormalfont: { family: 'just-another-hand', style: 'normal', weight: 'normal' }
Kranky Regularnormalnormalfont: { family: 'kranky', style: 'normal', weight: 'normal' }
Life Savers Boldnormalboldfont: { family: 'life-savers', style: 'normal', weight: 'bold' }
Loved By The King Regularnormalnormalfont: { family: 'loved-by-the-king', style: 'normal', weight: 'normal' }
Merriweather Boldnormalboldfont: { family: 'merriweather', style: 'normal', weight: 'bold' }
Merriweather Bold Italicitalicboldfont: { family: 'merriweather', style: 'italic', weight: 'bold' }
Merriweather Italicitalicnormalfont: { family: 'merriweather', style: 'italic', weight: 'normal' }
Merriweather Regularnormalnormalfont: { family: 'merriweather', style: 'normal', weight: 'normal' }
Montserrat Boldnormalboldfont: { family: 'montserrat', style: 'normal', weight: 'bold' }
Montserrat Italicitalicnormalfont: { family: 'montserrat', style: 'italic', weight: 'normal' }
Montserrat Mediumnormalnormalfont: { family: 'montserrat-medium', style: 'normal', weight: 'normal' }
Montserrat Medium Italicitalicnormalfont: { family: 'montserrat-medium', style: 'italic', weight: 'normal' }
Montserrat Regularnormalnormalfont: { family: 'montserrat', style: 'normal', weight: 'normal' }
Montserrat Semibold Italicitalicnormalfont: { family: 'montserrat-semibold', style: 'italic', weight: 'normal' }
Noto Sans Boldnormalboldfont: { family: 'noto-sans', style: 'normal', weight: 'bold' }
Noto Sans Bold Italicitalicboldfont: { family: 'noto-sans', style: 'italic', weight: 'bold' }
Noto Sans Italicitalicnormalfont: { family: 'noto-sans', style: 'italic', weight: 'normal' }
Noto Sans Regularnormalnormalfont: { family: 'noto-sans', style: 'normal', weight: 'normal' }
Noto Serif Boldnormalboldfont: { family: 'noto-serif', style: 'normal', weight: 'bold' }
Noto Serif Bold Italicitalicboldfont: { family: 'noto-serif', style: 'italic', weight: 'bold' }
Noto Serif Italicitalicnormalfont: { family: 'noto-serif', style: 'italic', weight: 'normal' }
Noto Serif Regularnormalnormalfont: { family: 'noto-serif', style: 'normal', weight: 'normal' }
Old Standard TT Boldnormalboldfont: { family: 'old-standard-tt', style: 'normal', weight: 'bold' }
Old Standard TT Italicitalicnormalfont: { family: 'old-standard-tt', style: 'italic', weight: 'normal' }
Old Standard TT Regularnormalnormalfont: { family: 'old-standard-tt', style: 'normal', weight: 'normal' }
Orbitron Boldnormalboldfont: { family: 'orbitron', style: 'normal', weight: 'bold' }
Orbitron Regularnormalnormalfont: { family: 'orbitron', style: 'normal', weight: 'normal' }
Oregano Italicitalicnormalfont: { family: 'oregano', style: 'italic', weight: 'normal' }
Oregano Regularnormalnormalfont: { family: 'oregano', style: 'normal', weight: 'normal' }
Oswald Boldnormalboldfont: { family: 'oswald', style: 'normal', weight: 'bold' }
Oswald Lightnormalnormalfont: { family: 'oswald-light', style: 'normal', weight: 'normal' }
Oswald Regularnormalnormalfont: { family: 'oswald', style: 'normal', weight: 'normal' }
Pacifico Regularnormalnormalfont: { family: 'pacifico', style: 'normal', weight: 'normal' }
Palatino Linotype Regularnormalnormalfont: { family: 'palatino-linotype', style: 'normal', weight: 'normal' }
Playfair Display Black Regularnormalnormalfont: { family: 'playfair-display-black', style: 'normal', weight: 'normal' }
Playfair Display Boldnormalboldfont: { family: 'playfair-display', style: 'normal', weight: 'bold' }
Playfair Display Bold Italicitalicboldfont: { family: 'playfair-display', style: 'italic', weight: 'bold' }
Playfair Display Italicitalicnormalfont: { family: 'playfair-display', style: 'italic', weight: 'normal' }
Playfair Display Regularnormalnormalfont: { family: 'playfair-display', style: 'normal', weight: 'normal' }
Playfair Display SC Boldnormalboldfont: { family: 'playfair-display-sc', style: 'normal', weight: 'bold' }
Playfair Display SC Regularnormalnormalfont: { family: 'playfair-display-sc', style: 'normal', weight: 'normal' }
Redressed Regularnormalnormalfont: { family: 'redressed', style: 'normal', weight: 'normal' }
Risque Regularnormalnormalfont: { family: 'risque', style: 'normal', weight: 'normal' }
Roboto Condensed Italicitalicnormalfont: { family: 'roboto-condensed', style: 'italic', weight: 'normal' }
Roboto Condensed Light Italicitalicnormalfont: { family: 'roboto-condensed-light', style: 'italic', weight: 'normal' }
Rye Regularnormalnormalfont: { family: 'rye', style: 'normal', weight: 'normal' }
Special Elite Regularnormalnormalfont: { family: 'special-elite', style: 'normal', weight: 'normal' }
Syncopate Boldnormalboldfont: { family: 'syncopate', style: 'normal', weight: 'bold' }
Syncopate Regularnormalnormalfont: { family: 'syncopate', style: 'normal', weight: 'normal' }
Tangerine Regularnormalnormalfont: { family: 'tangerine', style: 'normal', weight: 'normal' }
Ubuntu Boldnormalboldfont: { family: 'ubuntu', style: 'normal', weight: 'bold' }
Ubuntu Bold Italicitalicboldfont: { family: 'ubuntu', style: 'italic', weight: 'bold' }
Ubuntu Condensed Regularnormalnormalfont: { family: 'ubuntu-condensed', style: 'normal', weight: 'normal' }
Ubuntu Italicitalicnormalfont: { family: 'ubuntu', style: 'italic', weight: 'normal' }
Ubuntu Light Boldnormalboldfont: { family: 'ubuntu-light', style: 'normal', weight: 'bold' }
Ubuntu Light Bold Italicitalicboldfont: { family: 'ubuntu-light', style: 'italic', weight: 'bold' }
Ubuntu Light Italicitalicnormalfont: { family: 'ubuntu-light', style: 'italic', weight: 'normal' }
Ubuntu Light Regularnormalnormalfont: { family: 'ubuntu-light', style: 'normal', weight: 'normal' }
Ubuntu Medium Italicitalicnormalfont: { family: 'ubuntu-medium', style: 'italic', weight: 'normal' }
Ubuntu Mono Boldnormalboldfont: { family: 'ubuntu-mono', style: 'normal', weight: 'bold' }
Ubuntu Mono Bold Italicitalicboldfont: { family: 'ubuntu-mono', style: 'italic', weight: 'bold' }
Ubuntu Mono Italicitalicnormalfont: { family: 'ubuntu-mono', style: 'italic', weight: 'normal' }
Ubuntu Mono Regularnormalnormalfont: { family: 'ubuntu-mono', style: 'normal', weight: 'normal' }
Ubuntu Regularnormalnormalfont: { family: 'ubuntu', style: 'normal', weight: 'normal' }
UnifrakturCook Boldnormalboldfont: { family: 'unifrakturcook', style: 'normal', weight: 'bold' }
Vast Shadow Regularnormalnormalfont: { family: 'vast-shadow', style: 'normal', weight: 'normal' }
Walter Turncoat Regularnormalnormalfont: { family: 'walter-turncoat', style: 'normal', weight: 'normal' }

MapImageLayer

Labeling is supported for MapImageLayer by setting the labelingInfo property on the Sublayer class. The labelingInfo property is specified as an array of LabelClass objects, which contains the labelExperssion, labelPlacement, and TextSymbol. The TextSymbol class supports altering the color, font, halo, and other properties of the label graphic. Labeling is supported for Points, Polylines, and Polygons.

Sample: MapImageLayer - label sublayer features

Fonts for MapImageLayer

The supported font families for MapImageLayers in a MapView are dependent upon the fonts installed on the ArcGIS Server that published the layer. To check what fonts are available on ArcGIS Server, run the Available Fonts task under Home > services > System > PublishingTools (GPServer) (requires admin access). To add a new font, the font must be installed on your computer and accessible to ArcGIS Server by registering it using ArcGIS Desktop. If an app uses a font that is not installed, the Font class implements a fallback mechanism that will use the default font family value, which is sans-serif.