WebStyleSymbol (2D)

WebStyleSymbol can be used to style FeatureLayer and GraphicsLayer.

This sample demonstrates how to style feature layer with 2D Web Style Symbols using UniqueValueRenderer in 2D MapView.

The code snippet below creates an array of 25 symbol names that will be used in the sample. The symbol names are well-known names from 2D Web Style Symbols. Then, it iterates through the symbol names and creates an array of value-symbol pairs as uniqueValueInfos on the UniqueValueRenderer for the feature layer.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const symbolCats = [
  "post-office",
  "atm",
  "place-of-worship",
  "park",
  "school",
  "hospital",
  "fire-station",
  "playground",
  "shopping-center",
  "campground",
  "golf-course",
  "library",
  "city-hall",
  "beach",
  "police-station",
  "subway-station",
  "train-station",
  "cemetery",
  "trail",
  "radio-tower",
  "museum",
  "airport",
  "live-music-venue",
  "sports-complex",
  "ferry"
];

rendererInfos = symbolCats.map((symCat) => {
  return {
    value: symCat,
    symbol: {
      type: "web-style",
      name: symCat,
      styleName: "Esri2DPointSymbolsStyle"
    },
    label: symCat
  };
});

More out-of-box web style symbols that can be used in 2D MapView could be found on the guide page Esri Web Style Symbols (2D)

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