WebStyleSymbol can be used to style graphics in FeatureLayer and GraphicsLayer. This sample demonstrates how to style feature layer with 2D Web Style Symbols using UniqueValueRenderer in a map.
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 Maps can be found on the guide page Esri Web Style Symbols (2D).