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

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:

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.

Use dark colors for code blocksCopy
const 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.

Use dark colors for code blocksCopy
const 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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.