Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

First time ArcGIS js API user here. The app I am building loads a series of FeatureLayer on top of an ArcGISDynamicMapServiceLayer. I based my code on the Class Breaks Renderer sample here.

The app is simply supposed to load relevant symbology information based on the attribute the user chooses.

    <script type="text/javascript" src=""></script>
    <script type="text/javascript">


        var map;
        var basemap;
        var basemapServiceSource;
        var featuremapServiceSource;
        var renderer;
        var featuremapAdded;

        function init() {

            // for now, these are referring to a single source
            basemapServiceSource = "http://co-gis-01/ArcGIS/rest/services/dev_ExIS/exis2/MapServer";
            featuremapServiceSource = "http://co-gis-01/ArcGIS/rest/services/dev_ExIS/exis2/MapServer";

            //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service          
            basemap = new esri.layers.ArcGISDynamicMapServiceLayer(basemapServiceSource);

            map = new esri.Map("map", {

                    // remove logo


                IDs of Layers for http://co-gis-01/ArcGIS/rest/services/dev_ExIS/exis/MapServer
                0   Regions (labelled, no symbology)
                1   Bridge Condition
                2   Road Condition
                3   Road Roughness
                layers 4, 5, 6 are invisible, don't use

            //[min, max, r, g, b, a]
            // min <= x < max
            // edit this to change the colors for the ranges
            var classBreak = [
                [100, 210, 255, 0, 0, 0.25],
                [210, 410, 255, 128, 0, 0.25],
                [410, 710, 255, 255, 0, 0.25],
                [710, 1000, 0, 255, 0, 0.25]
            featuremapAdded = false;

            // executes function on onLoad event
            dojo.connect(map, 'onLoad', function(theMap) { 

                //resize the map when the browser resizes
                dojo.connect(dijit.byId('map'), 'resize', map,map.resize);

                // these must be execute only after the map has been loaded

            // executes function on onLoad event
            dojo.connect(map, "onLoad", showFeatureRender(1));

        function showFeatureRender(layerID) {

            // define all region id
            var adminID = new Array(
                    73, 2, 187, 346, 478, 651, 854,
                    1673, 969, 1128, 1310, 1485, 1776,
                    1874, 1989, 2073

            // if a region information has already been added, remove it first
            if (featuremapAdded)    {

                // get layer ids and remove all
                while (map.graphicsLayerIds.length > 0) {

                    var graphLayerID = map.graphicsLayerIds[0];

            // add each region layers one by one
            for (var i = 0; i < adminID.length; i++)    {

                var infoTemplate = new esri.InfoTemplate("${NAME}", "${*}");
                var featuremap = new esri.layers.FeatureLayer(featuremapServiceSource + "/" + String(layerID), {
                    mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["*"],
                    infoTemplate: infoTemplate

                // filter all regions but one
                // REGION attribute here refers to the attribute in the Region layer of the geodatabase, not exis' map_data table
                featuremap.setDefinitionExpression("ADMIN_ID = " + String(adminID[i]));

                // add the region as a layer

                // set this flag to true
                featuremapAdded = true;

        function settleClassBreaks(classBreak)  {
            sets the symbolobgy render based on the classBreak parameter

            var symbol = new esri.symbol.SimpleFillSymbol();
            renderer = new esri.renderer.ClassBreaksRenderer(symbol, "value");

            var symbol = new esri.symbol.SimpleFillSymbol();

            for (var i = 0; i < classBreak.length; i++) {

                var fillSymbol = new esri.symbol.SimpleFillSymbol(
                    new esri.symbol.SimpleLineSymbol().setStyle(esri.symbol.SimpleLineSymbol.STYLE_NULL),
                    new dojo.Color([classBreak[i][2], classBreak[i][2], classBreak[i][3], classBreak[i][4]])
                renderer.addBreak(classBreak[i][0], classBreak[i][5], fillSymbol);



    <div id="map" style="width:600px; height:600px; border:1px solid #000">

    <br />

    <form method="POST" action="ENTER PAGE NAME">
        <input type="radio" name="layer" value="bridgecondition" onclick="showFeatureRender(1);" checked>Bridge Condition
        <input type="radio" name="layer" value="roadcondition" onclick="showFeatureRender(2);">Road Condition
        <input type="radio" name="layer" value="roadroughness" onclick="showFeatureRender(3);">Road Roughness



The loop code that loads each FeatureLayer from a single mapservice is in the showFeatureRender function (there is a need to do so instead of loading the entire layer because each sublayer would need to have specific onClick event). This works fine and fast in Firefox 13 and Chrome 19.x.

The problem is with IE 8 and 9. Testing on both versions and on IETester, it loads horrendously slow (about 2 mins) and even freezes the browser, showing an unresponsive script dialog . If the script is allowed to continue, it will not load some of the FeatureLayers (unloaded sublayers remain white/blank).

Here is a comparison screenshot to describe the problem with IE: (pic)

The application does connect to another db using oledb, but there are only 17 records involved when joining. Too small, I think, to cause this horrible delay in loading. Can anyone enlighten me as to what is with IE not present in FF and Chrome that causes this issue? I realize that there is an api 3.0 version already, but using it causes no maps to load at all in all browsers, so I'm retaining 2.8 for now.


share|improve this question

closed as off-topic by PolyGeo, Fezter, Devdatta Tengshe, whuber Jun 30 '13 at 13:57

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions describing a problem that can't be reproduced and seemingly went away on its own (or went away when a typo was fixed) are off-topic as they are unlikely to help future readers." – PolyGeo, Fezter, Devdatta Tengshe, whuber
If this question can be reworded to fit the rules in the help center, please edit the question.

I have tried on demand mode but with it, there were actually no features being rendered (all browsers), only snapshot modes renders them. Instead of a loop, I tried loading each FeatureLayer individually (while not rendering the others), just to test if each can be displayed. The results indicate that those FeatureLayers not rendered in the picture are just the ones causing the problem in IE: not rendering and causing the performance issue. I can't figure out what special about these features that makes IE unable to draw them. – NeoJigglypuff Jun 20 '12 at 23:04