Build an app to apply symbol colors and styles to features based on attribute values.
You will learn: how to build an app to apply symbol colors and styles to features based on attribute values.
Applications can display feature layer data with different styles to enhance the visualization. The first step is to select the correct type of Renderer. A SimpleRenderer applies the same symbol to all features, a UniqueValueRenderer applies a different symbol to each unique attribute value, and a ClassBreaksRenderer applies a symbol to a range of numeric values. Renderers are responsible for accessing the data and applying the appropriate symbol to each feature when the layer draws. Labels can also be displayed to show attribute information for each feature, and visual variables and expressions can also be used to create more complex data-driven visualizations. Visit the documentation to learn more about styling layers.
In this tutorial, you will apply different renderers to enhance the visualization of the Trailheads, Trails and Parks and Open Spaces feature layers.
Zoom in on the map below to see the different layer styles.
Open the JavaScript Starter App on CodePen.
In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Style feature layers.
In the require statement, add a reference to the FeatureLayer module.
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
At the end of the code in the main function, create a trailheadsRenderer object and define it as a simple renderer and set the symbol properties to draw an hiker image that is a picture-marker, 18px in size for each point. Use the url below for the image.
var trailheadsRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
width: "18px",
height: "18px"
}
}
To show trail name labels, create a trailheadsLabels object to define the labelingInfo. Set the symbol to draw the labels white #FFFFFF with a green #5E8D74 halo, place them centered above the feature, and use a simple expression to reference the TRL_NAME field (the data to render).
var trailheadsLabels = {
symbol: {
type: "text",
color: "#FFFFFF",
haloColor: "#5E8D74",
haloSize: "2px",
font: {
size: "12px",
family: "Noto Sans",
style: "italic",
weight: "normal"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.TRL_NAME"
}
};
Create a trailheads FeatureLayer and set the url, renderer, and labelingInfo property to the objects created above and add it to the map.
var trailheads = new FeatureLayer({
url:
"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
renderer: trailheadsRenderer,
labelingInfo: [trailheadsLabels]
});
map.add(trailheads);
Run your code to view the hiker images and labels.
To style features with a different symbol based on attribute values, you can use VisualVariables.
At the end of the code in the main function, create a SimpleRenderer object with VisualVariables defined to make trails with greater elevation change wider than trails with smaller elevation changes. Set the renderer type to simple, and the symbol properties to #BA55D3 (purple), simple-line and solid. Next, add a new object to the visualVariables property. This will define a size visual variable. Set the type in the visual variable to size to indicate symbol size will vary based on a data value. Then set the field to ELEV_GAIN (the field to use to determine line width), and the min and max data values to 0 and 2300 respectively. To control the width of the lines, set the minSize and maxSize values to 3px and 7px.
var trailsRenderer = {
type: "simple",
symbol: {
color: "#BA55D3",
type: "simple-line",
style: "solid"
},
visualVariables: [
{
type: "size",
field: "ELEV_GAIN",
minDataValue: 0,
maxDataValue: 2300,
minSize: "3px",
maxSize: "7px"
}
]
};
Create a trails FeatureLayer and set the url, renderer, and opacity (0.75) properties, and add it to the map.
var trails = new FeatureLayer({
url:
"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
renderer: trailsRenderer,
opacity: .75
});
map.add(trails, 0);
Run the code to view trails. The renderer will interpolate all of the data values and apply the appropriate width to each trail.
If you would like to style and draw just a subset of the data in a layer, you can apply a different symbol, set a the definitionExpression (SQL where clause), and then add the layer on top of the existing layer.
At the bottom of the code in the main function, create a simple renderer object with a symbol that is a simple-line, short-dot, pink #FF91FF, 1px wide line.
var bikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "short-dot",
color: "#FF91FF",
width: "1px"
}
};
Create a bikeTrails FeatureLayer and set the url, renderer and the definitionExpression to USE_BIKE = 'YES', and add it to the map.
var bikeTrails = new FeatureLayer({
url:
"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
renderer: bikeTrailsRenderer,
definitionExpression: "USE_BIKE = 'YES'"
});
map.add(bikeTrails, 1);
Run your code to view the bike trails.
In the main function, create a UniqueValueRenderer object to use a different symbol for each type of park area. Define a function that will create a solid, simple-fill type symbol for each park type. Next, define a renderer and set the type to unique-value, field to TYPE and the uniqueValueInfos to the symbol values below.
function createFillSymbol(value, color) {
return {
value: value,
symbol: {
color: color,
type: "simple-fill",
style: "solid",
outline: {
style: "none"
}
},
label: value
};
}
var openSpacesRenderer = {
type: "unique-value",
field: "TYPE",
uniqueValueInfos: [
createFillSymbol("Natural Areas", "#9E559C"),
createFillSymbol("Regional Open Space", "#A7C636"),
createFillSymbol("Local Park", "#149ECE"),
createFillSymbol("Regional Recreation Park", "#ED5151")
]
};
Create an openspaces FeatureLayer, set the renderer and opacity (0.2) properties, and add it to the map.
var openspaces = new FeatureLayer({
url:
"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
renderer: openSpacesRenderer,
opacity: 0.20
});
map.add(openspaces, 0);
Run the code to view the Parks and Open Spaces. This will draw the different types of parks and open spaces with four unique symbols.
Your app should look something like this.
Visit the renderers and visual variables documentation to learn more about the different types of styles and visualizations you can create for your data.