CIMSymbol lines and polygons | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

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.

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,
  };
});

Intro to CIMSymbol

Arrows along a line

Adjust marker placement in polygon symbols

Symbol Builder

CIMSymbol

cimSymbolUtils

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>CIMSymbol lines and polygons | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #symbolControls {
        background-color: white;
        padding: 10px;
        min-width: 250px;
      }
    </style>
  </head>

  <body>
    <arcgis-map item-id="fedce1e9063c4354b7d4f3a887855e76">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-home slot="top-left"></arcgis-home>
      <arcgis-expand
        slot="top-right"
        expand-icon="pencil"
        expand-tooltip="Edit the CIMPointSymbol"
        expanded>
        <div id="symbolControls">
          <h3>Edit Symbols</h3>
          <calcite-label>Size</calcite-label>
          <calcite-slider
            id="sizeSlider"
            value="15.75"
            min="0"
            max="50"
            label-handles></calcite-slider>
          <calcite-label>Rotation</calcite-label>
          <calcite-slider
            id="rotationSlider"
            value="0"
            min="0"
            max="360"
            label-handles></calcite-slider>
        </div>
      </arcgis-expand>
    </arcgis-map>
    <script type="module">
      const [CIMSymbol, WebStyleSymbol, cimSymbolUtils] = await $arcgis.import([
        "@arcgis/core/symbols/CIMSymbol.js",
        "@arcgis/core/symbols/WebStyleSymbol.js",
        "@arcgis/core/symbols/support/cimSymbolUtils.js",
      ]);
      const viewElement = document.querySelector("arcgis-map");
      // wait for the view to be ready
      await viewElement.viewOnReady();
      const map = viewElement.map;
      //-------------------------------------------------------------
      // Get layers from the map and define symbology
      //-------------------------------------------------------------
      const trailheads = map.layers.find((layer) => {
        return layer.title === "Trailheads";
      });
      trailheads.renderer = {
        type: "simple",
        symbol: new WebStyleSymbol({
          name: "trail", // trailhead symbol
          styleName: "Esri2DPointSymbolsStyle",
        }),
      };
      const rimTrail = map.layers.find((layer) => {
        return layer.title === "Tahoe Rim Trail";
      });
      rimTrail.renderer = {
        type: "simple",
        symbol: new CIMSymbol({
          // CIM Line Symbol
          data: {
            type: "CIMSymbolReference",
            symbol: {
              type: "CIMLineSymbol",
              symbolLayers: [
                {
                  // white dashed layer at center of the line
                  type: "CIMSolidStroke",
                  enable: true, // must be set to true in order for the symbol layer to be visible
                  effects: [
                    {
                      type: "CIMGeometricEffectDashes",
                      dashTemplate: [2, 2], // width of dashes and spacing between the dashes
                      lineDashEnding: "NoConstraint",
                      controlPointEnding: "NoConstraint",
                    },
                  ],
                  capStyle: "Butt",
                  joinStyle: "Round",
                  width: 1,
                  color: [255, 255, 255, 255],
                },
                {
                  // lighter green line layer that surrounds the dashes
                  type: "CIMSolidStroke",
                  enable: true,
                  capStyle: "Butt",
                  joinStyle: "Round",
                  width: 3,
                  color: [56, 168, 0, 255],
                },
                {
                  // darker green outline around the line symbol
                  type: "CIMSolidStroke",
                  enable: true,
                  capStyle: "Butt",
                  joinStyle: "Round",
                  width: 6,
                  color: [0, 115, 76, 255],
                },
              ],
            },
          },
        }),
      };
      const lakeBoundary = map.layers.find((layer) => {
        return layer.title === "Lake Tahoe Boundary";
      });
      lakeBoundary.renderer = {
        type: "simple",
        symbol: new CIMSymbol({
          data: {
            type: "CIMSymbolReference",
            symbol: {
              type: "CIMPolygonSymbol",
              symbolLayers: [
                {
                  // solid stroke for the polygon outline
                  type: "CIMSolidStroke",
                  enable: true,
                  colorLocked: true,
                  capStyle: "Butt",
                  joinStyle: "Round",
                  miterLimit: 10,
                  width: 1,
                  color: [0, 76, 115, 255],
                },
                {
                  // gradient fill from blue -> white for polygon fill
                  type: "CIMGradientFill",
                  enable: true,
                  colorRamp: {
                    type: "CIMLinearContinuousColorRamp",
                    fromColor: [0, 76, 115, 255],
                    toColor: [255, 255, 255, 255],
                  },
                  gradientMethod: "Circular",
                  gradientSize: 75,
                  gradientSizeUnits: "Relative",
                  gradientType: "Continuous",
                },
              ],
              angleAlignment: "Map",
            },
          },
        }),
      };
      //-------------------------------------------------------------
      // Use CIMSymbolUtils to edit the size & rotation of the symbol
      //-------------------------------------------------------------
      // convert WebStyleSymbol -> CIMSymbol
      trailheads.renderer.symbol.fetchSymbol().then((cimSymbol) => {
        trailheads.renderer.symbol = cimSymbol;
      });
      const sizeSlider = document.getElementById("sizeSlider");
      sizeSlider.addEventListener("calciteSliderChange", (event) => {
        const value = event.target.value;
        const newSymbol = trailheads.renderer.symbol.clone(); // clone the current symbol
        // 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,
        };
      });
      const rotationSlider = document.getElementById("rotationSlider");
      rotationSlider.addEventListener("calciteSliderChange", (event) => {
        const value = event.target.value;
        const newSymbol = trailheads.renderer.symbol.clone(); // clone the current symbol
        // use CIM util function to change the rotation of the symbol
        cimSymbolUtils.applyCIMSymbolRotation(newSymbol, value);
        // update the renderer to the new symbol
        trailheads.renderer = {
          type: "simple",
          symbol: newSymbol,
        };
      });
    </script>
  </body>
</html>