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
Renderer using a function
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
With version 3.3 of the API, a renderer can accept a function instead of an attribute field name and that function will be run to calculate the value that should be used to renderer each feature.The following function is used by the renderer to calculate a value used to symbolize each feature. The return value of the function passed to the renderer should be within the breaks used by the renderer:
// convert acres to square miles
// also used by the feature layer's info template
// test for presence to a property named "attributes" to
// determine whether or the "value" argument is a graphic or number
calculateSquareMiles = function(value) {
var acres = (value.hasOwnProperty("attributes")) ? value.attributes.M163_07 : value;
return number.format(acres / 640, { places: 2 });;
}
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>Map and Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#info {
position: absolute;
right: 0;
top: 0;
padding: 10px;
background-color: #999;
font: 14px Segoe UI;
width: 200px;
text-align: center;
border-radius: 0 0 0 10px;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map, calculateSquareMiles;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/ClassBreaksRenderer",
"esri/dijit/Legend",
"esri/Color", "dojo/number", "dojo/domReady!"
], function(
Map, FeatureLayer, InfoTemplate,
SimpleFillSymbol, SimpleLineSymbol, ClassBreaksRenderer,
Legend,
Color, number
) {
map = new Map("map", {
basemap: "gray",
center: [-89.849, 40.369],
zoom: 6
});
map.on("layers-add-result", createLegend);
var infoTemplate = new InfoTemplate(
"${COUNTY}, ${STATE}",
"${M163_07} acres of corn in 2007, which is ${M163_07:calculateSquareMiles} square miles."
);
var layer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", {
infoTemplate: infoTemplate,
outFields: ["STATE", "COUNTY", "M163_07", "AREA", "FID"],
opacity: 0.5
});
layer.setDefinitionExpression("AREA > 0.01");
// convert acres to square miles
// also used by the feature layer's info template
// test for presence to a property named "attributes" to
// determine whether or the "value" argument is a graphic or number
calculateSquareMiles = function(value) {
var acres = (value.hasOwnProperty("attributes")) ? value.attributes.M163_07 : value;
return number.format(acres / 640, { places: 2 });
};
var renderer = new ClassBreaksRenderer(null, calculateSquareMiles);
renderer.setMaxInclusive(true);
var color1 = new Color([247, 252, 185]); // yellow
var color2 = new Color([173, 221, 142]); // light green
var color3 = new Color([49, 163, 84]); // green
renderer.addBreak({
minValue: 0,
maxValue: 10,
label: "< 10 Square Miles",
symbol: new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", color1, 1),
color1
)
});
renderer.addBreak({
minValue: 10,
maxValue: 100,
label: "10 - 100 Square Miles",
symbol: new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", color2, 1),
color2
)
});
renderer.addBreak({
minValue: 100,
maxValue: Infinity,
label: "> 100 Square Miles",
symbol: new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", color3, 1),
color3
)
});
layer.setRenderer(renderer);
map.addLayers([layer]);
function createLegend(results) {
var legend = new Legend({
layerInfos: [{
layer: results.layers[0].layer,
title: " "
}],
map: map
}, "legend");
legend.startup();
}
});
</script>
</head>
<body>
<div id="map"></div>
<div id="info">
<div style="font-size: 36px;">Square miles of farmland used for corn.</div>
<div id="legend"></div>
</div>
</body>
</html>