Hide Table of Contents
View Dot density with multiple classes sample in sandbox
Dot density with multiple classes

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>
 
         
Show Modal