Apply symbol colors and styles to features based on attribute values.
You will learn: how to apply symbol colors and styles to features based on attribute values.
With the ArcGIS API for JavaScript you can apply custom symbol colors and styles to improve the visualization of feature layers by defining a Renderer. The first step is to define the renderer symbols, colors, and field values, and then apply it to the layer. The renderer is responsible for applying the symbols to appropriate features when the layer draws. There are many different types of symbols and renderers to choose from, and more advanced visualizations can be accomplished with visual variables and expressions. Please visit the documentation to learn more.
In this tutorial you will apply different renderers to the trailheads, trails and open spaces feature layers.
Go to the JavaScript Starter App.
In CodePen, click Fork and save the pen as ArcGIS Tutorials: Style feature layers.
In the require statement, add a reference to the FeatureLayer module.
require([
"esri/Map",
"esri/views/MapView",
//*** ADD ***//
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
At the end of the code in the main function, create a SimpleRenderer object to show an image for all features in the layer. Set the type to simple and set the symbol properties that are defined below to draw an image for each point. After the render is defined, create a FeatureLayer, set the renderer, and add it to the map.
//*** ADD ***//
// Define a simple renderer and symbol
var trailheadsRenderer = {
"type": "simple",
"symbol": {
"type": "picture-marker",
"url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
"width": 10.5,
"height": 10.5
}
}
// Create the layer and set the renderer
var trailheads = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
renderer: trailheadsRenderer
});
// Add the layer
map.add(trailheads);
Run the code to view the trailheads.
In the main function, create a UniqueValueRenderer object to show the trails that allow bike use and those that don't. Set the type to unique-value, field to USE_BIKE and the uniqueValueInfos to the symbol values below. After the render is defined, create a FeatureLayer, set the renderer, and add it to the map.
//*** ADD ***//
// Define a unique value renderer and symbols
var trailsRenderer = {
"type": "unique-value",
"field": "USE_BIKE",
"uniqueValueInfos": [
{
"value": "Yes",
"symbol": {
"color": [26, 26, 26, 255],
"width": 0.9,
"type": "simple-line",
"style": "dot"
},
"label": "Bikes"
},
{
"value": "No",
"symbol": {
"color": [230, 0, 0, 255],
"width": 0.9,
"type": "simple-line",
"style": "dot"
},
"label": "No Bikes"
}
]
}
// Create the layer and set the renderer
var trails = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
renderer: trailsRenderer
});
// Add the layer
map.add(trails,0);
Run the code to view trails.
In the main function, create a ClassBreaksRenderer to classify the park features by size (acres). Set the type to class-breaks, the field to GIS_ACRES, and the classBreaksInfos values to three ranges with three colors:
0, maxValue: 1629, color: [193,157,188,255]1629, maxValue: 3754, color: [203,216,162,255]3754, maxValue: 11438, color: [144,198,120,255]After the render is defined, create a FeatureLayer, set the renderer, and add it to the map. Set the featurelayer opacity to 0.5.
//*** ADD ***//
// Define a class breaks renderer and symbols
var openSpacesRenderer = {
"type": "class-breaks",
"field": "GIS_ACRES",
"classBreakInfos": [
{
"symbol": {
"color": [
193,157,188,255
],
"outline": {
"width": 0
},
"type": "simple-fill",
"style": "solid"
},
"label": "0 to 1,629",
"minValue": 0,
"maxValue": 1629
},
{
"symbol": {
"color": [
203,216,162,255
],
"outline": {
"width": 0
},
"type": "simple-fill",
"style": "solid"
},
"label": "> 1,629 to 3,754",
"minValue": 1629,
"maxValue": 3754
},
{
"symbol": {
"color": [
144,198,120,255
],
"outline": {
"width": 0
},
"type": "simple-fill",
"style": "solid"
},
"label": "> 3,754 to 11,438",
"minValue": 3754,
"maxValue": 11438
}
]
}
// Create the layer and set the renderer
var openspaces = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
renderer: openSpacesRenderer,
opacity: 0.5
});
// Add the layer
map.add(openspaces,0);
Run the code to view the Parks and Open Spaces.
Your app should look something like this.
Visual variables add another dimension to styling layers. They let you further control the symbol size, color and opacity based on numeric values in your data. Try using visual variables to change the size of the trailheads based on their elevation values ELEV_FT.
Learn more about visual variables here.
// Define a simple renderer and symbol
var trailheadsRenderer = {
"type": "simple",
"symbol": {
"type": "picture-marker",
"url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
"contentType": "image/png",
"width": 10.5,
"height": 10.5
},
visualVariables: [{
type: "size",
field: "ELEV_FT",
valueUnit: "feet",
valueRepresentation: "diameter"
}],
}