Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Calculate equal interval class breaks
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how you can configure a class breaks renderer to use an equal interval classification. In this type of classification, the breaks are set an equal distance apart.
You could manually add breaks an equal distance apart; however, those breaks might not make sense if the data changed. This sample calculates the breaks automatically, thus the same code could be applied to different datasets.
In this sample, the breaks are symbolized with progressively larger circles that are the same color. If you wanted to apply a certain color ramp to your breaks, you could manually preconfigure an array of colors that you could pull from as you added breaks in the loop.
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>Class Breaks Renderer</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">
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
dojo.require("esri.layers.FeatureLayer");
var map;
const state = "FL";
const attributeField = "pop2000";
function init() {
map = new esri.Map("map", {
basemap: "streets-vector",
center: [-83.101, 27.753],
zoom: 7,
slider: false
});
dojo.connect(map, "onLoad", initOperationalLayer);
}
function initOperationalLayer() {
var featureLayer = new esri.layers.FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
featureLayer.setDefinitionExpression("st = '" + state + "'");
var query = new esri.tasks.Query();
query.where = "st = '" + state + "'";
featureLayer.queryFeatures(query, function(featureSet) {
var features = featureSet.features;
var min, max;
min = max = parseFloat(features[0].attributes[attributeField]);
dojo.forEach(features, function(feature) {
min = Math.min(min, feature.attributes[attributeField]);
max = Math.max(max, feature.attributes[attributeField]);
});
//divide the range of values by the number of classes to find the interval
var numRanges = 7;
var breaks = (max - min) / numRanges;
var outline = new esri.symbol.SimpleLineSymbol().setWidth(1);
var fillColor = new dojo.Color([240, 150, 240, 0.75]);
var defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setSize(1).setOutline(outline);
var renderer = new esri.renderer.ClassBreaksRenderer(defaultSymbol, attributeField);
//add the breaks using the interval calculated above
for (var i = 0; i < numRanges; i++) {
renderer.addBreak(parseFloat(min + (i * breaks)), parseFloat(min + ((i + 1) * breaks)), new esri.symbol.SimpleMarkerSymbol().setSize((i + 1) * 6).setColor(fillColor).setOutline(outline));
}
featureLayer.setRenderer(renderer);
});
map.addLayer(featureLayer);
}
dojo.ready(init);
</script>
</head>
<body>
<div id="map" class="claro" style="width:800px; height:600px; border:1px solid #000;">
</div>
</body>
</html>