Hide Table of Contents
View Dot density renderer sample in sandbox
Dot density renderer

Description

Create a dot density map showing corn production in the US.

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</title>
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
   
<style>
      html
, body, #map {
        height
: 100%;
        margin
: 0;
     
}
     
#info {
        position
: absolute;
        right
: 0;
        top
: 0;
        padding
: 1em 1em 0 1em;
        background
: #fff;
        font
: 14px sans-serif;
        width
: 200px;
        text
-align: center;
        border
-radius: 0 0 0 10px;
     
}
   
</style>
   
<script src="https://js.arcgis.com/3.46/"></script>
   
<script>
     
var map;
      require
([
       
"esri/map", "esri/geometry/Extent",
       
"esri/layers/VectorTileLayer", "esri/layers/FeatureLayer",
       
"esri/InfoTemplate", "esri/renderers/DotDensityRenderer",
       
"esri/renderers/ScaleDependentRenderer", "esri/dijit/Legend",
       
"esri/Color", "dojo/_base/array", "dojo/dom", "dojo/domReady!"
     
], function(
       
Map, Extent,
       
VectorTileLayer, FeatureLayer,
       
InfoTemplate, DotDensityRenderer,
       
ScaleDependentRenderer, Legend,
       
Color, array, dom
     
) {
        map
= new Map("map", {
          extent
: new Extent({"xmin":-2460944,"ymin":-1389910,"xmax":2297115,"ymax":1643787,"spatialReference":{"wkid":102003}}),
          maxScale
: 5000000,
          minScale
: 33000001
       
});

       
var basemap = new VectorTileLayer("https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/USA48AlbersEqualArea/VectorTileServer");
        map
.addLayer(basemap);

       
var layer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", {
          outFields
: ["STATE", "COUNTY", "M163_07"],
          infoTemplate
: new InfoTemplate("${COUNTY}, ${STATE}", "Corn Planted: ${M163_07:NumberFormat} Acres")
       
});
        layer
.setDefinitionExpression("M163_07>10000");

       
// update the alias for the field being mapped so it
       
// displays nicely in the legend
        layer
.on("load", function(e) {
          array
.forEach(e.layer.fields, function(field) {
           
if ( field.alias === "M163_07" ) {
              field
.alias = "Acres of Corn";
           
}
         
});
       
});

       
var renderer = new ScaleDependentRenderer({
          rendererInfos
: [{
            renderer
: new DotDensityRenderer({
              fields
: [{
                name
: "M163_07",
                color
: new Color("#CC8800")
             
}],
              dotValue
: 3200,
              dotSize
: 1
           
}),
          maxScale
: 17000000,
          minScale
: 33000001
         
}, {
            renderer
: new DotDensityRenderer({
              fields
: [{
                name
: "M163_07",
                color
: new Color("#CC8800")
             
}],
              dotValue
: 1600,
              dotSize
: 1
           
}),
          maxScale
: 8500000,
          minScale
: 17000000
         
}, {
            renderer
: new DotDensityRenderer({
              fields
: [{
                name
: "M163_07",
                color
: new Color("#CC8800")
             
}],
              dotValue
: 800,
              dotSize
: 1
           
}),
          maxScale
: 5000000,
          minScale
: 8500000
         
}]
       
});
        layer
.setRenderer(renderer);
        map
.addLayers([layer]);

        map
.on("layers-add-result", function(e) {
         
var corn = e.layers[0].layer;
         
var legend = new Legend({
            map
: map,
            layerInfos
: [{
              layer
: corn,
              title
: "US Corn Production (2007)"
           
}]
         
}, "legend");
          legend
.startup();
       
});
     
});
   
</script>
 
</head>
 
<body>
   
<div id="map"></div>
   
<div id="info">
     
<div id="legend"></div>
   
</div>
 
</body>
</html>
 
         
Show Modal