Style a feature layer

Learn how to use data-driven styling to apply symbol colors and styles to feature layers.

Style a feature layer using API key authentication

A feature layer is a dataset in a feature service hosted in ArcGIS. Each feature layer contains features with a single geometry type (point, line, or polygon), and a set of attributes.

In this tutorial, you apply different styles to enhance the visualization of the Trailheads, Trails, and Parks and Open Spaces feature layers.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Choose API key authentication if you:

Want the easiest way to get started.
Want to build public applications that access ArcGIS Location Services and secure items.
Have an ArcGIS Location Platform or ArcGIS Online account.

Choose user authentication if you:

Want to build private applications.
Require application users to sign in with their own ArcGIS account and access resources their behalf.
Have an ArcGIS Online account.

To learn more about both types of authentication, go to Authentication.

You can choose one of the following to create a new CodePen:

Option 1: Complete the Display a map tutorial; or,
Option 2: Start from the Display a map tutorial .

Set up authentication

Create a new API key credential with the correct privileges to get an access token.

Go to the Create an API key tutorial and create an API key with the following privilege(s):
- 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 access to the layer item. Learn more in Item access privileges.

Set developer credentials

Use the API key or OAuth developer credentials so your application can access ArcGIS services.

Update the accessToken variable to use your API key.

Use dark colors for code blocks
 <script>   /* Use for API key authentication */  const accessToken = "YOUR_ACCESS_TOKEN";   const map = L.map("map", {  minZoom: 2  });   </script> 

In both the index.html and callback.html files, replace YOUR_CLIENT_ID and YOUR_REDIRECT_URL with the client ID and redirect URL of your OAuth credentials.

index.html
Use dark colors for code blocks
 /* Use for user authentication */  const clientId = "YOUR_CLIENT_ID"; // Your client ID from OAuth credentials  const redirectUri = ""YOUR_REDIRECT_URI""; // The redirect URL registered in your OAuth credentials  const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({  clientId,  redirectUri,  portal: "https://www.arcgis.com/sharing/rest" // Your portal URL  });   const accessToken = session.token; 

callback.html
Use dark colors for code blocks
 arcgisRest.ArcGISIdentityManager.completeOAuth2({  clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials  redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials  portal: "https://www.arcgis.com/sharing/rest" // Your portal URL  }); 

Run the app and ensure you can sign in successfully.

If you are unable to sign in, make sure you have the correct redirect URL and port. This URL varies based on your application and typically takes the format of https://<server>[:port]/callback.html or http://my-arcgis-app:/auth. For example, if you are running an application on http://127.0.0.1:5500/, set http://127.0.0.1:5500/callback.html as your redirect URL in the index.html and callback.html file and your developer credential. They all have to match!

Update the basemap

A topographic basemap layer is typically used when displaying hiking trails.

Update the basemap layer to use arcgis/outdoor.

Expand
Use dark colors for code blocks
 /* Use for API key authentication */  const accessToken = "YOUR_ACCESS_TOKEN";   // or   /* Use for user authentication */  // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({  // clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials  // redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials  // portal: "YOUR_PORTAL_URL" // Your portal URL  // })   // const accessToken = session.token;  const map = L.map("map", {  minZoom: 2  }).setView([34.02, -118.805], 13);   const basemapEnum = "arcgis/outdoor";   L.esri.Vector.vectorBasemapLayer(basemapEnum, {  token: accessToken  }).addTo(map); 
Expand

Load a hiker icon

To use an image as an icon for point features, you use the Icon class. To style the trailheads from the Trailheads feature layer, reference the hiker icon URL.

Create a new Icon that references the hiker icon URL and specify the iconSize.

Expand
Use dark colors for code blocks
 L.esri.Vector.vectorBasemapLayer(basemapEnum, {  token: accessToken  }).addTo(map);   const hikerIcon = L.icon({  iconUrl: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",  iconSize: [18, 18]  });  
Expand

Style trailheads (points)

Use the FeatureLayer and Marker classes to style and display trailheads.

Add a FeatureLayer. Set the url property to the Trailheads URL.

Expand
Use dark colors for code blocks
 const hikerIcon = L.icon({  iconUrl: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",  iconSize: [18, 18]  });   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",   })  .addTo(map); 
Expand

Create a custom Marker at each trailhead location with pointToLayer. Set the marker's icon property to the hiker icon.

Expand
Use dark colors for code blocks
 const hikerIcon = L.icon({  iconUrl: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",  iconSize: [18, 18]  });   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",   pointToLayer: (geojson, latlng) => {  return L.marker(latlng, {  icon: hikerIcon  });  }   })  .addTo(map); 
Expand

Run the application to view hiker icons at the location of each trailhead.

Style trails (lines) by elevation gain

To visualize the elevation gain of a trail in the Trails (lines) feature layer, add a style definition that defines Path options.

Create a new Pane in the map by calling the createPane method.

Expand
Use dark colors for code blocks
 L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",   pointToLayer: (geojson, latlng) => {  return L.marker(latlng, {  icon: hikerIcon  });  }   })  .addTo(map);   map.createPane("trails");  
Expand

Add a FeatureLayer to the trails pane. Set the url property to the Trails URL.

Expand
Use dark colors for code blocks
 map.createPane("trails");   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "trails",   })  .addTo(map); 
Expand

Define a style function to render the line features in magenta.

Expand
Use dark colors for code blocks
 map.createPane("trails");   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "trails",   style: (feature) => {   return {  color: "#BA55D3",   };  }   })  .addTo(map); 
Expand

Set the width of each trail feature dynamically based on its ELEV_GAIN property. The weight of the feature is determined by the width of the trail.

Expand
Use dark colors for code blocks
 map.createPane("trails");   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "trails",   style: (feature) => {   const width = 3 + (4 * feature.properties.ELEV_GAIN) / 2300;   return {  color: "#BA55D3",   weight: width   };  }   })  .addTo(map); 
Expand

Run the app to view trails of differing widths based on elevation gain.

Display bike-friendly trails

You can style and display certain features, such as bike-friendly trails, by constructing a SQL query and a style definition in a new pane.

Create a new Pane in your map by calling the createPane method.

Panes control the order in which layers render to the map. To change the ordering of a layer, get the pane containing the layer with getPane and set the pane's style.zIndex.

Expand
Use dark colors for code blocks
 L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "trails",   style: (feature) => {   const width = 3 + (4 * feature.properties.ELEV_GAIN) / 2300;   return {  color: "#BA55D3",   weight: width   };  }   })  .addTo(map);   map.createPane("bikeTrails");  
Expand

Create a FeatureLayer. Set the url to the to the Trails URL and the pane to bikeTrails.

Expand
Use dark colors for code blocks
 map.createPane("bikeTrails");   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "bikeTrails",   })  .addTo(map); 
Expand

Set the where SQL clause to return the features that are bike-friendly.

Expand
Use dark colors for code blocks
 map.createPane("bikeTrails");   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "bikeTrails",   where: "USE_BIKE = 'YES'",   })  .addTo(map); 
Expand

Set the style to render the trails as dashed white lines.

Expand
Use dark colors for code blocks
 map.createPane("bikeTrails");   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "bikeTrails",   where: "USE_BIKE = 'YES'",   style: () => {  return {  color: "#FFFFFF",  dashArray: "2, 3",  dashOffset: "2",  weight: "1.5"  };  }   })  .addTo(map); 
Expand

Run the app to view the locations of bike-friendly trails in relation to other hiking trails.

Style park areas (polygons)

You can define different style options for each unique attribute value. Add a style definition to render the polygon features from the Parks and Open Space feature layer with different colors based on the type of land they represent.

Add a FeatureLayer. Set the url property to the Parks and Open Space URL.

Expand
Use dark colors for code blocks
 L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",  pane: "bikeTrails",   where: "USE_BIKE = 'YES'",   style: () => {  return {  color: "#FFFFFF",  dashArray: "2, 3",  dashOffset: "2",  weight: "1.5"  };  }   })  .addTo(map);   L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",   })  .addTo(map); 
Expand

Add a style that renders a different fillColor for each unique value of the TYPE field.

Expand
Use dark colors for code blocks
 L.esri  .featureLayer({  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",   style: (feature) => {  let style = {  color: null // no outline color  };  if (feature.properties.TYPE === "Natural Areas") {  style.fillColor = "#9E559C";  } else if (feature.properties.TYPE === "Regional Open Space") {  style.fillColor = "#A7C636";  } else if (feature.properties.TYPE === "Local Park") {  style.fillColor = "#149ECE";  } else {  style.fillColor = "#ED5151";  }   return style;  }   })  .addTo(map); 
Expand

Run the app to view different park areas in different colors according to their type.

Run the app

Run the app.

You should now see the styled trailheads, trails, and parks layers.

What's next?

Learn how to use additional location services in these tutorials:

Style vector tiles

Change the fill and outline color of vector tiles based on their attributes on the client side.

Search for an address

Find an address or place using a search box.

Find a route and directions

Find a route and directions from a start and finish location.