Hide Table of Contents
View Unique value renderer sample in sandbox
Unique value renderer

Description

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.

Code

<!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>
 
         
Show Modal