Hide Table of Contents
View Opacity based unique value renderer sample in sandbox
Opacity based unique value renderer

Description

Renderer.setOpacityInfo() allows you to render quantitative data with a color ramp (continuous color) using varying opacity. (Added at version 3.11 of the JS API)

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>Predominant Crop Opacity</title>
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css" />
   
<style>
      html
, body, #map {
        height
: 100%;
        margin
: 0;
        background
-color: #000000;
     
}

     
.esriAttribution {
        background
: none;
        color
: #ffffff;
     
}

     
#info {
        width
: 14.0625em;
        background
-color: #000;
        color
: #fff;
        position
: absolute;
        left
: 0;
        bottom
: 0;
        padding
-left: 10px;
        padding
-top: 10px;
        font
-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        border
-top: 2px solid #ffffff;
        border
-right: 2px solid #ffffff;
        border
-top-right-radius: 20px;
     
}
   
</style>

   
<script src="https://js.arcgis.com/3.46/"></script>

   
<script>
     
var map;
      require
([
       
"dojo/_base/array",
       
"dojo/number",
       
"esri/Color", "esri/dijit/Legend",
       
"esri/geometry/Extent", "esri/InfoTemplate", "esri/layers/FeatureLayer",
       
"esri/map", "esri/renderers/UniqueValueRenderer",
       
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"
     
], function (array, number, Color, Legend, Extent, InfoTemplate, FeatureLayer, Map, UniqueValueRenderer,
       
SimpleFillSymbol, SimpleLineSymbol){

        map
= new Map("map", {
          minScale
: 18489297,
          maxScale
: 1245436,
          extent
: new Extent({
           
"xmax": -7218373,
           
"xmin": -15045524,
           
"ymax": 7571201,
           
"ymin": 2160682,
           
"spatialReference": { "wkid": 102100}
         
})
       
});

       
// --------------------------------------------------------------------
       
// Custom function to format the numbers for crop values
       
// e.g., 126744 becomes 126,744
       
// --------------------------------------------------------------------
        formatNumber
= function (value, key, data){
         
return number.format(value, {places: 0, locale: "en-us"});
       
};

       
var featureLayerOptions = {
          mode
: FeatureLayer.MODE_AUTO,
          outFields
: ["M163_07", "M172_07", "M188_07", "M193_07", "M217_07", "COUNTY", "STATE", "AREA", "M086_07"],
          infoTemplate
: new InfoTemplate("${COUNTY}, ${STATE}",
           
"<b>Corn for grain:</b> ${M163_07:formatNumber}<br><b>All wheat for grain:</b> ${M172_07:formatNumber}<br><b>Upland cotton:</b> ${M188_07:formatNumber}<br><b>Soybeans for beans:</b> ${M193_07:formatNumber}<br><b>Vegetables:</b> ${M217_07:formatNumber}")
       
};
       
var featureLayer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/USA_County_Crops_2007/FeatureServer/0",
          featureLayerOptions
);

       
// --------------------------------------------------------------------
       
// Custom function to compute the crop that has the largest value
       
// in a particular count. Using a custom function with a renderer
       
// is a really powerful method of having control over symbology
       
// client-side, especially if you don't have control over the service.
       
// --------------------------------------------------------------------
       
var uniqueValueRenderer = new UniqueValueRenderer(createSymbol("#d9d9d9"), function (graphic){
         
var maxField = "Other";
         
var max = 0;

          array
.forEach(featureLayerOptions.outFields, function (field){
           
if (graphic.attributes[field] > max) {
              maxField
= field;
              max
= graphic.attributes[field];
           
}
         
});

         
return maxField;
       
});

       
// --------------------------------------------------------------------
       
// Helper function for creating symbols for the UniqueValueRenderer
       
// --------------------------------------------------------------------
       
function createSymbol(color){
         
return new SimpleFillSymbol()
           
.setColor(new Color(color))
           
.setOutline(
           
new SimpleLineSymbol().setColor(new Color("#999999")).setWidth(1)
         
);
       
}

        uniqueValueRenderer
.addValue({ value: "M217_07", symbol: createSymbol("#fd7f6f"), label: "Vegetables" });
        uniqueValueRenderer
.addValue({ value: "M188_07", symbol: createSymbol("#b2e061"), label: "Cotton" });
        uniqueValueRenderer
.addValue({ value: "M172_07", symbol: createSymbol("#bd7ebe"), label: "Wheat" });
        uniqueValueRenderer
.addValue({ value: "M193_07", symbol: createSymbol("#7eb0d5"), label: "Soybeans" });
        uniqueValueRenderer
.addValue({ value: "M163_07", symbol: createSymbol("#ffb55a"), label: "Corn" });

       
// --------------------------------------------------------------------
       
// Use the average data values to control opacity
       
// Field:       M086_07
       
// Description: The acres of total cropland as a percentage of land area in acres.
       
//
       
// Standard Deviation:    28.9616022263796
       
// Average:               39.457298802092
       
// Standard Deviation -1: 10.495696576
       
// Standard Deviation +1: 68.418901028
       
//
       
// For more information about statistics: see the outStatistics
       
// parameter in the ArcGIS REST API Help.
       
// --------------------------------------------------------------------
        uniqueValueRenderer
.setOpacityInfo({
          field
: "M086_07",
          stops
: [
           
{ value: 10, opacity: 0   }, // -1 stddev,     transparent
           
{ value: 39, opacity: 0.5 }, // average value, 50% transparent
           
{ value: 68, opacity: 1   }  // +1 stddev,     completely opaque
         
]
       
});

        featureLayer
.setRenderer(uniqueValueRenderer);
        map
.addLayer(featureLayer);

       
var legend = new Legend({
          map
: map,
          layerInfos
: [
           
{
              layer
: featureLayer,
              title
: "Acres harvested by type"
           
}
         
]
       
}, "legend");

        legend
.startup();
     
});
   
</script>
 
</head>

 
<body>
   
<div id="map"></div>
   
<div id="info">
     
<div id="legend"></div>
   
</div>
 
</body>
</html>
 
         
Show Modal