Style a feature layer | ArcGIS Maps SDK for JavaScript

Learn how to use renderers A renderer is a collection of rules and symbols used to display the data in a layer. Learn more to apply data-driven styling to feature layers A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

A feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more is a dataset within a hosted feature service A feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables. Learn more . Each feature layer consists of features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more that share a single geometry A geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference. Learn more type (point, line, or polygon), along with a set of attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more . Client-side, feature layers A feature layer (client-side) is a data layer that can access and display features from a feature service that has the same type of geometry and attribute fields. Learn more can be styled using a renderer. Renderers use attribute values to apply the appropriate symbols to each feature A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more when the layer is displayed. Additionally, renderers can work with visual variables Visual variables are a set of parameters that define one or more properties of a renderer's symbols based on the numeric data value returned from a field or expression. Learn more and expressions to create more complex, data-driven visualizations.

In this tutorial, you will use three different renderers to style three hosted feature layers A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

Prerequisites

Steps

Create a new pen

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

Get an access token

You need an access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
- Privileges
  - Location services > Basemaps
- Item access
  - Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials API key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential. Learn more access to the layer item. Learn more in Item access privileges.
In CodePen, set the apiKey property on the global esriConfig variable to your access token.
var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN", };

To learn about other ways to get an access token, go to Types of authentication.

Display a map

Follow the steps in the Display a map tutorial to add a map with the arcgis/topographic basemap layer, centered on Point Dume State Beach, Malibu, California.

Add script and modules

In a new <script> at the bottom of the <body>, use $arcgis.import() to add the FeatureLayer module.

The ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

36 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

  </script>
4 collapsed lines

</body>

</html>

Style trailheads (points)

Use the SimpleRenderer, PictureMarkerSymbol, and LabelClass classes to style the points A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more with an image, and then define label attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more to display for the Trailheads feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

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

39 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

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

5 collapsed lines
  </script>

</body>

</html>

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

50 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

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

    // Define a label for the trailheads
    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",
      },
    };
6 collapsed lines

  </script>

</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 A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more will autocast the renderer and labelingInfo to create class instances of the objects.

65 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

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

    // Define a label for the trailheads
    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],
    });

5 collapsed lines
  </script>

</body>

</html>

Use document.querySelector() to get a reference to the Map component, then wait for it to be ready with the viewOnReady method. Then, add trailheads layer to the map after the renderer and label definitions.

36 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.map.add(trailheads);

  </script>
4 collapsed lines

</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 A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more . 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.

83 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.map.add(trailheads);

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

5 collapsed lines
  </script>

</body>

</html>

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

92 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

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

5 collapsed lines
  </script>

</body>

</html>

Create a trails FeatureLayer. Set the url to access its URL endpoint.

104 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

5 collapsed lines
  </script>

</body>

</html>

Add trails layer to the map. Set the renderer and opacity properties before adding trails to the map. The feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more will autocast the renderer a create class instances of the object.

111 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.map.add(trails, 0);

5 collapsed lines
  </script>

</body>

</html>

View trails of differing widths based on elevation gain.

Show bike-only trails (lines)

You can use a renderer A renderer is a collection of rules and symbols used to display the data in a layer. Learn more and definition expression to style a subset of data from a feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more . To style bike-only trails from the Trails feature layer, use the definitionExpression, 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 A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more that is styled with dots in pink.

113 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.map.add(trails, 0);

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

5 collapsed lines
  </script>

</body>

</html>

Create a bikeTrails FeatureLayer and set the url and renderer properties. Set the definitionExpression (a SQL where clause) to access bike trails from the Trails feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more before adding bikeTrails to the map.

124 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.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'",
    });

5 collapsed lines
  </script>

</body>

</html>

Add bikeTrails layer to the map. The feature layer will autocast the renderer a create class instances of the object.

130 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.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'",
    });

    viewElement.map.add(bikeTrails, 1);

5 collapsed lines
  </script>

</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 A polygon is a type of geometry containing an array of rings and a spatial reference. Each ring contains an array of point coordinates, where the first and last point are the same. Learn more features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more with different fill colors, based on the TYPE attribute Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more in the Parks and Open Spaces feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

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

132 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.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'",
    });

    viewElement.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,
      };
    }

5 collapsed lines
  </script>

</body>

</html>

Create an openSpacesRenderer and define it as unique-value. Set the field property to TYPE. In the uniqueValueInfos array, set unique colors for each park type.

148 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.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'",
    });

    viewElement.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"),
      ],
    };

5 collapsed lines
  </script>

</body>

</html>

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

159 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.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'",
    });

    viewElement.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,
    });

5 collapsed lines
  </script>

</body>

</html>

Add openspaces layer to the map. The feature layer will autocast the renderer to create class instances of the object.

166 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Style a feature layer</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    // Define a label for the trailheads
    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],
    });

    viewElement.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: 0.75,
    });

    viewElement.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'",
    });

    viewElement.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,
    });

    viewElement.map.add(openspaces, 0);
6 collapsed lines

  </script>

</body>

</html>

Run the app

In CodePen, run your code to display the map.

The completed map should display all of the layers with a unique, data-driven style.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials: