WebStyleSymbol - continuous size (2D)

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.

webstylesymbol

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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
// Update renderer with new web style symbol
function updateRenderer() {
  let renderer = layer.renderer.clone
  const cb = renderer.classBreakInfos[0];
  cb.symbol = new WebStyleSymbol({
    name: "school",
    styleName: "Esri2DPointSymbolsStyle"
  });
  layer.renderer = renderer;
  map.add(layer);
}

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).

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