Thematic visualization with realistic 3D symbols

Explore in the sandbox

View live

This sample demonstrates how to visualize 2D point features based on real-world measurements in a 3D SceneView. The layer in this app contains point data representing tree locations. This data has multiple fields for measurements of each tree, and we'll use them to create symbols that represent the real-world sizes and shapes of each tree in relation to other map features, regardless of scale. In this case, we'll use a SimpleRenderer with three size visual variables and one color visual variable to model the size and shape of each tree based as it exists in the real world.

Prior to completing the following steps, you should be familiar with views, Map, and FeatureLayer. If necessary, complete the following tutorials first:

1. Create a SimpleRenderer for trees

Create a SimpleRenderer and set a default symbol on the symbol property of the renderer. In this case, we'll create a WebStyleSymbol depicting a realistic tree. ArcGIS Online provides many realistic 3D symbols out of the box. In this case we select a generic tree from the EsriRealisticTreesStyle style group. We also assign the visual variables that will be explained in the next step.

Use dark colors for code blocksCopy
      const renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: {
          type: "web-style", // autocasts as new WebStyleSymbol()
          styleName: "EsriRealisticTreesStyle",
          name: "Other",
        },
        label: "tree",
        visualVariables: visualVariables, // set the visualVariables defined separately
      };

To read more in depth about WebStyleSymbols and their relationship to PointSymbol3D, see the Visualize features with realistic WebStyleSymbols sample.

2. Set visual variables on the renderer

When defining the size of any WebStyleSymbol or ObjectSymbol3DLayer, there are three axes that need to be considered: height (z-axis), width (diameter in east-west axis), and depth (diameter in north-south axis). Each of them can be based on a separate field value that is set with a separate size visual variable. If the values of each axis are equal, then only one size visual variable is required with axis set to "all".

The tree data has three fields storing its respective dimensions: Height (height in feet), Width_EW (diameter in feet from east to west), and Width_NS (diameter in feet from north to south). Since these values differ for each tree, the symbols will better show the varying shapes of the trees.

Adding a color visual variable to the tree representation can make it even more insightful. Since the data contains carbon storage information for each tree, we'll assign each tree a color ranging from pale yellow to a deeper green based on the amount of carbon storage measured and recorded in the data. This same concept is discussed in the Scale feature sizes based on real world sizes (2D) sample.

Use dark colors for code blocksCopy
      const visualVariables = [
        {
          type: "size",
          axis: "height", // specify which axis to apply the data values to
          field: "Height", // tree height in feet
          valueUnit: "feet",
        },
        {
          type: "size",
          axis: "width", // specify which axis to apply the data values to
          field: "Width_EW", // tree diameter in feet from east to west
          valueUnit: "feet",
        },
        {
          type: "size",
          axis: "depth", // specify which axis to apply the data values to
          field: "Width_NS", // tree diameter in feet from north to south
          valueUnit: "feet",
        },
        {
          type: "color",
          field: "C_Storage", // Carbon storage
          stops: [
            {
              value: 0,
              color: "#f7fcb9",
            }, // features with zero carbon
            {
              value: 10000,
              color: "#31a354",
            }, // features with 10000 carbon
          ],
          legendOptions: {
            title: "Carbon Storage",
          },
        },
      ];

3. Apply the renderer to the layer

Once the renderer is defined, you can set it on the layer and the view will automatically update. Click the sandbox button above to see the full code of this app.

Use dark colors for code blocksCopy
      // Construct the layer and set the renderer and popupTemplate on it
      const treesLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
        renderer: renderer, // set the renderer defined earlier
        outFields: ["*"],
        popupTemplate: {
          // autocasts as new PopupTemplate()
          title: "{Cmn_Name}",
          content:
            "<i>{Sci_Name}</i><br>" +
            "This tree is in {Condition} condition and is {Height} feet in height.",
        },
      });