Thematic visualization with realistic 3D symbols

Loading sample here...

This sample demonstrates how to visualize 2D point features based on real-world sizes or 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, including canopy diameters along semi-major and semi-minor axes, canopy height, trunk width, and trunk height. We'll use the data in these fields 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:

The basic components of this app, such as creating instances of the Map and SceneView classes and understanding HTML and CSS structure will not be reviewed. See the tutorials listed above if you need to familiarize yourself with those components in this application. As a general rule the introductory principles discussed in the tutorials above apply to most samples in the documentation.

1. Create a SimpleRenderer for trees and assign it a default symbol

Create a SimpleRenderer and set a default symbol on the symbol property of the renderer. In this case, we'll create a WebStyleSymbol depiciting 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.

var trunkRenderer = new SimpleRenderer({
  symbol: new WebStyleSymbol({
    styleName: "esriRealisticTreesStyle",
    name: "Other"
  })
});

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

2. Set three size visual variables on the renderer

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

The tree data happens to have three fields storing three dimensions of each crown: Crown_Height (height in feet), Width_EW (diameter in feet from east to west), and Width_NS (diameter in feet from north to south). Since each of these values can be different, we'll see some tree crowns that more closely resemble their actual shape rather than perfect spheres.

var crownRenderer = new SimpleRenderer({
  symbol: sym,  // set from the code snippet in step 3
  visualVariables: [
  {
    type: "size",
    axis: "height",  // specify which axis to apply the data values to
    field: "Crown_Height",
    valueUnit: "feet"
  }, {
    type: "size",
    axis: "width",  // specify which axis to apply the data values to
    field: "Width_EW",
    valueUnit: "feet"
  }, {
    type: "size",
    axis: "depth",  // specify which axis to apply the data values to
    field: "Width_NS",
    valueUnit: "feet"
  }]
});

3. Add a color visual variable to the renderer

Adding a color visual variable can add a nice thematic touch to the tree visualization. Since the service contains carbon storage data for each tree, we'll assign each tree crown a color ranging from pale yellow to a deeper green based on the amount of carbon storage measured at a particular point. This same concept is discussed in the Scale feature sizes based on real world sizes (2D) sample.

crownRenderer.visualVariables.push({
  type: "color",
  field: "C_Storage", // Carbon storage
  stops: [
    { value: 0, color: "#f7fcb9" },  // features with zero carbon
    { value: 10000, color: "#31a354" }  // features with 8000 carbon
  ]
});

4. Apply the renderer to the layer

Once the renderer is defined, set it on the layer.

var treesLayer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
  renderer: renderer,  // set renderer on layer
  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."
  }
});

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

While the main purpose of this sample is to demonstrate how to scale the size of features based on their real-world sizes, it also demonstrates how to incorporate multivariate elements of thematic mapping through other visual means, such as color or various dimenisions of size.

Explore in the sandbox JS Bin View live

5. Additional visualization tutorials and samples

Sample search results

Title	Sample

There were no match results from your search criteria.