Style feature layers
Apply symbol colors and styles to features based on attribute values.
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 lab 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
requirestatement, add a reference to the FeatureLayer module.require([ "esri/Map", "esri/views/MapView", //*** ADD ***// "esri/layers/FeatureLayer", "dojo/domReady!" //*** ADD ***// ], function(Map, MapView, FeatureLayer) { -
In the
function, create a SimpleRenderer object to show an image for all features in the layer. Set the type tosimpleand 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
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_BIKEand 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
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.
Next labs
Configure pop-ups
Style and format the content in pop-ups for feature layers.
Query a feature layer
Execute a SQL query and add features to the map as graphics.
Add a layer from an item
Load a layer from an ArcGIS Online item and add it to a map.
Display a styled vector basemap
Build an app that displays a vector basemap with custom styles.
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"
}],
}