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

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:

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:

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

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:

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

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.