JS Bin

//global vars

var layer, legend;

​

require([

​

  "esri/map",

  "esri/dijit/PopupTemplate",

  "esri/layers/FeatureLayer",

  "esri/dijit/Legend",

  "esri/renderers/smartMapping",

​

  "dojo/_base/array",

  "dojo/dom",

  "dojo/dom-construct",

  "dojo/data/ItemFileReadStore",

  "dijit/form/FilteringSelect",

​

  "dojo/domReady!"

​

], function(

  Map,

  PopupTemplate,

  FeatureLayer,

  Legend,

  smartMapping,

​

  array,

  dom,

  domConstruct,

  ItemFileReadStore,

  FilteringSelect

​

) {

  var mapOptions = {

    basemap: "terrain",

    center: [-123.113, 47.035],

    zoom: 7,

    slider: false

  };

​

  var map = new Map("map", mapOptions);

  var fieldName = "POP2007";

​

  // the counties map service uses the actual field name as the field alias

  // set up an object to use as a lookup table to work with user friendly field names

​

  var fields = {

    "POP2007": "Population(2007)",

    "POP07_SQMI": "Population/Square Mile(2007)",

    "WHITE": "White",

    "BLACK": "Black",

    "AMERI_ES": "Native Americans",

    "HISPANIC": "Hispanic",

    "ASIAN": "Asian",

    "HAWN_PI": "Native Hawaiian/Pacific Islander",

    "MULT_RACE": "Multiple Races",

    "OTHER": "Other"

  };

  var outFields = [

    "POP2007",

    "POP07_SQMI",

    "WHITE",

    "BLACK",

    "AMERI_ES",

    "ASIAN",

    "HAWN_PI",

    "OTHER",

    "MULT_RACE",

    "HISPANIC",

    "STATE_NAME",

    "NAME"

  ];

​

  //create popup

  var popupTemplate = new PopupTemplate({

    title: "{NAME} County",

    fieldInfos: [{

      "fieldName": fieldName,

      "label": fields[fieldName],

      "visible": true,

      "format": {

        places: 0,

        digitSeparator: true

      }

    }],

    showAttachments: true

  });

​

  layer = new FeatureLayer("//sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {

    "id": "Washington",

    "infoTemplate": popupTemplate,

    "mode": FeatureLayer.MODE_SNAPSHOT,

    "outFields": outFields,

    "opacity": 0.8

  });

​

  //only working with Washington state

  layer.setDefinitionExpression("STATE_NAME='Washington'");

  map.addLayer(layer);

​

  layer.on("load", function() {

    createRenderer(fieldName);

  });

  var legendChart;

  var ctx = document.getElementById("myChart").getContext("2d");

​

  function createRenderer(field) {

    //smart mapping functionality begins

    smartMapping.createClassedColorRenderer({

      layer: layer,

      field: field,

      basemap: map.getBasemap(),

      classificationMethod: "quantile"

    }).then(function(response) {

      layer.setRenderer(response.renderer);

      layer.redraw();

      createLegend(map, layer, field);

      var infos = response.renderer.infos;

      var data = infos.map(function(a, idx) {

        var clr = response.renderer._symbols[String(a.minValue) + "-" + String(a.maxValue)].color;

        var x = {

          value: (a.maxValue / a.minValue).toFixed(2),

          color: "rgba(" + clr.r + "," + clr.g + "," + clr.b + "," + clr.a + ")",

          highlight: "rgba(" + clr.r + "," + clr.g + "," + clr.b + ",0.5" + ")",

          label: a.minValue.toFixed(0) + " to " + a.maxValue.toFixed(0)

        };

        return x;

      });

      if (legendChart) {

        legendChart.destroy();

      }

      legendChart = new Chart(ctx).Doughnut(data, {

        segmentShowStroke: true,

        segmentStrokeColor: "#fff",

        segmentStrokeWidth: 2,

        percentageInnerCutout: 25,

        legendTemplate: ""

      });

    });

  }

​

  //this function gets called when fields are selected to render

  function updateAttribute(ch) {

    map.infoWindow.hide();

​

    var popupTemplateUpdated = new PopupTemplate({

      title: "{NAME} County",

      fieldInfos: [{

        "fieldName": ch,

        "label": fields[ch],

        "visible": true,

        "format": {

          places: 0,

          digitSeparator: true

        }

      }],

      showAttachments: true

    });

    layer.setInfoTemplate(popupTemplateUpdated);

    createRenderer(ch);

    layer.redraw();

    createLegend(map, layer, ch);

  }

​

  //Create a legend

  function createLegend(map, layer, field) {

    //If applicable, destroy previous legend

    if (legend) {

      legend.destroy();

      domConstruct.destroy(dom.byId("legendDiv"));

    }

​

    // create a new div for the legend

    var legendDiv = domConstruct.create("div", {

      id: "legendDiv"

    }, dom.byId("legendWrapper"));

​

    legend = new Legend({

      map: map,

      layerInfos: [{

        layer: layer,

        title: "Census Attribute: " + field

      }]

    }, legendDiv);

    legend.startup();

  }

​

  // create a store and a filtering select for the county layer's fields

  var fieldNames, fieldStore, fieldSelect;

  fieldNames = {

    "identifier": "value",

    "label": "name",

    "items": []

  };

  array.forEach(outFields, function(f) {

    if (array.indexOf(f.split("_"), "NAME") == -1) { // exclude attrs that contain "NAME"

      fieldNames.items.push({

        "name": fields[f],

        "value": f

      });

    }

  });

​

  fieldStore = new ItemFileReadStore({

    data: fieldNames

  });

  fieldSelect = new FilteringSelect({

    displayedValue: fieldNames.items[0].name,

    value: fieldNames.items[0].value,

    name: "fieldsFS",

    required: false,

    store: fieldStore,

    searchAttr: "name",

    style: {

      "width": "290px",

      "fontSize": "12pt",

      "color": "#444"

    }

  }, domConstruct.create("div", null, dom.byId("fieldWrapper")));

  fieldSelect.on("change", updateAttribute);

​

});