adding featurelayer is slow and produces errors for ie

Egan_LouisFajardo — Sat, 11 Dec 2021 22:07:31 GMT

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));
    
    // 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[2], classBreak[3], classBreak[4], classBreak[5]])
    );
    renderer.addBreak(classBreak[0], classBreak[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!

Re: adding featurelayer is slow and produces errors for ie

derekswingley1 — Wed, 20 Jun 2012 13:40:59 GMT

Have you tried using ONDEMAND mode? Even though you only have 17 records, you're using polygons and I'm guessing those are pretty detailed geometries. Loading a couple of MB of geometry would be plenty to cause what you're describing in IE.

Since you're using 2.8, ONDEMAND mode will generalize features on the fly for the map's current zoom level and feature geometry will be updated as the map zoom level changes. SNAPSHOT mode does not do this and retrieves each feature's full geometry. Using ONDEMAND, you should see a performance improvement in all browsers, not just IE.

Re: adding featurelayer is slow and produces errors for ie

Egan_LouisFajardo — Wed, 20 Jun 2012 22:02:25 GMT

Yes, I first used on demand mode while I was coding. 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.

topic adding featurelayer is slow and produces errors for ie in ArcGIS JavaScript Maps SDK Questions

adding featurelayer is slow and produces errors for ie

Re: adding featurelayer is slow and produces errors for ie

Re: adding featurelayer is slow and produces errors for ie