Can someone help me determine why the following code won't work in IE. It works fine in Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>change feature layer selection color on the fly</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
<script type="text/javascript">djConfig = { parseOnLoad:true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
var selectionToolbar, featureLayer;
var syms = {}
var selectionToolbar2, featureLayer2;
var syms2 = {}
function init() {
// populate the object used to set the
// feature layer selection symbol
syms.red = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5]));
syms.blue = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5]));
syms.green = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5]));
syms2.red = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0,0.5]));
syms2.blue = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255,0.5]));
syms2.green = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,255,0,0.5]));
var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) );
var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true });
dojo.connect(map, "onLoad", initSelectToolbar);
dojo.connect(map, "onLoad", initSelectToolbar2);
var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(baseMapLayer);
var content = "<b>Status</b>: ${STATUS}" +
"<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
"<br><b>Total Acres</b>: ${APPROXACRE}" +
"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);
featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
featureLayer.setSelectionSymbol(syms[dojo.byId('color-select').value]);
dojo.connect(featureLayer, "onSelectionClear", function(features) {
});
//*
// connect to the drop-down's onchange event and
// change the feature layer's selection color
dojo.connect(dojo.byId('color-select'), 'onchange', function(evt) {
featureLayer.setSelectionSymbol(syms[evt.target.value]);
});
//*/
map.addLayer(featureLayer);
featureLayer2 = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND
});
featureLayer2.setDefinitionExpression("FIELD_NAME is not null");
featureLayer2.setSelectionSymbol(syms2[dojo.byId('color-select2').value]);
dojo.connect(featureLayer2, "onSelectionClear", function(features) {
});
//*
// connect to the drop-down's onchange event and
// change the feature layer's selection color
dojo.connect(dojo.byId('color-select2'), 'onchange', function(evt) {
featureLayer2.setSelectionSymbol(syms2[evt.target.value]);
});
//*/
map.addLayer(featureLayer2);
}
function initSelectToolbar(map) {
selectionToolbar = new esri.toolbars.Draw(map);
var selectQuery = new esri.tasks.Query();
dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_ADD);
});
}
function initSelectToolbar2(map) {
selectionToolbar2 = new esri.toolbars.Draw(map);
var selectQuery2 = new esri.tasks.Query();
dojo.connect(selectionToolbar2, "onDrawEnd", function(geometry) {
selectionToolbar2.deactivate();
selectQuery2.geometry = geometry;
featureLayer2.selectFeatures(selectQuery2, esri.layers.FeatureLayer.SELECTION_ADD);
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<select id="color-select">
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
<button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>
<button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br>
<select id="color-select2">
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
<button dojoType="dijit.form.Button" onClick="selectionToolbar2.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>
<button dojoType="dijit.form.Button" onClick="featureLayer2.clearSelection();">Clear Selection</button>
<div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
<span id="messages"></span>
</body>
</html>
The selection is working but it isn't adding color.ThanksJaclyn