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

Loading sample here...

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.

var renderer = new SimpleRenderer({
  symbol: new SimpleMarkerSymbol()
});

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 = new SimpleRenderer({
  symbol: 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.

Explore in the sandbox JS Bin View live

4. Additional visualization samples and resources

Sample search results

Title	Sample

There were no match results from your search criteria.