AnsweredAssumed Answered

Problem to Set a ClassBreaksRenderer for Dynamic Layer

Question asked by tomarcgis on Mar 24, 2014
Latest reply on Apr 30, 2014 by tomarcgis
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]

Outcomes