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, 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 RegularCopy
Alegreya BoldCopy
Alegreya Bold ItalicCopy
Alegreya ItalicCopy
Alegreya RegularCopy
Alegreya SC BoldCopy
Alegreya SC ItalicCopy
Alegreya SC RegularCopy
Alegreya Sans ItalicCopy
Amarante RegularCopy
Amatic SC BoldCopy
Arial BoldCopy
Arial Bold ItalicCopy
Arial ItalicCopy
Arial RegularCopy
Arial Unicode MS BoldCopy
Arial Unicode MS RegularCopy
Atomic Age RegularCopy
Audiowide RegularCopy
Avenir Next LT Pro BoldCopy
Avenir Next LT Pro Bold ItalicCopy
Avenir Next LT Pro Demi ItalicCopy
Avenir Next LT Pro ItalicCopy
Avenir Next LT Pro LightCopy
Avenir Next LT Pro Light ItalicCopy
Avenir Next LT Pro MediumCopy
Avenir Next LT Pro Medium BoldCopy
Avenir Next LT Pro Medium Bold ItalicCopy
Avenir Next LT Pro Medium ItalicCopy
Avenir Next LT Pro RegularCopy
Avenir Next LT Pro Regular BoldCopy
BellTopo Sans BoldCopy
BellTopo Sans Bold ItalicCopy
BellTopo Sans ItalicCopy
BellTopo Sans RegularCopy
Belleza RegularCopy
Black Ops One RegularCopy
Cabin Sketch BoldCopy
Cabin Sketch RegularCopy
Coming Soon RegularCopy
FGDC GeoAge RegularCopy
Homemade Apple RegularCopy
IM FELL DW Pica PRO ItalicCopy
IM FELL DW Pica PRO RegularCopy
Josefin Sans RegularCopy
Josefin Sans Semibold ItalicCopy
Josefin Slab BoldCopy
Josefin Slab Bold ItalicCopy
Josefin Slab ItalicCopy
Josefin Slab Light ItalicCopy
Josefin Slab RegularCopy
Josefin Slab Semibold ItalicCopy
Josefin Slab Thin ItalicCopy
Just Another Hand RegularCopy
Kranky RegularCopy
Life Savers BoldCopy
Loved by the King RegularCopy
Merriweather BoldCopy
Merriweather Bold ItalicCopy
Merriweather ItalicCopy
Merriweather RegularCopy
Meta Pro BoldCopy
Meta Pro Bold ItalicCopy
Meta Pro BookCopy
Meta Pro Book ItalicCopy
Meta Pro Cond XboldCopy
Meta Pro Cond Xbold ItalicCopy
Meta Pro MediumCopy
Meta Pro Medium ItalicCopy
Montserrat BoldCopy
Montserrat ItalicCopy
Montserrat Medium ItalicCopy
Montserrat RegularCopy
Montserrat Semibold ItalicCopy
Noto Sans BoldCopy
Noto Sans Bold ItalicCopy
Noto Sans ItalicCopy
Noto Sans RegularCopy
Noto Serif BoldCopy
Noto Serif Bold ItalicCopy
Noto Serif ItalicCopy
Noto Serif RegularCopy
Old Standard TT BoldCopy
Old Standard TT ItalicCopy
Old Standard TT RegularCopy
Orbitron BoldCopy
Orbitron RegularCopy
Oregano ItalicCopy
Oregano RegularCopy
Oswald BoldCopy
Oswald RegularCopy
Pacifico RegularCopy
Palatino Linotype RegularCopy
Playfair Display BlackCopy
Playfair Display BoldCopy
Playfair Display Bold ItalicCopy
Playfair Display ItalicCopy
Playfair Display RegularCopy
Playfair Display SC BoldCopy
Playfair Display SC RegularCopy
Redressed RegularCopy
Risque RegularCopy
Roboto Condensed ItalicCopy
Roboto Condensed Light ItalicCopy
Rye RegularCopy
Special Elite RegularCopy
Syncopate BoldCopy
Syncopate RegularCopy
Tangerine RegularCopy
Ubuntu BoldCopy
Ubuntu Bold ItalicCopy
Ubuntu Condensed RegularCopy
Ubuntu ItalicCopy
Ubuntu LightCopy
Ubuntu Light BoldCopy
Ubuntu Light Bold ItalicCopy
Ubuntu Light ItalicCopy
Ubuntu Medium ItalicCopy
Ubuntu Mono BoldCopy
Ubuntu Mono Bold ItalicCopy
Ubuntu Mono ItalicCopy
Ubuntu Mono RegularCopy
Ubuntu RegularCopy
UnifrakturCook BoldCopy
Vast Shadow RegularCopy
Walter Turncoat Regular