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 FeatureLayer, CSVLayer, SceneLayer, StreamLayer, OGCFeatureLayer, 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. 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.

When loading fonts using @font-face, the font might not be available yet when the labels are rendered. In this case, the labels are either rendered with the fallback font or with unsupported character symbols in case the fallback font doesn't contain those characters. To avoid this, preload the font by adding a link element to the page head section and setting the rel attribute to preload:

 
1
<link rel="preload" as="font" href="./my-font.ttf" type="font/ttf">

Define the font in the css file:

       
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 use it for the labels:

               
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"
      }
    }
  ],
}

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

MapView

FeatureLayer, CSVLayer, and StreamLayer

Labeling is supported for FeatureLayer, CSVLayer, 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 fonts 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 currently supported fonts:

FontPreviewCode
Abril Fatface Regular
Alegreya Bold
Alegreya Bold Italic
Alegreya Italic
Alegreya Regular
Alegreya SC Bold
Alegreya SC Italic
Alegreya SC Regular
Alegreya Sans Italic
Amarante Regular
Amatic SC Bold
Arial Bold
Arial Bold Italic
Arial Italic
Arial Regular
Arial Unicode MS Bold
Arial Unicode MS Regular
Atomic Age Regular
Audiowide Regular
Avenir Next LT Pro Bold
Avenir Next LT Pro Bold Italic
Avenir Next LT Pro Demi Italic
Avenir Next LT Pro Italic
Avenir Next LT Pro Light
Avenir Next LT Pro Light Italic
Avenir Next LT Pro Regular
AvenirNext LT Pro Light Italic
AvenirNext LT Pro Light Regular
AvenirNext LT Pro Medium Bold
AvenirNext LT Pro Medium Bold Italic
AvenirNext LT Pro Regular Bold
AvenirNext LT Pro Regular Bold Italic
AvenirNext LT Pro Regular Italic
AvenirNext LT Pro Regular Regular
Belleza Regular
Black Ops One Regular
Cabin Sketch Bold
Cabin Sketch Regular
Coming Soon Regular
Homemade Apple Regular
IM FELL DW Pica PRO Italic
IM FELL DW Pica PRO Regular
Josefin Sans Regular
Josefin Slab Bold
Josefin Slab Bold Italic
Josefin Slab Italic
Josefin Slab Light Italic
Josefin Slab Regular
Josefin Slab Thin Italic
Just Another Hand Regular
Kranky Regular
Life Savers Bold
Loved by the King Regular
Merriweather Bold
Merriweather Bold Italic
Merriweather Italic
Merriweather Regular
Montserrat Bold
Montserrat Italic
Montserrat Medium Italic
Montserrat Regular
Noto Sans Bold
Noto Sans Bold Italic
Noto Sans Italic
Noto Sans Regular
Noto Serif Bold
Noto Serif Bold Italic
Noto Serif Italic
Noto Serif Regular
Old Standard TT Bold
Old Standard TT Italic
Old Standard TT Regular
Orbitron Bold
Orbitron Regular
Oregano Italic
Oregano Regular
Oswald Bold
Oswald Regular
Pacifico Regular
Palatino Linotype Regular
Playfair Display Black
Playfair Display Black Regular
Playfair Display Bold
Playfair Display Bold Italic
Playfair Display Italic
Playfair Display Regular
Playfair Display SC Bold
Playfair Display SC Regular
Redressed Regular
Risque Regular
Roboto Condensed Italic
Roboto Condensed Light Italic
Rye Regular
Special Elite Regular
Syncopate Bold
Syncopate Regular
Tangerine Regular
Ubuntu Bold
Ubuntu Bold Italic
Ubuntu Condensed Regular
Ubuntu Italic
Ubuntu Light
Ubuntu Light Bold
Ubuntu Light Bold Italic
Ubuntu Light Italic
Ubuntu Light Regular
Ubuntu Medium Italic
Ubuntu Mono Bold
Ubuntu Mono Bold Italic
Ubuntu Mono Italic
Ubuntu Mono Regular
Ubuntu Regular
UnifrakturCook Bold
Vast Shadow Regular
Walter Turncoat Regular

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.