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!
