Arcgis - Choropleth - ESRI

by Vignesh Gopalakrishnan

HTML

<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>
<div id="viewDiv"></div>
<script>
  var dojoConfig = {
    has: {
      "esri-featurelayer-webgl": 1
    }
  }

</script>

JavaScript

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/widgets/Legend",
  "esri/Graphic",
  "esri/tasks/support/Query",
  "esri/tasks/QueryTask",
  "dojo/domReady!"
], function(
  Map, MapView, FeatureLayer, Legend, Graphic, Query, QueryTask,
) {

  var defaultSym = {
    type: "simple-fill", // autocasts as new SimpleFillSymbol()
    outline: { // autocasts as new SimpleLineSymbol()
      color: "lightgray",
      width: 0.5
    }
  };

  /*****************************************************************
   * Set a color visual variable on the renderer. Color visual variables
   * create continuous ramps that map low data values to weak or
   * neutral colors and high data values to strong/deep colors. Features
   * with data values in between the min and max data values are assigned
   * a color proportionally between the min and max colors.
   *****************************************************************/

  var renderer = {
    type: "simple", // autocasts as new SimpleRenderer()
    symbol: defaultSym
  };

  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-85.050200, 33.125524],
    zoom: 6
  });

  // Each object in this array is autocast as
  // an instance of esri/layers/support/Field
  var fields = [{
    name: "ObjectID",
    alias: "ObjectID",
    type: "oid"
  }, {
    name: "title",
    alias: "title",
    type: "string"
  }, {
    name: "type",
    alias: "type",
    type: "string"
  }, {
    name: "mag",
    alias: "Magnitude",
    type: "double"
  }];

  var openSpacesRenderer = {
    "type": "class-breaks",
    "field": "CENSUSAREA",
    "classBreakInfos": [{
        "symbol": {
          "color": [
            45, 128, 120, 255
          ],
          "outline": {
            "width": 0
          },
          "type": "simple-fill",
          "style": "solid"
        },
        "label": "0 to 1,629",
        "minValue": 0,
       ...