Hide Table of Contents
View Renderer with graduated symbols for polygons sample in sandbox
Renderer with graduated symbols for polygons

Description

Graduated circles showing population for US counties.

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>Graduated Symbols with Polygon Layer - Scale Dependent</title>
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
   
<style>
      html
, body, #map {
        height
: 100%;
        margin
: 0;
     
}
     
#infopane {
        position
: absolute;
        width
: 300px;
        top
: 0;
        right
: 0;
        background
-color: rgba(150,150,150,0.75);
        padding
: 10px;
        border
-radius: 0 0 0 10px;
        font
-family: Segoe UI;
     
}
     
.esriLegendServiceLabel, #info-title {
        font
-weight: 600;
     
}
     
.hidden {
        display
: none;
     
}
     
#toggle-button {
        cursor
: pointer;
     
}
   
</style>
   
<script src="https://js.arcgis.com/3.46/"></script>
   
<script>
      require
([
       
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
       
"esri/Color", "esri/renderers/ClassBreaksRenderer", "esri/renderers/ScaleDependentRenderer", "esri/InfoTemplate", "dojo/_base/array", "dojo/dom", "dojo/query", "dojo/domReady!"
     
], function(Map, FeatureLayer, Legend, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, ClassBreaksRenderer, ScaleDependentRenderer, InfoTemplate, array, dom, query) {
       
var map = new Map("map", {
          basemap
: "gray-vector",
          center
: [-98.5795,39.828175],
          zoom
: 4
       
});
       
       
var layer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_Counties/FeatureServer/0", {
          outFields
: ["*"],
          infoTemplate
: new InfoTemplate("${NAME}, ${STATE_NAME}", "Population in 1999: ${POP1999}")
       
});
       
       
var createRenderer = function(enlarge){
         
var renderer = new ClassBreaksRenderer(null, "POP1999");
         
var outline = new SimpleLineSymbol().setWidth(0.5).setColor(new Color([43, 101, 236, 1]));
         
var color = new Color([43, 101, 236, 0.75]);
         
         
var classBreaks = [{minValue: 0, maxValue: 20000, size: 2}, {minValue: 20000, maxValue: 50000, size: 4}, {minValue: 50000, maxValue: 100000, size: 6}, {minValue: 100000, maxValue: 1000000, size: 9}, {minValue: 1000000, maxValue: 10000000, size: 10}];
          array
.forEach(classBreaks, function(classBreak){
            renderer
.addBreak(classBreak.minValue, classBreak.maxValue, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, (classBreak.size * enlarge), outline, color));
         
});
         
return renderer;
       
};
       
       
var rendererInfos = [];
       
for (var i = 4; i < 9; i++) {
          rendererInfos
.push({
            renderer
: createRenderer(Math.pow(2, i - 4)),
            minZoom
: i,
            maxZoom
: i
         
});
       
}
       
       
var scaleRenderer = new ScaleDependentRenderer({
          rendererInfos
: rendererInfos
       
});
        scaleRenderer
.backgroundFillSymbol = new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0])).setOutline(new SimpleLineSymbol().setWidth(0));
        layer
.setRenderer(scaleRenderer);
        map
.addLayers([ layer ]);
       
       
var legend = new Legend({
          map
: map,
          layerInfos
: [{
            layer
: layer,
            title
: "Legend"
         
}]
       
}, "legend");
       
        map
.on("layers-add-result", function(layer){
          legend
.startup();
       
});
       
        dom
.byId("toggle-button").onclick = function(){
          query
(".toggle-pane").toggleClass("hidden");
       
};
     
});
   
</script>
 
</head>
 
<body>
   
<div id="map"></div>
   
<div id="infopane">
     
<div id="toggle-button">[Toggle/expand information pane]</div>
     
<div class="toggle-pane">
       
<h1 id="info-title">Big Counties vs. Small Counties</h1>
       
<p>Graduated symbols provide an alternate way to symbolize a polygon layer. This is a suitable approach to visualize population-based data as it is not affected by the area of polygons.</p>
       
<p>The symbols on this map are scale-dependent. As you zoom in, the sizes of symbols are sized accordingly.</p>
       
<p>Population of county is displayed on map with the size of circle. This map shows the distribution of the "big counties" and "small counties" in the US.</p>
       
<div id="legend"></div>
     
</div>
   
</div>
 
</body>
</html>
 
         
Show Modal