Symbol Builder

Explore

The Symbol Builder application provides a UI for creating any symbol in the ArcGIS Maps SDK for JavaScript and a snippet you can copy into your code.

How it works

Choose one of the symbol classes from the gallery. Click on the link to open the builder for that class. The calcite icons at the bottom of each card indicate the geometry type(s), multiple symbol layers, and whether the symbol is suitable for 2D maps and 3D scenes.

Once you open the symbol builder for a class, the properties for that class and the corresponding inputs are displayed in the left shell panel. For symbols that support both 2D and 3D, use the switch at the top of the properties pane to switch between 2D and 3D. The symbol in the view and the code snippet will update as the property values are modified.

In the center is a graphic with the symbol applied in a MapView or SceneView. Watch the symbol update as you change property values in the left panel.

On the right, a code snippet can be copied and pasted into your code. Three different code snippets are available. The first snippet uses ESM imports and instantiates all classes without using autocasting. The second uses an AMD require statement and autocasting. The third option uses ESM imports and the fromJSON() method available on all symbol classes.

LineSymbol3D, MeshSymbol3D, PointSymbol3D, and PolygonSymbol3D support creating any number of symbol layers. To create a new symbol layer, click the ellipsis button and choose one of the available symbol layer types. To delete a symbol layer, click on the trash icon.

The API reference provides more detailed information on each symbol's specific properties and methods.