var layer, legend;

​

require([

  "esri/map",

  "esri/dijit/PopupTemplate",

  "esri/layers/FeatureLayer",

  "esri/dijit/Legend",

  "esri/renderers/smartMapping",

  "esri/renderers/jsonUtils",

​

  "dojo/_base/array",

  "dojo/dom",

  "dojo/dom-construct",

  "dojo/data/ItemFileReadStore",

  "dijit/form/FilteringSelect",

  "dojo/parser",

​

  "dijit/layout/BorderContainer",

  "dijit/layout/ContentPane",

​

  "dojo/domReady!"

​

], function (

  Map,

  PopupTemplate,

  FeatureLayer,

  Legend,

  smartMapping,

  jsonUtils,

​

  array,

  dom,

  domConstruct,

  ItemFileReadStore,

  FilteringSelect,

  parser

) {

​

  parser.parse();

​

  function saveLocal(data, field) {

    var key = location.pathname + '-' + field;

    localStorage.setItem(key, JSON.stringify(data));

  }

​

  function getLocal(field) {

    var key = location.pathname + '-' + field;

    var data = localStorage.getItem(key);

    if (data) {

      return JSON.parse(data);

    } else {

      return null;

    }

  }

​

  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);

  });

​

  function createRenderer(field) {

    //smart mapping functionality begins

    var data = getLocal(field);

    if (data) {

      console.log('load renderer from localStorage');

      layer.setRenderer(jsonUtils.fromJson(data));

      layer.redraw();

      createLegend(map, layer, field);

    } else {

      smartMapping.createClassedColorRenderer({

        layer: layer,

        field: field,

        basemap: map.getBasemap(),

        classificationMethod: "quantile"

      }).then(function (response) {

        console.log('save renderer to localStorage');

        saveLocal(response.renderer.toJson(), field);

        layer.setRenderer(response.renderer);

        layer.redraw();

        createLegend(map, layer, field);

      });

    }

  }

  //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);

});