Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Create predominance renderer
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample maps the highest educational attainment for adults in each U.S. county using the createPredominanceRenderer() method in the Smart Mapping module.
The createPredominanceRenderer() method compares the values of two or more competing numeric fields in a feature service. Each field is assigned a color. Each feature in the layer is shaded with the color of the field that has the higher value between the competing fields.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Predominance Renderer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<script src="https://js.arcgis.com/3.29/"></script>
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#menuDiv{
z-index: 65;
top: 0px;
right: 0px;
position: absolute;
max-width: 300px;
opacity: 0.9;
background-color: whitesmoke;
border-bottom-left-radius: 8px;
padding: 0px 0px 0px 10px;
}
</style>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/renderers/smartMapping",
"esri/dijit/Legend",
"esri/dijit/PopupTemplate",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map,
FeatureLayer,
smartMapping,
Legend,
PopupTemplate,
dom, on
) {
var map = new Map("map", {
basemap: "gray",
center: [-95, 40],
zoom: 5
});
var lyrURL = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/us_county_educational_attainment_pop/FeatureServer/0";
//Create new feature layer pointing to service with educational attainment data by county
//and assign it a PopupTemplate with pie chart
var edLayer = new FeatureLayer(lyrURL, {
outFields: ["*"],
visible: false,
infoTemplate: new PopupTemplate({
title: "{COUNTY}, {STATE}",
description: "In {COUNTY} <b>{ATT_COL}</b> adults have attended at least some college, "
+ "<b>{BACHDEG_CY}</b> adults earned a bachelor's degree and "
+ "<b>{GRADDEG_CY}</b> adults earned a post-graduate degree.",
mediaInfos: [{
type: "piechart",
value: {
fields: ["NO_COL", "SMCOLL_CY", "ASSCDEG_CY", "BACHDEG_CY", "GRADDEG_CY"]
}
}],
fieldInfos: [{
fieldName: "NO_COL",
label: "Didn't attend any college",
format: { places: 0, digitSeparator: true }
}, {
fieldName: "SMCOLL_CY",
label: "Attended some college",
format: { places: 0, digitSeparator: true }
}, {
fieldName: "ASSCDEG_CY",
label: "Earned associate's degree",
format: { places: 0, digitSeparator: true }
}, {
fieldName: "BACHDEG_CY",
label: "Earned bachelor's degree",
format: { places: 0, digitSeparator: true }
}, {
fieldName: "GRADDEG_CY",
label: "Earned post graduate degree",
format: { places: 0, digitSeparator: true }
}, {
fieldName: "ATT_COL",
label: "Attended at least some college",
format: { places: 0, digitSeparator: true }
}]
})
});
/**
* Set up parameters for calculating various predominance renderers.
* These parameters must define at a minimum: the layer, the fields
* in the layer to compare against each other, and the basemap of the
* map object.
*
* The four objects defined below list the fields to be used in the renderer.
* The remaining parameters are the same for each of the four
* provided, so those will be set just prior to generating the renderer.
*
* We will provide options for exploring different levels of educational
* attainment in the U.S. Each set of parameters defined below represents
* a different perspective on educational attainment.
*/
//Compares all levels of measured educational attainment in the U.S.
var attainmentParams = {
fields: [{
name: "NOHS_CY",
label: "Did not finish high scool"
}, {
name: "HSGRAD_CY",
label: "Graduated high scool"
}, {
name: "SMCOLL_CY",
label: "Attended some college"
}, {
name: "BACHDEG_CY",
label: "Completed a bachelor's degree"
}, {
name: "GRADDEG_CY",
label: "Completed a post-graduate degree"
}]
};
//Compares the number who attended at least some college
//versus the number of those who didn't
var attendParams = {
fields: [{
name: "ATT_COL",
label: "Attended at least some college"
}, {
name: "NO_COL",
label: "Never attended any college"
}]
};
//Compares the number of people who finished college with at least
//a bachelor's degree versus those who started, but didn't finish
var bachelorParams = {
fields: [{
name: "COL_BACH",
label: "Finished a bachelor's degree"
}, {
name: "COL_NOBACH",
label: "Attended college, but didn't complete bachelor's degree"
}]
};
//Compares the number of people who graduated with at least a bachelor's
//degree versus those who completed a post graduate degree
var postGradParams = {
fields: [{
name: "GRADDEG_CY",
label: "Also completed a post graduate degree"
}, {
name: "BACHDEG_CY",
label: "Only completed a bachelor's degree"
}]
};
var dropDown = dom.byId("menu");
/**
* Sets the remaining parameters for the renderer and selects the
* fields to use for generating predominance based on the selection
* from the drop down menu.
*/
function selectFields(evt){
var params;
if(dropDown.value === "all"){
legend.layerInfos[0].title = "The majority of adults (25+) only ...";
params = attainmentParams;
} else if (dropDown.value === "attendedCol"){
legend.layerInfos[0].title = "The majority of adults (25+) ...";
params = attendParams;
} else if (dropDown.value === "bachelor"){
legend.layerInfos[0].title = "Of the adults (25+) who attended college, the majority ...";
params = bachelorParams;
} else if (dropDown.value === "postgrad"){
legend.layerInfos[0].title = "Of the adults (25+) who completed a bachelor's degree, the majority ...";
params = postGradParams;
} else {
console.log("Not a valid menu selection");
return;
}
params.layer = edLayer;
params.basemap = map.getBasemap();
params.includeOpacityInfo = true;
//Creates the predominance renderer
smartMapping.createPredominanceRenderer(params).then(applyRenderer);
}
//Create a legend
var legend = new Legend({
map: map,
layerInfos: [{
layer: edLayer,
title: "The majority of adults (25+) only..."
}]
}, "legendDiv");
legend.startup();
//Applies the generated renderer to the feature layer
function applyRenderer(response){
edLayer.setRenderer(response.renderer);
edLayer.redraw();
if(!edLayer.visible){
edLayer.setVisibility(true);
}
legend.refresh();
}
//Add the layer to the map
map.addLayer(edLayer);
//Generate the renderer when the map loads and each time the
//selection criteria changes
on(dropDown, "change", selectFields);
on(map, "load", selectFields);
});
</script>
</head>
<body class="claro">
<div id="map"></div>
<div id="menuDiv">
<h3>U.S. Educational Attainment</h3>
<p>Select the variables to include in the predominance map for exploring adult educational attainment by U.S. county.</p>
<select id="menu">
<option value="all" selected>All educational attainment</option>
<option value="attendedCol">Attended at least some college</option>
<option value="bachelor">Finished bachelor's degree</option>
<option value="postgrad">Finished post graduate degree</option>
</select><br><br>
<div id="legendDiv"></div>
</div>
</body>
</html>