nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Problem to Set a ClassBreaksRenderer for Dynamic Layer

tomwang1

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]

Vind meer berichten getagd met

Accepted answers

JianHuang

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.

All comments

tomwang1

Hi,

Sorry I have to come back this question. Yes, the code works when to use "classificationDefinition". But how to do it if I would like to create my own classbreaks? Please advise!

[HTML]
var source = dynamicLayerInfo.source;
var generateRendererTask = new GenerateRendererTask(mapServiceUrl + "/dynamicLayer", {
   "source": source
});
var params = new GenerateRendererParameters();
//set the params here
params.classificationDefinition = ...

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);
});
[/HTML]

For example, classbreaks like this:
[HTML]
var m_renderer = new ClassBreaksRenderer(symbol, "field name");
                  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(6, 10, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
                  m_renderer.addBreak(11, 20, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
                  m_renderer.addBreak(21, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
[/HTML]

tomwang1

Hi Noah Sager and Huang Jian,

Supper thanks for your help on this. Really appreciated! I don't know how to mark Noah and Jian both as a correct answer. Your guys pointed me to a right direction.

Tom

JianHuang

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.

tomwang1

Hi Noah,

FeatureLayer dose not performed well in our case. To set a classBreaksRenderer for dynamic layer works perfectly in Esri Silverlight API.

ArcGIS Server Rest API is the source of all esri API. I am really looking forward to see Esri JavaScript Team to have a solution. we are in process of creating a new version of JavaScript to replace our Silverlight version.

Also I would like to use GenerateRendererTask for Dynamic Layer, not only for Feature Layer. Please advise!!!

Thanks,

Tom

Noah Sager

Hi Tom,

Yes, this is a bit confusing. The reason for this difference is that while FeatureLayers are graphics that can be modified (renderer) on the clientside, DynamicMapServiceLayers are graphics that come from ArcGIS Server (a PNG or other raster format), and can be modified on the serverside.

I think the SimpleRenderer is able to be set for DynamicMapServiceLayers because it is changing all symbology to one new symbology, whereas the ClassBreaksRenderer is actually requiring some processing and decision making, so it requires a LayerDrawingOptions method to do some work on the serverside.

Typically, we recommend customers work with FeatureLayers when there is a need for end users to interact with clientside geometry and attributes immediately, such as with the ClassBreaksRenderer.

I hope this clarifies the issue.

-Noah

tomwang1

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

Noah Sager

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

Noah Sager

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

tomwang1

Sounds like I need to setup a proxy?

tomwang1

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

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

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

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?

Noah Sager

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.