Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to create a DictionaryRenderer. Dictionary Renderer is a data-driven approach for symbolizing features using a dictionary of symbols configured with multiple attributes. This approach is used when symbol specifications lead to many symbol permutations that would be inappropriate for UniqueValueRenderer. All the symbols rendered by dictionary renderer are CIMSymbols.

In this sample, we visualize alternative fuel stations in the U.S. Each station's symbol should contain information about the provided fuel type, network type, connector type, and station name. We render the same data with two feature layer instances, each rendered with a dictionary renderer. To keep the view from being cluttered with lots of overlapping text, we'll create one layer with a simple DictionaryRenderer intended for rendering lots of features at small scales. The renderer is configured so the view only renders a few unique symbols with feature sizes varied by scale.

At larger scales, we can display more information such as multiple symbol layers and unique text. When the user zooms in closer than a scale of 1:10,000, the first layer turns off and the second layer toggles on with a different configuration showing more information and therefore more unique symbol permutations.

The following snippet demonstrates how with just a few lines of code, you can create a DictionaryRenderer that generates many symbol permutations.

new DictionaryRenderer({
  url: "https://jsapi.maps.arcgis.com/sharing/rest/content/items/30cfbf36efd64ccf92136201d9e852af",
  fieldMap: {
    fuel_type: "Fuel_Type_Code",
    connector_types: "EV_Connector_Types",
    network: "EV_Network",
    name: "Station_Name"
  },
  config: {
    show_label: "true"
  }
})

You will only need to define three properties on the dictionary renderer.

1. url - The url points to the dictionary symbol web style. Please refer to Share a web style for instructions of publishing a dictionay symbol webstyle from ArcGIS Pro.

2. fieldMap - The fieldMap property defines a field mapping that maps input fields in the feature to the dictionary symbol style's expected fields for symbols and text.

3. config - The config property specifies display options that can be configured on the dictionary symbol style. In this sample, we could choose to turn on the labels by setting config.show_label = "true".