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.Use dark colors for code blocks Change line 1 2 3 4
esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-topographic" // Basemap layer service });
Add modules
In the
require
statement, add theFeatureLayer
module.The ArcGIS API for JavaScript uses AMD modules. The
require
function is used to load modules so they can be used in the mainfunction
. It's important to keep the module references and function parameters in the same order.Use dark colors for code blocks Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 asimple
renderer. Set thesymbol
property to draw a hiker image accessed from itsurl
.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 thesymbol
property to draw a label with theTRL_NAME
.Use dark colors for code blocks 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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 theurl
property to access its URL endpoint. Set therenderer
andlabelingInfo
before addingtrailheads
to themap
. The feature layer will autocast therenderer
andlabelingInfo
to create class instances of the objects.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 asimple
renderer.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 thefield
toELEV_GAIN
to determine line width.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 theurl
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.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 asimple
renderer. Set thesymbol
to draw a line that is styled with dots in pink.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 theurl
andrenderer
properties. Set thedefiniteExpression
(a SQL where clause) to access bike trails from the Trails feature layer before addingbikeTrails
to themap
. The feature layer will autocast therenderer
a create class instances of the objectUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 withvalue
andcolor
as parameters. The function will return asolid
,simple-fill
symbol for each park type.Use dark colors for code blocks 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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
<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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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": {