In this lab you will apply custom styling to a feature layer.
Click create_starter_map/index.html and copy the contents to a new jsbin.com.
In JSBin > HTML, update the require statement and function definition.
require([
"esri/Map",
"esri/views/MapView",
/*** ADD ***/
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/UniqueValueRenderer",
"dojo/domReady!"
], function(Map, MapView, FeatureLayer, SimpleLineSymbol, UniqueValueRenderer) {
UniqueValueRenderer based off the TYPE field. ...
var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.68, 45.52],
zoom: 10
});
/*** ADD ***/
var renderer = new UniqueValueRenderer({
field: "TYPE",
defaultSymbol: new SimpleLineSymbol()
});
TYPE value (the values are MAX, SC, MAX/SC and CR). We want to highlight CR, so we make the line wider and darker by setting the width to 4 and the color opacity to 1. // Green for Type MAX
renderer.addUniqueValueInfo("MAX",
new SimpleLineSymbol({
color: [96, 219, 34, 0.8]
})
);
// Yellow for Type SC
renderer.addUniqueValueInfo("SC",
new SimpleLineSymbol({
color: [255, 255, 34, 0.8]
})
);
// Red for Type MAX/SC
renderer.addUniqueValueInfo("MAX/SC",
new SimpleLineSymbol({
color: [238, 71, 71, 0.8]
})
);
// Light blue for Type CR
renderer.addUniqueValueInfo("CR",
new SimpleLineSymbol({
color: [8, 197, 249, 1],
width: 4
})
);
FeatureLayer, attach the UniqueValueRenderer, and add it to the map. /*** ADD ***/
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Lines/FeatureServer/0",
renderer: renderer
});
map.add(featureLayer);
Your app should look something like this: