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

DavidMcGill · ‎03-27-2013

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>

RobertClaypool · ‎09-17-2013

Hi David,

In the TOC source, you will see src = this.rootLayer.url + '/' + this.serviceLayer.id + '/images/' + src; This line is only executed if the browser is IE. (For other browsers, they just inline the image as a PNG encoded in base64.)

By adding our token as a query string parameter, we can make the URL work with secured services:

src = this.rootLayer.url + '/' + this.serviceLayer.id + '/images/' + src;
if (esri.id) {
  // Support secured services too
  var credential = esri.id.findCredential(src);
  if (credential && credential.token) {
   src = src + '/?token=' + credential.token;
  }
}

This code is ** only moderately tested. ** It works on my machine!