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",
// ADD modules
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/UniqueValueRenderer",
"esri/Color",
"dojo/domReady!"],
// ADD FeatureLayer,SimpleLineSymbol,UniqueValueRenderer,Color references
function(Map,FeatureLayer,SimpleLineSymbol,UniqueValueRenderer,Color) {
...
UniqueValueRenderer based off the TYPE field. function(Map,FeatureLayer,SimpleLineSymbol,UniqueValueRenderer,Color) {
map = new Map("mapDiv", {
center: [-122.68, 45.52],
zoom: 10,
basemap: "dark-gray"
});
// ADD a Unique Value Renderer with no default symbol
var renderer = new UniqueValueRenderer(null, "TYPE");
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.addValue("MAX", new SimpleLineSymbol().setColor(new Color([96, 219, 34, 0.8])));
// Yellow for Type SC
renderer.addValue("SC", new SimpleLineSymbol().setColor(new Color([255, 255, 34, 0.8])));
// Red for Type MAX/SC
renderer.addValue("MAX/SC", new SimpleLineSymbol().setColor(new Color([238, 71, 71, 0.8])));
// Light blue for Type CR
renderer.addValue("CR", new SimpleLineSymbol().setColor(new Color([8, 197, 249, 1])).setWidth(4));
FeatureLayer, attach the UniqueValueRenderer, and add it to the map. Because the renderer relies on the TYPE field, we tell the FeatureLayer to retrieve it by specifying the outFields parameter. var featureLayer = new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Lines/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["TYPE"]
});
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
Your app should look something like this:
###Bonus