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, geometry type, and if you are working in 2D or 3D.

SceneView

Labeling is supported for all layer types that have a labelingInfo property, such as FeatureLayer. This 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. Labeling is supported for Points, Polylines, and Polygons.

Sample: Flat vs. volumetric 3D symbol layers

Known Limitations (SceneView)

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.

Fonts that are not installed locally can also be loaded from a url by defining a @font-face in a css file:

Use dark colors for code blocksCopy
       
1
2
3
4
5
6
7
@font-face {
   font-family: "MyFont";
   font-style: normal;
   font-weight: 400;
   font-display: auto;
   src: url("./my-font.ttf") format("truetype");
}

And referencing it from the Font.family property in a symbol layer:

Use dark colors for code blocksCopy
               
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const labelSymbol = {
  type: "label-3d",
  symbolLayers: [
    {
      type: "text",
      material: {
        color: [0, 0, 0, 0.8]
      },
      font: {
        size: 30,
        family: "MyFont"
      }
    }
  ]
}

MapView

FeatureLayer, CSVLayer, and StreamLayer

Labeling is supported for FeatureLayer, CSVLayer, GeoJSONLayer, StreamLayer, OGCFeatureLayer, and Sublayer, in 2D MapViews. 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. Labeling is supported for Points, Polylines, and Polygons.

Sample: Multi-line labels

Known Limitations (MapView)

  • 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 below for available font families.

Fonts for FeatureLayer, CSVLayer, and StreamLayer

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 in the Esri Vector Basemap Reference Document, under the Esri Vector Basemaps Resources\Fonts heading. 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.

Note that these fonts also apply to TextSymbol, whether it's used as graphics or labels in a 2D MapView.

List of fonts currently supported in a 2D MapView:

FontPreviewCode
Abril Fatface RegularAbril Fatface RegularCopy
Alegreya BoldAlegreya BoldCopy
Alegreya Bold ItalicAlegreya Bold ItalicCopy
Alegreya ItalicAlegreya ItalicCopy
Alegreya RegularAlegreya RegularCopy
Alegreya SC BoldAlegreya SC BoldCopy
Alegreya SC ItalicAlegreya SC ItalicCopy
Alegreya SC RegularAlegreya SC RegularCopy
Alegreya Sans ItalicAlegreya Sans ItalicCopy
Amarante RegularAmarante RegularCopy
Amatic SC BoldAmatic SC BoldCopy
Arial BoldArial BoldCopy
Arial Bold ItalicArial Bold ItalicCopy
Arial ItalicArial ItalicCopy
Arial RegularArial RegularCopy
Arial Unicode MS BoldArial Unicode MS BoldCopy
Arial Unicode MS RegularArial Unicode MS RegularCopy
Atomic Age RegularAtomic Age RegularCopy
Audiowide RegularAudiowide RegularCopy
Avenir Next LT Pro BoldAvenir Next LT Pro BoldCopy
Avenir Next LT Pro Bold ItalicAvenir Next LT Pro Bold ItalicCopy
Avenir Next LT Pro Demi ItalicAvenir Next LT Pro Demi ItalicCopy
Avenir Next LT Pro ItalicAvenir Next LT Pro ItalicCopy
Avenir Next LT Pro LightAvenir Next LT Pro LightCopy
Avenir Next LT Pro Light ItalicAvenir Next LT Pro Light ItalicCopy
Avenir Next LT Pro Medium BoldAvenir Next LT Pro Medium BoldCopy
Avenir Next LT Pro Medium Bold ItalicAvenir Next LT Pro Medium Bold ItalicCopy
Avenir Next LT Pro RegularAvenir Next LT Pro RegularCopy
Avenir Next LT Pro Regular BoldAvenir Next LT Pro Regular BoldCopy
BellTopo Sans BoldBellTopo Sans BoldCopy
BellTopo Sans Bold ItalicBellTopo Sans Bold ItalicCopy
BellTopo Sans ItalicBellTopo Sans ItalicCopy
BellTopo Sans RegularBellTopo Sans RegularCopy
Belleza RegularBelleza RegularCopy
Black Ops One RegularBlack Ops One RegularCopy
Cabin Sketch BoldCabin Sketch BoldCopy
Cabin Sketch RegularCabin Sketch RegularCopy
Coming Soon RegularComing Soon RegularCopy
FGDC GeoAge RegularFGDC GeoAge RegularCopy
Homemade Apple RegularHomemade Apple RegularCopy
IM FELL DW Pica PRO ItalicIM FELL DW Pica PRO ItalicCopy
IM FELL DW Pica PRO RegularIM FELL DW Pica PRO RegularCopy
Josefin Sans RegularJosefin Sans RegularCopy
Josefin Sans Semibold ItalicJosefin Sans Semibold ItalicCopy
Josefin Slab BoldJosefin Slab BoldCopy
Josefin Slab Bold ItalicJosefin Slab Bold ItalicCopy
Josefin Slab ItalicJosefin Slab ItalicCopy
Josefin Slab Light ItalicJosefin Slab Light ItalicCopy
Josefin Slab RegularJosefin Slab RegularCopy
Josefin Slab Thin ItalicJosefin Slab Thin ItalicCopy
Just Another Hand RegularJust Another Hand RegularCopy
Kranky RegularKranky RegularCopy
Life Savers BoldLife Savers BoldCopy
Loved by the King RegularLoved by the King RegularCopy
Merriweather BoldMerriweather BoldCopy
Merriweather Bold ItalicMerriweather Bold ItalicCopy
Merriweather ItalicMerriweather ItalicCopy
Merriweather RegularMerriweather RegularCopy
Montserrat BoldMontserrat BoldCopy
Montserrat ItalicMontserrat ItalicCopy
Montserrat Medium ItalicMontserrat Medium ItalicCopy
Montserrat RegularMontserrat RegularCopy
Montserrat Semibold ItalicMontserrat Semibold ItalicCopy
Noto Sans BoldNoto Sans BoldCopy
Noto Sans Bold ItalicNoto Sans Bold ItalicCopy
Noto Sans ItalicNoto Sans ItalicCopy
Noto Sans RegularNoto Sans RegularCopy
Noto Serif BoldNoto Serif BoldCopy
Noto Serif Bold ItalicNoto Serif Bold ItalicCopy
Noto Serif ItalicNoto Serif ItalicCopy
Noto Serif RegularNoto Serif RegularCopy
Old Standard TT BoldOld Standard TT BoldCopy
Old Standard TT ItalicOld Standard TT ItalicCopy
Old Standard TT RegularOld Standard TT RegularCopy
Orbitron BoldOrbitron BoldCopy
Orbitron RegularOrbitron RegularCopy
Oregano ItalicOregano ItalicCopy
Oregano RegularOregano RegularCopy
Oswald BoldOswald BoldCopy
Oswald RegularOswald RegularCopy
Pacifico RegularPacifico RegularCopy
Palatino Linotype RegularPalatino Linotype RegularCopy
Playfair Display BlackPlayfair Display BlackCopy
Playfair Display BoldPlayfair Display BoldCopy
Playfair Display Bold ItalicPlayfair Display Bold ItalicCopy
Playfair Display ItalicPlayfair Display ItalicCopy
Playfair Display RegularPlayfair Display RegularCopy
Playfair Display SC BoldPlayfair Display SC BoldCopy
Playfair Display SC RegularPlayfair Display SC RegularCopy
Redressed RegularRedressed RegularCopy
Risque RegularRisque RegularCopy
Roboto Condensed ItalicRoboto Condensed ItalicCopy
Roboto Condensed Light ItalicRoboto Condensed Light ItalicCopy
Rye RegularRye RegularCopy
Special Elite RegularSpecial Elite RegularCopy
Syncopate BoldSyncopate BoldCopy
Syncopate RegularSyncopate RegularCopy
Tangerine RegularTangerine RegularCopy
Ubuntu BoldUbuntu BoldCopy
Ubuntu Bold ItalicUbuntu Bold ItalicCopy
Ubuntu Condensed RegularUbuntu Condensed RegularCopy
Ubuntu ItalicUbuntu ItalicCopy
Ubuntu LightUbuntu LightCopy
Ubuntu Light BoldUbuntu Light BoldCopy
Ubuntu Light Bold ItalicUbuntu Light Bold ItalicCopy
Ubuntu Light ItalicUbuntu Light ItalicCopy
Ubuntu Medium ItalicUbuntu Medium ItalicCopy
Ubuntu Mono BoldUbuntu Mono BoldCopy
Ubuntu Mono Bold ItalicUbuntu Mono Bold ItalicCopy
Ubuntu Mono ItalicUbuntu Mono ItalicCopy
Ubuntu Mono RegularUbuntu Mono RegularCopy
Ubuntu RegularUbuntu RegularCopy
UnifrakturCook BoldUnifrakturCook BoldCopy
Vast Shadow RegularVast Shadow RegularCopy
Walter Turncoat RegularWalter Turncoat RegularCopy
Preview:
Code:
Use dark colors for code blocksCopy
 
1
{}

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 labelExpression, 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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.