Community

UniqueValueRenderer issue with ArcGISDynamicMapServiceLayer

1112
1
Jump to solution
03-13-2014 03:54 AM
sumitzarkar
by
Occasional Contributor
‎03-13-2014 03:54 AM
I am applying unique value renderer to ArcGISDynamicMapServiceLayer.
but i am not able to add more than two unique values to renderer. whenever i add more than two values in renderer layer is not getting rendered on map.
Please Help...


Below is my Code :
[HTML]

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Unique Value Renderer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
        html, body, #map
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;
        require([
        "esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/LayerDrawingOptions", "esri/InfoTemplate",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/renderers/UniqueValueRenderer",
        "dojo/parser", "dojo/_base/Color",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
        Map, FeatureLayer, ArcGISDynamicMapServiceLayer, LayerDrawingOptions, InfoTemplate,
        SimpleLineSymbol, SimpleFillSymbol,
        UniqueValueRenderer,
        parser, Color
      ) {
          parser.parse();

          map = new Map("map", {
              basemap: "streets",
              center: [-95.625, 39.243],
              zoom: 4,
              slider: false
          });
          map.on("load", addFeatureLayer);

          function addFeatureLayer() {



              // add US States as a dynamic map service layer
              var urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
              var usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
                  id: "us_states",

                  visible: true
              });
              usaLayer.setVisibleLayers([3]);

              var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.2]));


              //create renderer
              var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");
             

              renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
             renderer.addValue("Mountain", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));
             //renderer.addValue("New England", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));
             //renderer.addValue("South Atlantic", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
             //renderer.addValue("Middle Atlantic", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));
             //renderer.addValue("East North Central", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));
             //renderer.addValue("West North Central", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
             //renderer.addValue("East South Central", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));
             //renderer.addValue("West South Central", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5])));

              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[3] = drawingOptions;
              usaLayer.setLayerDrawingOptions(optionsArray);

              map.addLayer(usaLayer);

              usaLayer.show();

          }


      });
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>



[/HTML]
0 Kudos
1 Solution

Accepted Solutions
sumitzarkar
by
Occasional Contributor
‎03-14-2014 12:32 PM
I got the Problem and Also Solution to it.
The Problem was, when we are adding more than 2-3 Values to renderer the Request to refresh or add the layer was getting failed due to content length of the request.
so to solve this problem i used proxy page.

Below is my solution:
  After applying renderer while adding the layer or refreshing it please set esri.config.defaults.io.alwaysUseProxy = true;
  Once you added the layer or refreshed you can set proxy to false again.


Working Sample:
[HTML]
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Unique Value Renderer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
        html, body, #map
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;
        require([
        "esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/LayerDrawingOptions", "esri/InfoTemplate",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/renderers/UniqueValueRenderer",
        "dojo/parser", "dojo/_base/Color",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
        Map, FeatureLayer, ArcGISDynamicMapServiceLayer, LayerDrawingOptions, InfoTemplate,
        SimpleLineSymbol, SimpleFillSymbol,
        UniqueValueRenderer,
        parser, Color
      ) {
          parser.parse();
          esri.config.defaults.io.proxyUrl = "proxy.ashx";
          map = new Map("map", {
              basemap: "streets",
              center: [-95.625, 39.243],
              zoom: 4,
              slider: false
          });
          map.on("load", addDynamicLayer);

          function addDynamicLayer() {

              // add US States as a dynamic map service layer
              var urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
              var usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
                  id: "us_states",

                  visible: true
              });
              usaLayer.setVisibleLayers([3]);

              var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.2]));
              //create renderer
              var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");
              renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
              renderer.addValue("Mountain", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));
              renderer.addValue("New England", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));
              renderer.addValue("South Atlantic", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
              renderer.addValue("Middle Atlantic", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));
              renderer.addValue("East North Central", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));
              renderer.addValue("West North Central", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
              renderer.addValue("East South Central", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));
              renderer.addValue("West South Central", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5])));

              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[3] = drawingOptions;
              usaLayer.setLayerDrawingOptions(optionsArray);

              //After applying renderer while adding the layer or refreshing it please set
              //esri.config.defaults.io.alwaysUseProxy = true;
              //Once you added the layer or refreshed you can set proxy to false again.

              esri.config.defaults.io.alwaysUseProxy = true;
              map.addLayer(usaLayer);
              esri.config.defaults.io.alwaysUseProxy = false;

          }
      });
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>

[/HTML]

View solution in original post

0 Kudos
1 Reply
sumitzarkar
by
Occasional Contributor
‎03-14-2014 12:32 PM
I got the Problem and Also Solution to it.
The Problem was, when we are adding more than 2-3 Values to renderer the Request to refresh or add the layer was getting failed due to content length of the request.
so to solve this problem i used proxy page.

Below is my solution:
  After applying renderer while adding the layer or refreshing it please set esri.config.defaults.io.alwaysUseProxy = true;
  Once you added the layer or refreshed you can set proxy to false again.


Working Sample:
[HTML]
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Unique Value Renderer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
        html, body, #map
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;
        require([
        "esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/LayerDrawingOptions", "esri/InfoTemplate",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/renderers/UniqueValueRenderer",
        "dojo/parser", "dojo/_base/Color",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
        Map, FeatureLayer, ArcGISDynamicMapServiceLayer, LayerDrawingOptions, InfoTemplate,
        SimpleLineSymbol, SimpleFillSymbol,
        UniqueValueRenderer,
        parser, Color
      ) {
          parser.parse();
          esri.config.defaults.io.proxyUrl = "proxy.ashx";
          map = new Map("map", {
              basemap: "streets",
              center: [-95.625, 39.243],
              zoom: 4,
              slider: false
          });
          map.on("load", addDynamicLayer);

          function addDynamicLayer() {

              // add US States as a dynamic map service layer
              var urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
              var usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
                  id: "us_states",

                  visible: true
              });
              usaLayer.setVisibleLayers([3]);

              var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.2]));
              //create renderer
              var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");
              renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
              renderer.addValue("Mountain", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));
              renderer.addValue("New England", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));
              renderer.addValue("South Atlantic", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
              renderer.addValue("Middle Atlantic", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));
              renderer.addValue("East North Central", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));
              renderer.addValue("West North Central", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
              renderer.addValue("East South Central", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));
              renderer.addValue("West South Central", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5])));

              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[3] = drawingOptions;
              usaLayer.setLayerDrawingOptions(optionsArray);

              //After applying renderer while adding the layer or refreshing it please set
              //esri.config.defaults.io.alwaysUseProxy = true;
              //Once you added the layer or refreshed you can set proxy to false again.

              esri.config.defaults.io.alwaysUseProxy = true;
              map.addLayer(usaLayer);
              esri.config.defaults.io.alwaysUseProxy = false;

          }
      });
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>

[/HTML]
0 Kudos