Overview

You will learn: how to apply symbol colors and styles to layers 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

  1. Go to CodePen and create a new pen.

  2. Add the following code to create a basic starter app.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS DevLabs: Style a feature layer</title>
        <style>
          html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
        <script src="https://js.arcgis.com/4.8/"></script>
        <script>
          require([
              "esri/Map",
              "esri/views/MapView",
              "dojo/domReady!"
            ], function(Map, MapView) {
    
            var map = new Map({
              basemap: "topo-vector"
            });
    
            var view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-118.71921,34.07986],
              zoom: 10
            });
    
          });
        </script>
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

Style the Trailheads layer with an image

  1. In the JS code, add modules and code to apply a SimpleRenderer with a picture marker to the Trailheads layer.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, FeatureLayer) {
    
      ...
    
      //*** 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",
          "contentType": "image/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);
    
    });
    
  2. Run the code. The Trails should look like this.

Style the Trails layer by unique values

  1. In the JS code, add code to apply a UniqueValueRenderer and symbols to the Trails layer to classify it by biking and no biking trails.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer) {
    
      ...
    
      //*** 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);
    
    });
    
  2. Run the code. The trails should look like this.

Style the Parks and Open Spaces layer by numeric values

  1. In the JS code, add code to apply a ClassBreaksRenderer and symbols to the Parks and Open Spaces layer to classify it by acres. Here are the three class value ranges:

    • 0-1629
    • 1629-3754
    • 3754-11438
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer) {
    
      ...
    
      //*** 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. The Parks and Open Spaces should look like this.

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