CIMSymbol lines and polygons

CIM line and polygon symbols

This sample shows how to render FeatureLayers using line and polygon CIMSymbols. CIMSymbols allow the user to add more customizations to their symbols, using one or more symbol layers to create the desired effect on the layer.

This sample is using a CIMLineSymbol to depict the Tahoe Rim Trail, a hiking trail that loops around Lake Tahoe. The polygon showing the boundary of Lake Tahoe is rendered using a CIMPolygonSymbol. See the CIM Specification for more information.

CIMSymbol utility methods

This sample also demonstrates how to use the methods in the cimSymbolUtils class to get and set different properties on a CIMSymbol.

How it works

The symbol controls located within the Expand widget in the top-right corner allow the user to change the size and rotation of the CIMPointSymbols in the view. When the Slider value is updated, the current symbol gets cloned into a new symbol, and cimSymbolUtils.scaleCIMSymbolTo() is called on the new symbol to update the size (or rotation) of the symbol to match the value of the slider. Then, the renderer is updated with the new symbol.

1
2
3
4
5
6
7
8
9
10
11
12
13
sizeSlider.on(["thumb-drag", "thumb-change"], (event) => {
  const value = event.value;
  document.getElementById("size").innerHTML = value;
  // clone the current symbol
  const newSymbol = trailheads.renderer.symbol.clone();
  // use CIM util function to scale the symbol to a new size
  cimSymbolUtils.scaleCIMSymbolTo(newSymbol, value);
  // update the renderer to the new symbol
  trailheads.renderer = {
    type: "simple",
    symbol: newSymbol
  };
});