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 the Map component and FeatureLayer. The basic components of this app, such as creating instances of the Map component, and understanding HTML and CSS structure will not be reviewed in this sample.
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.
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: { type: "simple-marker" },
};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 value and value 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.
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.
Once the renderer is defined, you can set it on the layer and the view and legend will automatically update.
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.
