Style a feature layer

Learn how to use renderers to apply data-driven styling to feature layers.

A feature layer is a dataset in a hosted feature service. Each feature layer contains features with a single geometry type (point, line, or polygon), and a set of attributes. Feature layers can be styled on the client-side with a renderer. Renderers are responsible for using attribute values to apply the appropriate symbol to each feature when the layer is drawn. Renderers can be used with visual variables and expressions to create more complex, data-driven visualizations.

In this tutorial, you use three different renderers to style three hosted feature layers.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Set an API key

To access ArcGIS services, you need an API key.

Go to your dashboard to get an API key.

In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

Change line
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
  basemap: "arcgis-topographic" // Basemap layer service
});

Add modules

In the require statement, add the FeatureLayer module.

The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

Add line.Change line
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Style trailheads (points)

Use the SimpleRenderer, PictureMarkerSymbol, and LabelClass classes to style the points with an image, and then define label attributes to display for the Trailheads feature layer.

Create a trailheadsRenderer and define it as a simple renderer. Set the symbol property to draw a hiker image accessed from its url.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Create a trailheadsLabels and set the symbol property to draw a label with the TRL_NAME.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Create a trailheads FeatureLayer. Set the url property to access its URL endpoint. Set the renderer and labelingInfo before adding trailheads to the map. The feature layer will autocast the renderer and labelingInfo to create class instances of the objects.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

View hiker symbols with trailhead names.

Style trails (lines)

Use the SimpleRenderer and VisualVariable classes to style trails in the Trails feature layer. Visual variables define the attribute to use to style trails with a greater elevation gain wider compared to trails with smaller elevation changes. This is one form of data-driven visualization.

Create a trailsRenderer and define it as a simple renderer.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

In the visualVariables array, set the field to ELEV_GAIN to determine line width.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Create a trails FeatureLayer. Set the url to access its URL endpoint. Set the renderer and opacity properties before adding trails to the map. The feature layer will autocast the renderer a create class instances of the object.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

View trails of differing widths based on elevation gain.

Show bike-only trails (lines)

You can use a renderer and definition expression to style a subset of data from a feature layer. To style bike-only trails from the Trails feature layer, use the definiteExpression, SimpleRenderer and SimpleLineSymbol classes. The layer is added on top of the existing trails layer.

Create a bikeTrailsRenderer and define it as a simple renderer. Set the symbol to draw a line that is styled with dots in pink.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Create a bikeTrails FeatureLayer and set the url and renderer properties. Set the definiteExpression (a SQL where clause) to access bike trails from the Trails feature layer before adding bikeTrails to the map. The feature layer will autocast the renderer a create class instances of the object

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

View the location of bike trails in relation to other trails.

Style open spaces (polygons)

You can use renderers to style feature layer data by unique attribute values. Use the UniqueValueRenderer and SimpleFillSymbol classes to style polygon features with different fill colors, based on the TYPE attribute in the Parks and Open Spaces feature layer.

Create a createFillSymbol function with value and color as parameters. The function will return a solid, simple-fill symbol for each park type.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: 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.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/layers/FeatureLayer"

    ], function(esriConfig,Map, MapView, FeatureLayer ) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,