Style feature layers

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

1. Go to the JavaScript Starter App.

2. In CodePen, click Fork and save the pen as ArcGIS DevLabs: Style feature layers.

Style the Trailheads layer with an image

1. 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) {
   

2. 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);
   

3. Run the code to view the trailheads.

Style the Trails layer by unique values

5. 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);
   

6. Run the code to view trails.

Style the Parks and Open Spaces layer by numeric values

1. 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:

   • 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);
   

2. 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

// 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"
  }],
}