dmcgill

Identity Manager and ArcGIS Server JS API Table of Contents (TOC) Widget

Discussion created by dmcgill on Mar 27, 2013
Latest reply on Sep 17, 2013 by robert.claypool
I have a little problem that I need a little help with.
I tested my code in IE v.9, Chrome v.25, and Firefox v.19, w/ Firebug v.1.11.2.

After Identity Manager Sign In, the TOC Widget does not display the images for the Layers in IE, but does show in Chrome and Firefox.

[ATTACH=CONFIG]22982[/ATTACH]


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>testTOCwidget</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/soria/soria.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" />
    <style type="text/css">
        html, body { height: 100%; width: 100%; margin: 0px; padding: 0px;
        }
        body {
            overflow: hidden; font-family: Trebuchet; font-size: 10pt;
        }
        #mainWindow { height: 100%; width: 100%; margin: 0px; padding: 0px;
        }
        #header { height: 10%; margin: 1px; border: solid 1px #0033FF;
        }
        #subheader { text-align: left;
        }
        #leftPane { margin: 1px; border: solid 1px #0033FF;
        }
        #map { margin: 1px; border: solid 1px #0033FF;
        }
        #rightPane { margin: 1px; border: solid 1px #0033FF;           
        }
        #footer { height: 20%; border: solid 1px #0033FF;
        }
        #scaleDiv .agsjsTOCOutOfScale { display: none;
        }
    </style>
    <script type="text/javascript">
        var dojoConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs/build/agsjs'
                //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load
            }]
        };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.4"></script>
    <script type="text/javascript">
        dojo.require("esri.IdentityManager");
        dojo.require("esri.map");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("esri.dijit.Legend");
        dojo.require("dojo.fx");// needed if use jsapi 3.0
        dojo.require("dojo.parser");
        dojo.require("agsjs.dijit.TOC");
        dojo.require("agsjs.layers.GoogleMapsLayer");
        function init() {
            var initialExtent = new esri.geometry.Extent({ "xmin": -1.050630206915668E7, "ymin": 4756813.366129731, "xmax": -1.0493849868022233E7, "ymax": 4766203.981076501, "spatialReference": { "wkid": 102100 } });
            map = new esri.Map("map", { nav: false, extent: initialExtent, logo: false, showAttribution: false });
            var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(baseMapLayer);
            var dynmap1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://xyzgis.com/arcgis/rest/services/CoPWSD4/CoPWSD4_WaterDistribution/MapServer");
            map.addLayers([dynmap1]);
            dojo.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: dynmap1,
                        title: "ClayCoPWSD4",
                        slider: true
                    }]
                }, 'tocDiv');
                toc.startup();
                var legend = new esri.dijit.Legend({
                    map: map,
                    layerInfos: [{ layer: dynmap1, title: "" }]
                }, "legendDiv");
                legend.startup();
            })
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body class="soria">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">        
        <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> This HTML file is located in the C:\inetpub\wwwroot\ <p> The "agsjs" folder, for Table of Contents, was copied into C:\inetpub\wwwroot\</p> This is the link to TOC: http://gmaps-utility-gis.googlecode.com/svn-history/r354/trunk/agsjs/examples/toc.html                
            <div id="subheader"> Identity Manager and ArcGIS Server JS API Table of Contents (TOC) Widget works in Firefox and Chrome, but Internet Explorer does not display the images for Layers after Identity Manager Sign In popup window. </div>
        </div>
        <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 19%">
            <div id="legendDiv"></div>
        </div>
        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" >            
        </div>
        <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width: 19%">
            <div id="tocDiv"></div>
        </div>
        <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height: 20%"> Search results will appear here. </div>
    </div>
</body>
</html>

Attachments

Outcomes