Overview
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.
Steps
Create a starter app
Go to the JavaScript Starter App.
In CodePen, click Fork and save the pen as
ArcGIS DevLabs: Style feature layers
.
Style the Trailheads layer with an image
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) {
In the main
function
, create a SimpleRenderer object to show an image for all features in the layer. Set the type tosimple
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.
Style the Trails layer by unique values
In the main
function
, create a UniqueValueRenderer object to show the trails that allow bike use and those that don't. Set the type tounique-value
, field toUSE_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.
Style the Parks and Open Spaces layer by numeric values
In the main
function
, create a ClassBreaksRenderer to classify the park features by size (acres). Set the type toclass-breaks
, the field toGIS_ACRES
, and the classBreaksInfos values to three ranges with three colors:- minValue:
0
, maxValue:1629
, color:[193,157,188,255]
- minValue:
1629
, maxValue:3754
, color:[203,216,162,255]
- minValue:
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.
//*** 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 }); // Add the layer map.add(openspaces,0);
- minValue:
Run the code to view the Parks and Open Spaces.
Congratulations, you're done!
Your app should look something like this.
Challenge
Explore visual variables
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"
}],
}