CIM Symbol Builder

Explore

Use the CIM Symbol Builder to explore different combinations of symbol layers and their properties to create your desired point, line, or polygon symbol.

How it works

Get started by selecting your symbol type: point, line, or polygon (you can always change this later). Click the Add Symbol Layer button to add a symbol layer to your CIMSymbol. You can then choose from a predefined selection of icons, shapes, lines, fills, and custom symbols or import your own symbol layer JSON. After selecting your first symbol layer, you can change its properties (size, anchor point, rotation, etc.) by clicking on the symbol layer type in the right panel. Use the expand arrow to the left of the symbol layer to discover more properties to customize.

You can add as many symbol layers as you like, and can reorder them by clicking on the symbol layer and dragging it to the desired location in the list.

When you are ready to see what the symbol looks like on the layer in the map, click Apply to feature layer. The symbol will be applied to the corresponding point, line, or polygon layer. If you are satisfied with how your symbol looks, click Get SymbolJSON to convert your symbol to JSON. You can use this JSON to bring the symbol you created into your application on the CIMSymbol.data.symbol property, like this:

Use dark colors for code blocksCopy
// Modules required:
// esri/symbols/CIMSymbol

const symbol = new CIMSymbol({
    data: {
        type: "CIMSymbolReference",
        symbol: {} // ENTER SYMBOL JSON HERE
    }
});

You can test the symbol JSON you created in this Codepen. Simply replace the value of pointSymbolJSON (line 37), lineSymbolJSON (line 38), or polygonSymbolJSON (line 39) with your symbol JSON. For a more detailed walk through of this app, check out the CIM Symbol Builder blog post.

The CIMSymbol API reference page provides some example symbols and more information about the properties of a symbol. The CIM specification provides more detailed information on specific properties for each symbol layer type.