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
Dot density with multiple classes
Explore in the sandbox
Open in CodePen
View live sample
Description
Show multiple classes on using a dot density renderer.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>Dot Density Renderer - Multiple Variables</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#map {
background-color: #000
}
#infopane {
position: absolute;
width: 300px;
top: 0;
right: 0;
background-color: rgba(0,0,0,0.75);
padding: 10px;
border-radius: 0 0 0 10px;
font-family: Segoe UI;
color: #aaa;
}
.esriLegendServiceLabel, #info-title {
font-weight: 600;
}
.hidden {
display: none;
}
#toggle-button {
cursor: pointer;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
var map;
require([
"esri/map", "esri/geometry/Extent", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/layers/ArcGISTiledMapServiceLayer",
"esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/DotDensityRenderer", "esri/renderers/ScaleDependentRenderer",
"esri/Color", "dojo/query", "dojo/dom", "esri/dijit/Legend", "dojo/domReady!"
], function(Map, Extent, FeatureLayer, InfoTemplate, ArcGISTiledMapServiceLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, DotDensityRenderer, ScaleDependentRenderer, Color, query, dom, Legend) {
map = new Map("map", {
center: [-122.12, 37.60],
zoom: 10,
maxZoom: 12,
minZoom: 9
});
var basemap = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer", {
opacity: 0.15
});
map.addLayer(basemap);
var layer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BayAreaWorkingClasses/FeatureServer/0", {
outFields: ["CC","SC","WC","FFF"]
});
var createRenderer = function(dotValue) {
return new DotDensityRenderer({
fields: [{
name: "CC",
color: new Color([21, 137, 255])
}, {
name: "SC",
color: new Color([200, 111, 0])
}, {
name: "WC",
color: new Color([0, 255, 0])
}, {
name: "FFF",
color: new Color([255, 0, 0])
}],
dotValue: dotValue,
dotSize: 2,
outline: new SimpleLineSymbol("solid", new Color([50, 50, 50, 1]), 0.5),
legendOptions: {
valueUnit: "people",
backgroundColor: new Color([32, 32, 32])
}
});
};
var rendererInfos = [
{
renderer: createRenderer(400),
maxZoom: 9,
minZoom: 9
}, {
renderer: createRenderer(100),
maxZoom: 10,
minZoom: 10
}, {
renderer: createRenderer(25),
maxZoom: 11,
minZoom: 11
}, {
renderer: createRenderer(6),
maxZoom: 12,
minZoom: 12
}
];
var scaleDependentRenderer = new ScaleDependentRenderer({
rendererInfos: rendererInfos
});
layer.setRenderer(scaleDependentRenderer);
map.addLayer(layer);
var legend = new Legend({
map: map,
layerInfos: [{ layer: layer }]
}, "legend");
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">Working Classes in Bay Area</h1>
<p>DotDensityRenderer provides a way to display multiple attributes for polygon features. A quantitative attribute is represented by dots randomly placed within a polygon.</p>
<p>The symbols on this map are scale-dependent. As you zoom in, the sizes of symbols are enlarged accordingly.</p>
<p>Four major working classes are rendered with four distinct colors. One can easily identity clusters by the relative richness of specific a color on the map.</p>
<div id="legend"></div>
</div>
</div>
</body>
</html>