This functionality requires an ArcGIS Server 10.1 service.
Dynamic layers provide the ability to change the renderer(s) for layers in a dynamic map service. In this sample, a drop-down list is populated with attribute field names for a layer that is displayed on the map using an ArcGIS Server 10.1 dynamic layer and a dynamic map service layer. When the selected field changes, a new map image is requested using the new field as the basis for the layer's renderer.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Change attribute used for a renderer</title> <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; text-align: center; } .shadow { -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; } #map{ margin: 0; padding: 0; } #feedback { background: #fff; color: #444; font-family: arial; left: 30px; margin: 5px; padding: 10px; position: absolute; top: 30px; width: 300px; z-index: 40; } #note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; } #legendDiv { padding: 10px 0 0 0; } </style> <script src="https://js.arcgis.com/3.46/"></script> <script> // one global for persistent app variables var app = {}; require([ "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/request", "esri/config", "esri/tasks/ClassBreaksDefinition", "esri/tasks/AlgorithmicColorRamp", "esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask", "esri/layers/LayerDrawingOptions", "esri/symbols/SimpleFillSymbol", "esri/dijit/Legend", "dojo/parser", "dojo/_base/array", "esri/Color", "dojo/dom-style", "dojo/json", "dojo/dom", "dojo/data/ItemFileReadStore", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/FilteringSelect", "dojo/domReady!" ], function( Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, esriRequest, esriConfig, ClassBreaksDefinition, AlgorithmicColorRamp, GenerateRendererParameters, GenerateRendererTask, LayerDrawingOptions, SimpleFillSymbol, Legend, parser, arrayUtils, Color, domStyle, JSON, dom, ItemFileReadStore, registry ) { parser.parse(); app.dataUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2"; app.defaultFrom = "#ffffcc"; app.defaultTo = "#006837"; app.map = new Map("map", { center: [-85.787, 39.782], zoom: 6, slider: false }); var basemap = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"); app.map.addLayer(basemap); var ref = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"); app.map.addLayer(ref); // add US Counties as a dynamic map service layer var urlDyn = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"; var usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, { id: "us_counties", opacity: 0.7, visible: false }); usaLayer.setVisibleLayers([2]); app.map.addLayer(usaLayer); // get field info var countyFields = esriRequest({ url: app.dataUrl, content: { f: "json" }, callbackParamName: "callback" }); countyFields.then(function(resp) { var fieldNames, fieldStore; fieldNames = { identifier: "value", label: "name", items: [] }; arrayUtils.forEach(resp.fields.slice(6, 16), function(f) { // add some field names to the FS fieldNames.items.push({ "name": f.name, "value": f.name }); }); fieldStore = new ItemFileReadStore({ data: fieldNames }); registry.byId("fieldNames").set("store", fieldStore); registry.byId("fieldNames").set("value", "POP2007"); // set a value }, function(err) { console.log("failed to get field names: ", err); }); // update renderer when field name changes registry.byId("fieldNames").on("change", getData); registry.byId("fieldNames").set("value", "POP_2007"); // triggers getData() function getData() { classBreaks(app.defaultFrom, app.defaultTo); } function classBreaks(c1, c2) { var classDef = new ClassBreaksDefinition(); classDef.classificationField = registry.byId("fieldNames").get("value") || "POP2000"; classDef.classificationMethod = "natural-breaks"; // always natural breaks classDef.breakCount = 5; // always five classes var colorRamp = new AlgorithmicColorRamp(); colorRamp.fromColor = new Color.fromHex(c1); colorRamp.toColor = new Color.fromHex(c2); colorRamp.algorithm = "hsv"; // options are: "cie-lab", "hsv", "lab-lch" classDef.baseSymbol = new SimpleFillSymbol("solid", null, null); classDef.colorRamp = colorRamp; var params = new GenerateRendererParameters(); params.classificationDefinition = classDef; var generateRenderer = new GenerateRendererTask(app.dataUrl); generateRenderer.execute(params, applyRenderer, errorHandler); } function applyRenderer(renderer) { // dynamic layer stuff var optionsArray = []; var drawingOptions = new LayerDrawingOptions(); drawingOptions.renderer = renderer; // set the drawing options for the relevant layer // optionsArray index corresponds to layer index in the map service optionsArray[2] = drawingOptions; app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray); app.map.getLayer("us_counties").show(); // create the legend if it doesn't exist if ( ! app.hasOwnProperty("legend") ) { createLegend(); } } function createLegend() { app.legend = new Legend({ map : app.map, layerInfos : [ { layer : app.map.getLayer("us_counties"), title : "US Counties" } ] }, dom.byId("legendDiv")); app.legend.startup(); } function errorHandler(err) { // console.log("Something broke, error: ", err); console.log("error: ", JSON.stringify(err)); } }); </script> </head> <body class="tundra"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="feedback" class="shadow"> <h3>Change the Attribute Field Used to Render Data</h3> <div id="info"> <div id="note"> Note: This sample requires an ArcGIS Server version 10.1 map service to generate a renderer. </div> <label for="fieldNames">Render based on: </label> <select id="fieldNames" name="baseSym" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="style:'width:200px;'"> </select> <div id="legendDiv"></div> </div> </div> </div> </div> </body> </html>