Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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.

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)