CIMSymbol lines and polygons

CIM line and polygon symbols

This sample shows how to render layers 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 uses 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 with a CIMGradientFill symbol layer. See the CIMSymbol API Reference 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 component 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.

Use dark colors for code blocksCopy
sizeSlider.addEventListener("calciteSliderChange", (event) => {
  const value = event.target.value;
  const newSymbol = trailheads.renderer.symbol.clone(); // clone the current symbol
  cimSymbolUtils.scaleCIMSymbolTo(newSymbol, value); // use CIM util function to scale the symbol to a new size
  // update the renderer to the new symbol
  trailheads.renderer = {
    type: "simple",
    symbol: newSymbol
  };
});