NeoJigglypuff

adding featurelayer is slow and produces errors for ie

Discussion created by NeoJigglypuff on Jun 18, 2012
Latest reply on Jun 20, 2012 by NeoJigglypuff
Hi, first time ArcGIS 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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Map</title>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <script type="text/javascript">
 
 
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.FeatureLayer");
  dojo.require("esri.renderer");
  dojo.require("esri.graphic");

  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
     logo:false,
     extent:basemap.fullExtent
    });

   map.addLayer(basemap);

   /*
    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
   */
   basemap.setVisibleLayers([0]);

   //[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]
   ];   
   settleClassBreaks(classBreak);
   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
    map.disableMapNavigation();
    map.hidePanArrows();
    map.hideZoomSlider();
    map.setExtent(basemap.fullExtent);
   });
   
   // 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];
     map.removeLayer(map.getLayer(graphLayerID));
    }
   }
   
   // 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
    });
    featuremap.setRenderer(renderer);
    
    // 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
    map.addLayer(featuremap);

    // 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(
     esri.symbol.SimpleFillSymbol.STYLE_SOLID,
     new esri.symbol.SimpleLineSymbol().setStyle(esri.symbol.SimpleLineSymbol.STYLE_NULL),
     new dojo.Color([classBreak[i][2], classBreak[i][3], classBreak[i][4], classBreak[i][5]])
    );
    renderer.addBreak(classBreak[i][0], classBreak[i][1], fillSymbol);
   }
  }

  dojo.addOnLoad(init);
    </script>
  </head>
  
  <body>
  
 <div id="map" style="width:600px; height:600px; border:1px solid #000">
 </div>
  
 <br />

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

  </body>

</html>


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 (pic) and Chrome 19.x (pic).

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 (pic). If the script is allowed to continue, it will not load some of the FeatureLayers (pic) (unloaded sublayers remain white/blank).

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.

Thanks!

Outcomes