bindy

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

Discussion created by bindy on May 14, 2013
Latest reply on Jul 17, 2013 by bindy
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 type="text/javascript" src="https://www.comfone.com/map/arcgis_js_api/library/3.2/jsapi/init.js"></script>-->
    <!--  <script>var dojoConfig = { parseOnLoad: true };</script>-->
    <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>

Outcomes