Problem to Set a ClassBreaksRenderer for Dynamic Layer

tomwang1 · ‎03-24-2014

Hi,

I have a problem to set a ClassBreaksRenderer for Dynamic Layer. But the code works to use FeatureLayer instead. Also works if to set a SimpleRenderer for Dynamic Layer. Please advise!

Thanks,

Tom

[HTML]
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        color: #444;
        position: absolute;
        font-family: arial;
        height: 32px;
        left: 30px;
        top: 35px;
        width: 97px;
        z-index: 40;
      }
    </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "esri/layers/FeatureLayer",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/layers/DynamicLayerInfo",
          "esri/layers/LayerDataSource",
          "esri/layers/LayerDrawingOptions",
          "esri/renderers/ClassBreaksRenderer",
          "esri/renderers/SimpleRenderer",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/SimpleLineSymbol",
          "dojo/dom",
          "dojo/dom-construct",
          "dojo/dom-style",
          "dojo/parser",
          "dojo/query",
          "dojo/_base/array",
          "dojo/_base/Color",
          "dojo/dnd/Source",
          "dijit/registry",
          "dijit/form/Button",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/domReady!"
        ],
          function (
            Map, FeatureLayer, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,
            DynamicLayerInfo, LayerDataSource, LayerDrawingOptions,
            ClassBreaksRenderer,SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, dom, domConstruct,
            domStyle, parser, query, arrayUtils, Color, Source, registry
        ) {

              parser.parse();

              var dndSource, layerLookup, dynamicLayerInfos;

              map = new Map("map", {
                  center: [-93.636, 46.882],
                  zoom: 4,
                  slider: false
              });

              var basemapLayer = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
              map.addLayer(basemapLayer);


              registry.byId("layer").on("click", addLayer);

              function addLayer() {
                  var layerName, dataSource, layerSource, options, drawingOptions;

                  // disable the "Add" button
                  registry.byId("layer").set("disabled", true);

                  var symbol = new SimpleFillSymbol();
                  symbol.setColor(new Color([150, 150, 150, 0.5]));
                  var m_renderer = new ClassBreaksRenderer(symbol, "POP");
                  m_renderer.addBreak(0, 1000, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
                  m_renderer.addBreak(1000, 10000, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
                  m_renderer.addBreak(10000, 100000, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
                  m_renderer.addBreak(100000, 1000000, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
                  m_renderer.addBreak(1000000, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

                  var m_queryDataSource = new esri.layers.QueryDataSource();
                  m_queryDataSource.geometryType = "polygon";
                  m_queryDataSource.oidFields = ["OBJECTID"];
                  m_queryDataSource.query = "Select OBJECTID, Shape, Population POP from US_STATE";
                  m_queryDataSource.spatialReference = new esri.SpatialReference({ wkid: 102100 });
                  m_queryDataSource.workspaceId = "myworkspace";
                  layerSource = new LayerDataSource();
                  layerSource.dataSource = m_queryDataSource;

                  ////---------- feature layer
                  //var urlDyn = "http://myserver/arcgis/rest/services/BioD_DynamicMap/MapServer/dynamicLayer";
                  //var featureLayer = new FeatureLayer(urlDyn, {
                  //    mode: FeatureLayer.MODE_ONDEMAND,
                  //    outFields: ["*"],
                  //    source: layerSource
                  //});
                  //featureLayer.setRenderer(m_renderer);
                  //map.addLayer(featureLayer);
                  ////----------feature layer

                  //---------- Dynamic layer
                  layerName = "add a new layer from database";
                  var usaLayer = new ArcGISDynamicMapServiceLayer("http://myserver/arcgis/rest/services/BioD_DynamicMap/MapServer",
                  { "id": "NEW LAYER" });
                  usaLayer.setVisibleLayers([0]);
                  if (!dynamicLayerInfos) {
                      dynamicLayerInfos = usaLayer.createDynamicLayerInfosFromLayerInfos();
                  }
                  var dynamicLayerInfo = new DynamicLayerInfo();
                  dynamicLayerInfo.id = 0;
                  dynamicLayerInfo.name = layerName;
                  dynamicLayerInfo.source = layerSource;
                  dynamicLayerInfos.push(dynamicLayerInfo);
                  usaLayer.setDynamicLayerInfos(dynamicLayerInfos, true);
                  drawingOptions = new LayerDrawingOptions();
                  //---------- Dynamic layer

                  ////---------- Dynamic layer -- (1) SimpleRenderer
                  //drawingOptions.renderer = new SimpleRenderer(
                  // new SimpleFillSymbol("solid", null,
                  //    new Color([255, 0, 255, 0.75]) // fuchsia lakes!
                  // ));
                  ////---------- Dynamic layer -- (1) SimpleRenderer

                  //---------- Dynamic layer -- (2) ClassBreaksRenderer
                  drawingOptions.renderer = m_renderer;
                  //---------- Dynamic layer -- (2) ClassBreaksRenderer


                  //---------- Dynamic layer
                  options = [];
                  options[0] = drawingOptions;
                  usaLayer.setLayerDrawingOptions(options);
                  map.addLayer(usaLayer);
                  //---------- Dynamic layer
              }
          });
    </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">
          <button id="layer"
                    data-dojo-type="dijit/form/Button">
              Add Layer
            </button>
        </div>
      </div>
    </div>
</body>
[/HTML]

JianHuang · ‎03-25-2014

Tom,

You can call generateRendererTask with DynamicLayers.

var source = dynamicLayerInfo.source; var generateRendererTask = new GenerateRendererTask(mapServiceUrl + "/dynamicLayer", {    "source": source }); var params = new GenerateRendererParameters(); //set the params here //...  var generateRendererDefer = generateRendererTask.execute(params); generateRendererDefer.then(function(renderer){   //apply it to the layer   var layerDrawingOption = new LayerDrawingOptions();     layerDrawingOption.renderer = renderer;   layer.layerDrawingOptions[id] = layerDrawingOption;   layer.setLayerDrawingOptions(layer.layerDrawingOptions); });

Hope this helps.

View solution in original post

Noah-Sager · ‎03-24-2014

Hi Tom,

Welcome to Esri Forums! Thank you for posting your question here.

I was not able to get your sample code to run properly, but I do want to direct you to this Class breaks renderer with dynamic layer sample, which may shed some light on the ClassBreaksRenderer functionality.

Hope this helps!

-Noah

tomwang1 · ‎03-24-2014

Hi Noah,

I am glad you are trying to help on my issue. Sorry I have to use "myserver", "myworkspace" to replace our server and work space name in my code.

I had studied the sample you directed, also I have went through all esri JavaScript samples. But unfortunately I have not found a solution for my question. It would be really help if someone can read my code and have a solution.

I don't know why the code is not working. Same concept works in Silverlight API. Any thing I am missing or a bug from esri JavaScript API?

tomwang1 · ‎03-24-2014

Ok, I got a sample data from esri site. I am using this data for my code. You can test it. It works for FeatureLayer.

[HTML]
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        color: #444;
        position: absolute;
        font-family: arial;
        height: 32px;
        left: 30px;
        top: 35px;
        width: 97px;
        z-index: 40;
      }
    </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "esri/layers/FeatureLayer",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/layers/DynamicLayerInfo",
          "esri/layers/TableDataSource",
          "esri/layers/LayerDataSource",
          "esri/layers/LayerDrawingOptions",
          "esri/renderers/ClassBreaksRenderer",
          "esri/renderers/SimpleRenderer",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/SimpleLineSymbol",
          "dojo/dom",
          "dojo/dom-construct",
          "dojo/dom-style",
          "dojo/parser",
          "dojo/query",
          "dojo/_base/array",
          "dojo/_base/Color",
          "dojo/dnd/Source",
          "dijit/registry",
          "dijit/form/Button",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/domReady!"
        ],
          function (
            Map, FeatureLayer, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,
            DynamicLayerInfo,TableDataSource, LayerDataSource, LayerDrawingOptions,
            ClassBreaksRenderer,SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, dom, domConstruct,
            domStyle, parser, query, arrayUtils, Color, Source, registry
        ) {

              parser.parse();

              var dndSource, layerLookup, dynamicLayerInfos;

              map = new Map("map", {
                  center: [-93.636, 46.882],
                  zoom: 4,
                  slider: false
              });

              var basemapLayer = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
              map.addLayer(basemapLayer);


              registry.byId("layer").on("click", addLayer);

              function addLayer() {
                  var layerName, dataSource, layerSource, options, drawingOptions;

                  // disable the "Add" button
                  registry.byId("layer").set("disabled", true);

                  var symbol = new SimpleFillSymbol();
                  symbol.setColor(new Color([150, 150, 150, 0.5]));
                  var m_renderer = new ClassBreaksRenderer(symbol, "objectid");
                  m_renderer.addBreak(0, 1, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
                  m_renderer.addBreak(1, 5, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
                  m_renderer.addBreak(5, 10, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
                  m_renderer.addBreak(10, 20, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
                  m_renderer.addBreak(20, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

                  //define the layer's data source from a table
                  var dataSource = new TableDataSource();
                  dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2";
                  dataSource.dataSourceName = "ss6.gdb.Lakes";
                  var layerSource = new LayerDataSource();
                  layerSource.dataSource = dataSource;

                  //---------- feature layer
                  var urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/dynamicLayer";
                  var featureLayer = new FeatureLayer(urlDyn, {
                      mode: FeatureLayer.MODE_ONDEMAND,
                      outFields: ["*"],
                      source: layerSource
                  });
                  featureLayer.setRenderer(m_renderer);
                  map.addLayer(featureLayer);
                  //----------feature layer

                  ////---------- Dynamic layer
                  //layerName = "add a new layer from database";
                  //var usaLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                  //{ "id": "NEW LAYER" });
                  //usaLayer.setVisibleLayers([0]);
                  //if (!dynamicLayerInfos) {
                  //    dynamicLayerInfos = usaLayer.createDynamicLayerInfosFromLayerInfos();
                  //}
                  //var dynamicLayerInfo = new DynamicLayerInfo();
                  //dynamicLayerInfo.id = 0;
                  //dynamicLayerInfo.name = layerName;
                  //dynamicLayerInfo.source = layerSource;
                  //dynamicLayerInfos.push(dynamicLayerInfo);
                  //usaLayer.setDynamicLayerInfos(dynamicLayerInfos, true);
                  //drawingOptions = new LayerDrawingOptions();
                  ////---------- Dynamic layer

                  ////---------- Dynamic layer -- (1) SimpleRenderer
                  //drawingOptions.renderer = new SimpleRenderer(
                  // new SimpleFillSymbol("solid", null,
                  //    new Color([255, 0, 255, 0.75]) // fuchsia lakes!
                  // ));
                  ////---------- Dynamic layer -- (1) SimpleRenderer

                  ////---------- Dynamic layer -- (2) ClassBreaksRenderer
                  //drawingOptions.renderer = m_renderer;
                  ////---------- Dynamic layer -- (2) ClassBreaksRenderer

                   ////---------- Dynamic layer
                  //options = [];
                  //options[0] = drawingOptions;
                  //usaLayer.setLayerDrawingOptions(options);
                  //map.addLayer(usaLayer);
                  ////---------- Dynamic layer

              }
          });
    </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">
          <button id="layer"
                    data-dojo-type="dijit/form/Button">
              Add Layer
            </button>
        </div>
      </div>
    </div>
</body>
[/HTML]

tomwang1 · ‎03-24-2014

It also works for ArcGISDynamicMapServiceLayer with SimpleRenderer.

[HTML]
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        color: #444;
        position: absolute;
        font-family: arial;
        height: 32px;
        left: 30px;
        top: 35px;
        width: 97px;
        z-index: 40;
      }
    </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "esri/layers/FeatureLayer",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/layers/DynamicLayerInfo",
          "esri/layers/TableDataSource",
          "esri/layers/LayerDataSource",
          "esri/layers/LayerDrawingOptions",
          "esri/renderers/ClassBreaksRenderer",
          "esri/renderers/SimpleRenderer",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/SimpleLineSymbol",
          "dojo/dom",
          "dojo/dom-construct",
          "dojo/dom-style",
          "dojo/parser",
          "dojo/query",
          "dojo/_base/array",
          "dojo/_base/Color",
          "dojo/dnd/Source",
          "dijit/registry",
          "dijit/form/Button",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/domReady!"
        ],
          function (
            Map, FeatureLayer, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,
            DynamicLayerInfo,TableDataSource, LayerDataSource, LayerDrawingOptions,
            ClassBreaksRenderer,SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, dom, domConstruct,
            domStyle, parser, query, arrayUtils, Color, Source, registry
        ) {

              parser.parse();

              var dndSource, layerLookup, dynamicLayerInfos;

              map = new Map("map", {
                  center: [-93.636, 46.882],
                  zoom: 4,
                  slider: false
              });

              var basemapLayer = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
              map.addLayer(basemapLayer);


              registry.byId("layer").on("click", addLayer);

              function addLayer() {
                  var layerName, dataSource, layerSource, options, drawingOptions;

                  // disable the "Add" button
                  registry.byId("layer").set("disabled", true);

                  var symbol = new SimpleFillSymbol();
                  symbol.setColor(new Color([150, 150, 150, 0.5]));
                  var m_renderer = new ClassBreaksRenderer(symbol, "objectid");
                  m_renderer.addBreak(0, 1, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
                  m_renderer.addBreak(1, 5, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
                  m_renderer.addBreak(5, 10, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
                  m_renderer.addBreak(10, 20, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
                  m_renderer.addBreak(20, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

                  //define the layer's data source from a table
                  var dataSource = new TableDataSource();
                  dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2";
                  dataSource.dataSourceName = "ss6.gdb.Lakes";
                  var layerSource = new LayerDataSource();
                  layerSource.dataSource = dataSource;

                  ////---------- feature layer
                  //var urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/dynamicLayer";
                  //var featureLayer = new FeatureLayer(urlDyn, {
                  //    mode: FeatureLayer.MODE_ONDEMAND,
                  //    outFields: ["*"],
                  //    source: layerSource
                  //});
                  //featureLayer.setRenderer(m_renderer);
                  //map.addLayer(featureLayer);
                  ////----------feature layer

                  //---------- Dynamic layer
                  layerName = "add a new layer from database";
                  var usaLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                  { "id": "NEW LAYER" });
                  usaLayer.setVisibleLayers([0]);
                  if (!dynamicLayerInfos) {
                      dynamicLayerInfos = usaLayer.createDynamicLayerInfosFromLayerInfos();
                  }
                  var dynamicLayerInfo = new DynamicLayerInfo();
                  dynamicLayerInfo.id = 0;
                  dynamicLayerInfo.name = layerName;
                  dynamicLayerInfo.source = layerSource;
                  dynamicLayerInfos.push(dynamicLayerInfo);
                  usaLayer.setDynamicLayerInfos(dynamicLayerInfos, true);
                  drawingOptions = new LayerDrawingOptions();
                  //---------- Dynamic layer

                  //---------- Dynamic layer -- (1) SimpleRenderer
                  drawingOptions.renderer = new SimpleRenderer(
                    new SimpleFillSymbol("solid", null,
                      new Color([255, 0, 255, 0.75]) // fuchsia lakes!
                    ));
                  //---------- Dynamic layer -- (1) SimpleRenderer

                  ////---------- Dynamic layer -- (2) ClassBreaksRenderer
                  //drawingOptions.renderer = m_renderer;
                  ////---------- Dynamic layer -- (2) ClassBreaksRenderer

                   //---------- Dynamic layer
                  options = [];
                  options[0] = drawingOptions;
                  usaLayer.setLayerDrawingOptions(options);
                  map.addLayer(usaLayer);
                  //---------- Dynamic layer

              }
          });
    </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">
          <button id="layer"
                    data-dojo-type="dijit/form/Button">
              Add Layer
            </button>
        </div>
      </div>
    </div>
</body>
[/HTML]

tomwang1 · ‎03-24-2014

it doesn't for ArcGISDynamicMapServiceLayer with ClassBreaksRenderer. Please advise!

Thanks,

Tom

[HTML]
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        color: #444;
        position: absolute;
        font-family: arial;
        height: 32px;
        left: 30px;
        top: 35px;
        width: 97px;
        z-index: 40;
      }
    </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "esri/layers/FeatureLayer",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/layers/DynamicLayerInfo",
          "esri/layers/TableDataSource",
          "esri/layers/LayerDataSource",
          "esri/layers/LayerDrawingOptions",
          "esri/renderers/ClassBreaksRenderer",
          "esri/renderers/SimpleRenderer",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/SimpleLineSymbol",
          "dojo/dom",
          "dojo/dom-construct",
          "dojo/dom-style",
          "dojo/parser",
          "dojo/query",
          "dojo/_base/array",
          "dojo/_base/Color",
          "dojo/dnd/Source",
          "dijit/registry",
          "dijit/form/Button",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/domReady!"
        ],
          function (
            Map, FeatureLayer, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,
            DynamicLayerInfo,TableDataSource, LayerDataSource, LayerDrawingOptions,
            ClassBreaksRenderer,SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, dom, domConstruct,
            domStyle, parser, query, arrayUtils, Color, Source, registry
        ) {

              parser.parse();

              var dndSource, layerLookup, dynamicLayerInfos;

              map = new Map("map", {
                  center: [-93.636, 46.882],
                  zoom: 4,
                  slider: false
              });

              var basemapLayer = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
              map.addLayer(basemapLayer);


              registry.byId("layer").on("click", addLayer);

              function addLayer() {
                  var layerName, dataSource, layerSource, options, drawingOptions;

                  // disable the "Add" button
                  registry.byId("layer").set("disabled", true);

                  var symbol = new SimpleFillSymbol();
                  symbol.setColor(new Color([150, 150, 150, 0.5]));
                  var m_renderer = new ClassBreaksRenderer(symbol, "objectid");
                  m_renderer.addBreak(0, 1, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
                  m_renderer.addBreak(1, 5, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
                  m_renderer.addBreak(5, 10, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
                  m_renderer.addBreak(10, 20, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
                  m_renderer.addBreak(20, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

                  //define the layer's data source from a table
                  var dataSource = new TableDataSource();
                  dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2";
                  dataSource.dataSourceName = "ss6.gdb.Lakes";
                  var layerSource = new LayerDataSource();
                  layerSource.dataSource = dataSource;

                  ////---------- feature layer
                  //var urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/dynamicLayer";
                  //var featureLayer = new FeatureLayer(urlDyn, {
                  //    mode: FeatureLayer.MODE_ONDEMAND,
                  //    outFields: ["*"],
                  //    source: layerSource
                  //});
                  //featureLayer.setRenderer(m_renderer);
                  //map.addLayer(featureLayer);
                  ////----------feature layer

                  //---------- Dynamic layer
                  layerName = "add a new layer from database";
                  var usaLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                  { "id": "NEW LAYER" });
                  usaLayer.setVisibleLayers([0]);
                  if (!dynamicLayerInfos) {
                      dynamicLayerInfos = usaLayer.createDynamicLayerInfosFromLayerInfos();
                  }
                  var dynamicLayerInfo = new DynamicLayerInfo();
                  dynamicLayerInfo.id = 0;
                  dynamicLayerInfo.name = layerName;
                  dynamicLayerInfo.source = layerSource;
                  dynamicLayerInfos.push(dynamicLayerInfo);
                  usaLayer.setDynamicLayerInfos(dynamicLayerInfos, true);
                  drawingOptions = new LayerDrawingOptions();
                  //---------- Dynamic layer

                  ////---------- Dynamic layer -- (1) SimpleRenderer
                  //drawingOptions.renderer = new SimpleRenderer(
                  // new SimpleFillSymbol("solid", null,
                  //    new Color([255, 0, 255, 0.75]) // fuchsia lakes!
                  // ));
                  ////---------- Dynamic layer -- (1) SimpleRenderer

                  //---------- Dynamic layer -- (2) ClassBreaksRenderer
                  drawingOptions.renderer = m_renderer;
                  //---------- Dynamic layer -- (2) ClassBreaksRenderer

                   //---------- Dynamic layer
                  options = [];
                  options[0] = drawingOptions;
                  usaLayer.setLayerDrawingOptions(options);
                  map.addLayer(usaLayer);
                  //---------- Dynamic layer

              }
          });
    </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">
          <button id="layer"
                    data-dojo-type="dijit/form/Button">
              Add Layer
            </button>
        </div>
      </div>
    </div>
</body>
[/HTML]

tomwang1 · ‎03-24-2014

Sounds like I need to setup a proxy?

Noah-Sager · ‎03-24-2014

A proxy certainly wouldn't hurt. I'm digging into this more now.

Noah-Sager · ‎03-24-2014

In thinking this over some more, I think the issue is related to the way the renderer is applied.

Looking at the sample, I see this sample logic, involving the drawingOptions instead of the setRenderer method, for applying the renderer to a dynamic layer:

var urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";
var dynamicLayer = new ArcGISDynamicMapServiceLayer(urlDyn);
dynamicLayer.setVisibleLayers([0]);
                  
var optionsArray = [];
var drawingOptions = new esri.layers.LayerDrawingOptions();
drawingOptions.renderer = m_renderer;
optionsArray[2] = drawingOptions;
                 
dynamicLayer.setLayerDrawingOptions(optionsArray);
map.addLayer(dynamicLayer);

tomwang1 · ‎03-24-2014

Yes, setLayerDrawingOptions is for Dynamic Layer and setRenderer for Feature Layer. Why the code works for ArcGISDynamicMapServiceLayer with SimpleRenderer, not for ArcGISDynamicMapServiceLayer with ClassBreaksRenderer?