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.

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.

CIM line and polygon symbols are not currently supported in 3D SceneViews. Additionally, not everything listed in the CIM specification is currently supported.

Click here for more information on CIMSymbol limitations.

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.

sizeSlider.on(["thumb-drag", "thumb-change"], function(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

Sample search results