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