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.
Open the JavaScript Starter App on CodePen.
In CodePen, click Fork and save the pen as ArcGIS API for 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.