You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {}
  • Firefox
  • Safari
  • undefined

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

This sample demonstrates how to style a feature layer with proportionally-sized WebStyleSymbols. The "school" symbol with visual variables (defined on the service) is used to represent the percentage of college-educated people in each county. The larger the symbol, the higher the percentage of college-educated people. The sample replaces a 2D WebStyleSymbol with a CIMSymbol, which is a multi-layer vector symbol that preserves quality as symbol size grows.


The sample loads a FeatureLayer from a portal item and then updates the symbol on the renderer to a WebStyleSymbol. The symbol is created by specifying the style name and symbol name.

// Update renderer with new web style symbol
function updateRenderer() {
  let renderer = layer.renderer.clone
  var cb = renderer.classBreakInfos[0];
  cb.symbol = new WebStyleSymbol({
    name: "school",
    styleName: "Esri2DPointSymbolsStyle"
  layer.renderer = renderer;

More out-of-the-box web style symbols for use in 2D MapViews can be found on the guide page Esri Web Style Symbols (2D).

Sample search results