This sample uses a unique value renderer to symbolize the United States. Each state has a string attribute "sub_region" indicating its region of the country. The UniqueValueRenderer.addValue() method is used repeatedly to define a color for each region.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Unique Value Renderer</title> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> <style> html, body, #map{ height: 100%; margin: 0; padding: 0; } </style> <script src="https://js.arcgis.com/3.46/"></script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/Color", "dojo/domReady!" ], function( Map, FeatureLayer, InfoTemplate, SimpleLineSymbol, SimpleFillSymbol, UniqueValueRenderer, Color ) { map = new Map("map", { basemap: "streets-vector", center: [-95.625, 39.243], zoom: 4, slider: false }); map.on("load", addFeatureLayer); function addFeatureLayer() { var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL); //create renderer var renderer = new UniqueValueRenderer(defaultSymbol, "sub_region"); //add symbol for each possible value renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]))); renderer.addValue("Mtn", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]))); renderer.addValue("N Eng", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]))); renderer.addValue("S Atl", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]))); renderer.addValue("Mid Atl", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75]))); renderer.addValue("E N Cen", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5]))); renderer.addValue("W N Cen", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]))); renderer.addValue("E S Cen", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5]))); renderer.addValue("W S Cen", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5]))); var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2", { infoTemplate: new InfoTemplate(" ", "${sub_region}"), mode: FeatureLayer.MODE_ONDEMAND, outFields: ["sub_region"] }); featureLayer.setRenderer(renderer); map.addLayer(featureLayer); } }); </script> </head> <body> <div id="map"></div> </body> </html>