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 will use three different renderers to style three hosted feature layers.
Prerequisites
You need an ArcGIS Developer or ArcGIS Online account to access the dashboard and create an API key.
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
api
to your key, so it can be used to access basemap layer and location services.Key
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "arcgis/topographic" // basemap styles service
});
Add modules
- In the
require
statement, add theFeature
module.Layer
The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD require
function uses references to determine which modules will be loaded – for example, you can specify "esri/Map"
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map
) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. For more information on the different types of modules, visit the Introduction to Tooling guide topic.
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(esriConfig, Map, MapView, FeatureLayer ) {
Style trailheads (points)
Use the Simple
, Picture
, and Label
classes to style the points with an image, and then define label attributes to display for the Trailheads feature layer.
- Create a
trailheads
and define it as aRenderer simple
renderer. Set thesymbol
property to draw a hiker image accessed from itsurl
.
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"
}
}
- Create a
trailheads
and set theLabels symbol
property to draw a label with theTRL_
.NAME
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 a
trailheads
Feature
. Set theLayer url
property to access its URL endpoint. Set therenderer
andlabeling
before addingInfo trailheads
to themap
. The feature layer will autocast therenderer
andlabeling
to create class instances of the objects.Info
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);
- View hiker symbols with trailhead names.
Style trails (lines)
Use the Simple
and Visual
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
trails
and define it as aRenderer simple
renderer.
map.add(trailheads);
// Define a unique value renderer and symbols
const trailsRenderer = {
type: "simple",
symbol: {
color: "#BA55D3",
type: "simple-line",
style: "solid"
},
- In the
visual
array, set theVariables field
toELEV_
to determine line width.GAIN
// 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 a
trails
Feature
. Set theLayer url
to access its URL endpoint. Set therenderer
andopacity
properties before addingtrails
to themap
. The feature layer will autocast therenderer
a create class instances of the object.
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
});
// Add the layer
map.add(trails,0);
- 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 definition
, Simple
and Simple
classes. The layer is added on top of the existing trails layer.
- Create a
bike
and define it as aTrails Renderer simple
renderer. Set thesymbol
to draw a line that is styled with dots in pink.
// 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"
}
};
- Create a
bike
Trails Feature
and set theLayer url
andrenderer
properties. Set thedefinition
(a SQL where clause) to access bike trails from the Trails feature layer before addingExpression bike
to theTrails map
. The feature layer will autocast therenderer
a create class instances of the object.
// 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);
- 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 Unique
and Simple
classes to style polygon features with different fill colors, based on the TYPE attribute in the Parks and Open Spaces feature layer.
- Create a
create
function withFill Symbol value
andcolor
as parameters. The function will return asolid
,simple-fill
symbol for each park type.
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
};
}
- Create an
open
and define it asSpaces Renderer unique-value
. Set thefield
property toTYPE
. In theunique
array, set unique colors for each park type.Value Infos
// 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 an
openspaces
Feature
. Set theLayer url
to access its URL endpoint. Set therenderer
andopacity
properties before addingopenspaces
to themap
. The feature layer will autocast therenderer
to create class instances of the object.
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);
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 API features and ArcGIS services in these tutorials: