Scale feature sizes based on real world sizes (2D)

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

This sample demonstrates how to visualize 2D point features based on real-world sizes or measurements. The layer in this app contains point data representing tree locations. This data has a field containing the size of the tree canopy in feet. We'll use the data in this field to create symbols that represent the real-world size of the tree canopies in relation to other map features, regardless of scale.

In this case, we'll use a SimpleRenderer with visual variables to alter the diameter of each feature based on its actual diameter 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:

• Intro to MapView
• Intro to SceneView
• Intro to Layers
• Review the basic FeatureLayer sample

The basic components of this app, such as creating instances of the Map and MapView 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 and assign it a default symbol

In this app we need to set a default symbol on the symbol property of the renderer. We don't need to set values such as color or size on the symbol because those will be overridden anyway with visual variables.

var renderer = {
  type: "simple",  // autocasts as new SimpleRenderer()
  symbol: { type: "simple-marker" }
};

2. Set size and color visual variables on the renderer

To scale the size of each feature based on its real-world size in relation to other features, we must set a size visual variable on the visualVariables property of the renderer. In this scenario it is important to set the valueUnit and valueRepresentation properties of the visual variable. These properties indicate to the renderer that the screen size of the features must be scaled according to the real-world sizes stored in the indicated field.

var renderer = {
  type: "simple",  // autocasts as new SimpleRenderer()
  symbol: { type: "simple-marker"},  // autocasts as new SimpleMarkerSymbol()
  visualVariables: [{
    type: "size",
    field: "Width_EW",  // tree canopy diameter
    valueUnit: "feet", // values of Width_EW are expressed in feet
    valueRepresentation: "diameter"  // indicates the value in `field` is a diameter
  }, {
    type: "color",
    field: "C_Storage", // Carbon storage
    stops: [
      { value: 0, color: "#f7fcb9" },  // features with zero carbon
      { value: 8000, color: "#31a354" }  // features with 8000 carbon
    ]
    // Values between 0-8000 will be assigned a color proportionally along the ramp
  }]
};

The color visual variable is optional in this scenario. In the snippet above we set a color ramp of pale yellow to dark green to indicate the amount of recorded carbon storage in each tree. We use stops here to map the data distribution to which these colors will be applied.

3. Summary

Once the renderer is defined, you can set it on the layer and the view and legend 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.

4. Additional visualization samples and resources

• Visualize features with realistic 3D symbols
• Extrude building footprints based on real world heights
• Data-driven continuous color
• Data-driven continuous size
• Data-driven extrusion
• Thematic multivariate visualization (2D)
• Thematic multivariate visualization (3D)