Hide Table of Contents
View BlendRenderer - Minority demographics sample in sandbox
BlendRenderer - Minority demographics

Description

This sample demonstrates minority population concentrations throughout the United States. Red indicating Native American/Alaskan, green is Hispanic, blue represents African American, and pink/purple displays Asian concentrations. The more opaque the color, the higher the concentration for that demographic. More information on working with the BlendRenderer can be found here.

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>BlendRenderer: United States minority population</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;
   
}

   
#meta {
      position
: absolute;
      left
: 20px;
      bottom
: 20px;
      width
: 20em;
      height
: 16em;
      z
-index: 40;
      background
: #ffffff;
      color
: #777777;
      padding
: 5px;
      border
: 2px solid #666666;
      border
-radius: 5px;
      font
-family: arial;
      font
-size: 0.9em;
   
}

   
#meta h3 {
      color
: #666666;
      font
-size: 1.1em;
      padding
: 0px;
      margin
: 0px;
      display
: inline-block;
   
}
 
</style>
 
<script src="https://js.arcgis.com/3.46/"></script>
 
<script>
    require
([
     
"dojo/_base/array", "esri/Color", "esri/dijit/PopupTemplate", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer",
     
"esri/map", "esri/renderers/BlendRenderer",
     
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"
   
], function (array, Color, PopupTemplate, ArcGISTiledMapServiceLayer, FeatureLayer, Map, BlendRenderer, SimpleFillSymbol, SimpleLineSymbol){

     
var map = new Map("map", {
        center
: [-100, 38],
        zoom
: 5
     
});

     
var tileLayer = new ArcGISTiledMapServiceLayer("https://tiles.arcgis.com/tiles/nzS0F0zdNLvs7nc8/arcgis/rest/services/US_Counties_basemap/MapServer ");
      map
.addLayer(tileLayer);

     
var layerUrl ="https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Counties_Generalized/FeatureServer/0";

     
//Create the PopupTemplate to be used to display demographic info
     
var template = new PopupTemplate({
       
"title": "{NAME} County, {STATE_NAME}",
       
"fieldInfos": [
         
{
           
"fieldName": "POP2010",
           
"label": "Population",
           
"visible": true,
           
"format": {
             
"places": 0,
             
"digitSeparator": true
           
}
         
}, {
           
"fieldName": "POP10_SQMI",
           
"label": "Density, per sq. mi.",
           
"visible": true,
           
"format": {
             
"places": 0,
             
"digitSeparator": true
           
}
         
}, {
           
"fieldName": "WHITE",
           
"label": "White",
           
"visible": true,
           
"format": {
             
"places": 0,
             
"digitSeparator": true
           
}
         
}, {
           
"fieldName": "ASIAN",
           
"label": "Asian",
           
"visible": true,
           
"format": {
             
"places": 0,
             
"digitSeparator": true
           
}
         
}, {
           
"fieldName": "BLACK",
           
"label": "African American",
           
"visible": true,
           
"format": {
             
"places": 0,
             
"digitSeparator": true
           
}
         
}, {
           
"fieldName": "HISPANIC",
           
"label": "Hispanic",
           
"visible": true,
           
"format": {
             
"places": 0,
             
"digitSeparator": true
           
}
         
}, {
           
"fieldName": "AMERI_ES",
           
"label": "Native American/Alaskan",
           
"visible": true,
           
"format": {
             
"places": 0,
             
"digitSeparator": true
           
}
         
}
       
]
     
});

     
//Set the blendRenderer's parameters
     
var blendRendererOptions = {
        blendMode
: "darken", //By default, it uses "source-over", uncomment to display different mode
       
//See: http://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
        symbol
: new SimpleFillSymbol().setOutline(new SimpleLineSymbol().setWidth(0)),
        fields
: [
         
{
            field
: "AMERI_ES",
            color
: new Color([230, 0, 0])
         
}, {
            field
: "HISPANIC",
            color
: new Color([56, 168, 0])
         
}, {
            field
: "BLACK",
            color
: new Color([0, 169, 230])
         
}, {
            field
: "ASIAN",
            color
: new Color([255, 0, 197])
         
}
       
],
        opacityStops
: [
         
{
            value
: 0,
            opacity
: 0
         
},
         
{
            value
: .2,
            opacity
: .7
         
}
       
],
        normalizationField
: "POP2010"
     
};

      renderer
= new BlendRenderer(blendRendererOptions);

      layer
= new FeatureLayer(layerUrl, {
        outFields
: ["WHITE", "POP2010", "AMERI_ES", "HISPANIC", "BLACK", "ASIAN", "POP10_SQMI", "NAME", "STATE_NAME"],
        opacity
: 1,
        infoTemplate
: template
     
});

      layer
.setRenderer(renderer);
      map
.addLayer(layer);

   
});
 
</script>
 
</head>
 
<body class="claro">
   
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
     
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
         
<div id="meta">
           
<h3>Minority populations displayed using a BlendRenderer</h3>
           
<br>
           
<br>This sample demonstrates minority population concentrations throughout the United States.
           
<ul>
             
<li>Red: Native American/Alaskan</li>
             
<li>Pink/Purple: Asian</li>
             
<li>Blue: African American</li>
             
<li>Green: Hispanic</li>
           
</ul>
            The more opaque the color, the higher the concentration for that demographic.
         
</div>
     
</div>
   
</div>
 
</body>
</html>
 
         
Show Modal