topic Re: Server-side rendering with UniqueValueRenderer fails for more then three countrie in ArcGIS JavaScript Maps SDK Questions

Server-side rendering with UniqueValueRenderer fails for more then three countries

RaphaelDürst — Wed, 15 May 2013 05:53:52 GMT

Since feature layer will always lay on top of ArcGISDynamicMapServiceLayers, I tried to do the country coloring on the server side. It works just fine for three countries, once I specify four or more countries to the UniqueValueRenderer it fails. The rendering works fine until a fourth country is added to the UniqueValueRenderer. Any light into this mistery is most appreciated!

Regards,
Jörg

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://www.comfone.com/map/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" type="text/css" href="https://www.comfone.com/map/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" />
    
    
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
        dojo.require("dojo.dnd.Source");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.form.Button");
        dojo.require("esri.map");
        var map;

        // one global for persistent app variables
        var app = {};

        function init() {
            alert("Only three countries can be added to the renderer. The server side rendering fails when more are added");
            map = new esri.Map("map", {
                extent: new esri.geometry.Extent({ "xmin": -2810436, "ymin": 3960049, "xmax": 4233999, "ymax": 7917653, "spatialReference": { "wkid": 102100} })
            });

            map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://www.comfone.com/arcgis/rest/services/basemap_key2roam_platform/MapServer"));

            var defaultSymbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_NULL);
            defaultSymbol.outline.setStyle(esri.symbol.SimpleLineSymbol.STYLE_NULL);

            var renderer = new esri.renderer.UniqueValueRenderer(defaultSymbol, "iso_a3", "");
            renderer.addValue('CZE', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#71BF00')));
            renderer.addValue('DEU', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#71BF00')));
            renderer.addValue('FRA', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#71BF00')));

            //only three countries can be added to the renderer. The server side rendering fails when more are added.
            // renderer.addValue('USA', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#71BF00')));
            // renderer.addValue('CHE', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#71BF00')));

            var worldCountriesLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://www.comfone.com/arcgis/rest/services/world_countries_detailed/MapServer", {
                outFields: ["iso_a3"]
            });

            map.addLayer(worldCountriesLayer);

            var optionsArray = [];
            var drawingOptions = new esri.layers.LayerDrawingOptions();
            drawingOptions.renderer = renderer;
            optionsArray[0] = drawingOptions;

            worldCountriesLayer.setLayerDrawingOptions(optionsArray);

            var labelingLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://www.comfone.com/arcgis/rest/services/world_countries_labeling/MapServer", {"opacity":1.0});
            labelingLayer.id = "labelingLayer";
            map.addLayer(labelingLayer);

        }

        dojo.ready(init);
    </script>
</head>
<body class="tundra">
    <div id="map" class="claro" style="width: auto; height: 900px; border: 1px solid #000;
        margin-left: 5px; margin-right: 5px; position: relative;">
    </div>
</body>
</html>

Re: Server-side rendering with UniqueValueRenderer fails for more then three countrie

derekswingley1 — Wed, 15 May 2013 13:17:52 GMT

Check out this post and thread: http://forums.arcgis.com/threads/42685-Limit-on-layerDefinitions-Length?p=145738&viewfull=1#post145738

I'm recommending that because I see a 404 for the map image in dev tools when the renderer includes more than three countries (which makes the URL for the request longer).

Re: Server-side rendering with UniqueValueRenderer fails for more then three countrie

RaphaelDürst — Thu, 16 May 2013 05:59:32 GMT

Thanks for testing and replying!

I will try to create a virtual output directory using ArcCatalog to tackle this problem as stated in the thread.

Re: Server-side rendering with UniqueValueRenderer fails for more then three countrie

RaphaelDürst — Wed, 17 Jul 2013 13:55:11 GMT

I took that over (here internally) and it implemented it as you said and it worked out fine. Thanks a lot!

The issue that remains is that it does not work with the Internet Explorer (with all the other browsers it works properly). When I compare the tracing from the browsers I can see that when it works the browsers sends a request to https://www.comfone.com/arcgis/rest/services/country_outline/MapServer/export? (with is responded by the arcgisoutput directory from the server). But I couldn't find the same request using Internet Explorer. Did I miss something in my script that is required for IE, but not for the other browsers? Thanks!

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>IE Issue</title>
    <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox/form/resources/RangeSlider.css">
    <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/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;
        position: absolute;
        font-family: arial;
        height: 210px;
        left: 30px;
        margin: 5px;
        padding: 10px;
        bottom: 30px;
        width: 320px;
        z-index: 40;
      }
      .note { font-size: 80%; padding: 0 0 10px 0; }
      #slider {
        color: #666;
        margin: 5px auto;
        padding: 3px;
      }
      #appSliderLabel { padding: 0 0 10px 0; }
      #maxLabel { display: inline-block; margin: 0 0 0 -30px;}
      #minLabel { display: inline-block; margin: 0 0 0 30px;}
      #breakInfo { padding: 20px 0 0 0; }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>




    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.HorizontalRuleLabels");
      dojo.require("dojox.form.RangeSlider");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.renderer");
      dojo.require("esri.dijit.Legend");

      // one global for persistent app variables
      var app = {};

     var map;
      var highlightSymbol;
        var highlightGraphic;
        var mapClickEventHandle;
        var mode = 2;
        var companynetwork = 1;


        function init() {
                      var lods = [
                    {
                        "level": 3,
                        "resolution": 19567.87924099992,
                        "scale": 7.3957190948944E7
                    },
                    {
                        "level": 4,
                        "resolution": 9783.93962049996,
                        "scale": 3.6978595474472E7
                    },
                    {
                        "level": 5,
                        "resolution": 4891.96981024998,
                        "scale": 1.8489297737236E7
                    },
                    {
                        "level": 6,
                        "resolution": 2445.98490512499,
                        "scale": 9244648.868618
                    },
                    {
                        "level": 7,
                        "resolution": 1222.992452562495,
                        "scale": 4622324.434309
                    },
                    {
                        "level": 8,
                        "resolution": 611.4962262813797,
                        "scale": 2311162.217155
                    }
                ];

            map = new esri.Map("map", {
                extent: new esri.geometry.Extent({ "xmin": -2810436, "ymin": 3960049, "xmax": 17853544, "ymax": 20832657, "spatialReference": { "wkid": 102100} }),
                center: [7.07, 51.2],
                zoom: 0,
                lods: lods
            });

            map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://www.comfone.com/arcgis/rest/services/basemap_basic/MapServer"));

            var defaultSymbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_NULL);
            defaultSymbol.outline.setStyle(esri.symbol.SimpleLineSymbol.STYLE_NULL);

            var renderer = new esri.renderer.UniqueValueRenderer(defaultSymbol, "iso_a3", "");
            renderer.addValue('USA', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
            renderer.addValue('CAN', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
            renderer.addValue('DEU', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
            renderer.addValue('ITA', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
            renderer.addValue('CHE', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));

            var worldCountriesLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://www.comfone.com/arcgis/rest/services/country_outline/MapServer", {
                outFields: ["iso_a3"]
            });

            var optionsArray = [];
            var drawingOptions = new esri.layers.LayerDrawingOptions();
            drawingOptions.renderer = renderer;
            optionsArray[0] = drawingOptions;
            worldCountriesLayer.setLayerDrawingOptions(optionsArray);
            map.addLayer(worldCountriesLayer);

            var labelingLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://www.comfone.com/arcgis/rest/services/label/MapServer", {"opacity":1.0});
            labelingLayer.id = "labelingLayer";
            map.addLayer(labelingLayer);
        }

        dojo.ready(init);
    </script>

    </head>

    <div id="map" class="claro" style="width: auto; height: 900px; border: 1px solid #000;
        margin-left: 5px; margin-right: 5px; position: relative;">

    </div>
</body>