topic Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7 in ArcGIS JavaScript Maps SDK Questions

Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Wed, 20 Mar 2013 20:10:24 GMT

Hi,

At version 3.3 there could be an issue with the ArcGISTiledMapServiceLayer. When my app loads I set show/hide one of 4 layers that represents my base map layer. Throughout the use of the app the user can switch between those different layers (think: "streets", "hybrid", "topo", etc...). When they choose any of those options I toggle between the layer's visbility.

This works without fail in all browsers that we've tested, except for IE8 and IE7. Occasionally I will find that one of my ArcGISTiledMapServiceLayer objects is NULL when I try to hide/show it.

When the page loads it hides/shows those layers based on some setting for "streets", etc..."

This lead me back to the docs for the layer object and I wondered if my layers were not loaded properly because I didn't see any errors from the "onError" call back I had hooked up.

As a general question, why would my layer object be NULL (in IE8 and IE7) if my code between versions 2.8 and 3.3 never changed? Remember when the page loads up I wait to add the layers to the map until the map is ready, etc...

Another question is, what's with the documentation on ArcGISTiledMapServiceLayer? It seems to contradict itself with the code sample:

onLoad(layer) reads:

"Fires after layer properties for the layer are successfully populated. This event must be successful before the layer can be added to the map."

Then under code snippets:

"In Internet Explorer, due to resource caching, the onLoad event is fired as soon as the layer is constructed. Consequently you should check whether the layer's loaded property is true before registering a listener for the onLoad event:"

The code reads:

function init() {
  //setting initial extent in constructor
  var map = new esri.Map("mapDiv", { extent: new esri.geometry.Extent(...) });

  //or use set extent method
  var map = new esri.Map("mapDiv");
  map.setExtent(new esri.geometry.Extent(...));

  //add first layer
  map.addLayer(...);
}

This code doesn't check for "loaded == true" and neither does it hook up the onLoad event. What gives? Can we get a legit sample for how to hook up one of these layers with an onError and onLoad event? The samples for using a "basemap" now tell you to use the new "basemap" property of the map object. I don't want to do that because I want to control which layers are used for "streets", "hybrid", etc...

Can someone post a little code that shows how to properly create, hook events to and add an ArcGISTiledMapServiceLayer to a map and also explain whether or not it's wise to use the hide/show property of that layer object to control its visibility.

Frustrated ...

Thanks,
- Aaron

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Fri, 10 Dec 2021 23:10:53 GMT

Here is a follow up with some code. I would really appreciate a response from ESRI on this. Our live site breaks in IE8 and IE7 because of this issue and according to the docs our code is fine. Here's a sample app that adds some layers to a map, tries to hide/show some layers (but fails because they're not loaded at the time the hide/show is called) and two of the layers (Satellite and Transport) fail to load completely. Can anyone tell me:

1. What is the proper way to add a tiled map service layer and manage it's visibility
2. Why Satellite and Transport fail to load in this case?
3. Why the "onLoad" function is called in my code, but that LAYER_SATELLITE and LAYER_TRANSPORT's "loaded" property is NOT = true?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Map Layers in IE8 and IE7</title>
    
    <!-- ESRI Required -->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
    
    <script type="text/javascript">

        dojo.require("esri.map");

        var map;
        var streetsUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
        var topoUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
        var transportUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer";
        var satelliteUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
       
        var LAYER_STREETS = null;
        var LAYER_TOPO = null;
        var LAYER_TRANSPORT = null;
        var LAYER_SATELLITE = null;

        function init() {

            var initExtent = new esri.geometry.Extent({ "xmin": -13056017.708638752, "ymin": 4028145.398141955, "xmax": -13030946.363361249, "ymax": 4042916.8538580453, "spatialReference": { "wkid": 102100 } });

            // Hard code levels of detail
            var lods = [
                  {
                      "level": 0,
                      "resolution": 156543.033928,
                      "scale": 591657527.591555
                  },
                  {
                      "level": 1,
                      "resolution": 78271.5169639999,
                      "scale": 295828763.795777
                  },
                  {
                      "level": 2,
                      "resolution": 39135.7584820001,
                      "scale": 147914381.897889
                  },
                  {
                      "level": 3,
                      "resolution": 19567.8792409999,
                      "scale": 73957190.948944
                  },
                  {
                      "level": 4,
                      "resolution": 9783.93962049996,
                      "scale": 36978595.474472
                  },
                  {
                      "level": 5,
                      "resolution": 4891.96981024998,
                      "scale": 18489297.737236
                  },
                  {
                      "level": 6,
                      "resolution": 2445.98490512499,
                      "scale": 9244648.868618
                  },
                  {
                      "level": 7,
                      "resolution": 1222.99245256249,
                      "scale": 4622324.434309
                  },
                  {
                      "level": 8,
                      "resolution": 611.49622628138,
                      "scale": 2311162.217155
                  },
                  {
                      "level": 9,
                      "resolution": 305.748113140558,
                      "scale": 1155581.108577
                  },
                  {
                      "level": 10,
                      "resolution": 152.874056570411,
                      "scale": 577790.554289
                  },
                  {
                      "level": 11,
                      "resolution": 76.4370282850732,
                      "scale": 288895.277144
                  },
                  {
                      "level": 12,
                      "resolution": 38.2185141425366,
                      "scale": 144447.638572
                  },
                  {
                      "level": 13,
                      "resolution": 19.1092570712683,
                      "scale": 72223.819286
                  },
                  {
                      "level": 14,
                      "resolution": 9.55462853563415,
                      "scale": 36111.909643
                  },
                  {
                      "level": 15,
                      "resolution": 4.77731426794937,
                      "scale": 18055.954822
                  },
                  {
                      "level": 16,
                      "resolution": 2.38865713397468,
                      "scale": 9027.977411
                  },
                  {
                      "level": 17,
                      "resolution": 1.19432856685505,
                      "scale": 4513.988705
                  },
                  {
                      "level": 18,
                      "resolution": 0.597164283559817,
                      "scale": 2256.994353
                  }
            ];

            map = new esri.Map("map", {

                lods: lods
            });

            LAYER_STREETS = createLayerWithUrl(streetsUrl);
            LAYER_TOPO = createLayerWithUrl(topoUrl);
            LAYER_SATELLITE = createLayerWithUrl(satelliteUrl);
            LAYER_TRANSPORT = createLayerWithUrl(transportUrl);

            toggleStreets();
        };

        function createLayerWithUrl(url) {

            var layer = new esri.layers.ArcGISTiledMapServiceLayer(url)

            if (layer != undefined && layer != null) {

                logMessage("CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.");

                dojo.connect(layer, "onError", tiledMapServiceLayerError);
                dojo.connect(layer, "onLoad", tiledMapServiceLayerLoaded);
            }
            else {

                logMessage("CREATED: failed. layer is null after constructor.");
            }

            return layer;
        }

        function tiledMapServiceLayerLoaded(layer) { 

            map.addLayer(layer);
            layer.hide();

            logMessage("LOADED: Layer loaded and added to map: '" + layer.id + "'");
        }

        function tiledMapServiceLayerError(error) {

            var message = "";

            if (error.message != undefined && error.message != null) {

                message += error.message;
            }

            logMessage("ERROR: A problem occurred retrieving the layer. Error Message: '" + message + "'");
        }

        function logMessage(message) {

            // Check for a console object
            var console = window['console'];

            // Log a message if a log property is available
            //---------------------------------------------
            if (console && console.log) {

                console.log(message);
            }
        }

        function toggleStreets() {

            if (LAYER_STREETS.loaded == true) {

                LAYER_STREETS.show();
                LAYER_TOPO.hide();
                LAYER_TRANSPORT.hide();
                LAYER_SATELLITE.hide();
            }
            else {

                logMessage("SHOW 'streets' failed. LAYER_STREETS not loaded.");
            }
        }

        function toggleTopo() {

            if (LAYER_TOPO.loaded == true) {

                LAYER_STREETS.hide();
                LAYER_TOPO.show();
                LAYER_TRANSPORT.hide();
                LAYER_SATELLITE.hide();
            }
            else {

                logMessage("SHOW 'topo' failed. LAYER_TOPO not loaded.");
            }
        }

        function toggleHybrid() {

            if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE == true) {

                LAYER_STREETS.hide();
                LAYER_TOPO.hide();
                LAYER_TRANSPORT.show();
                LAYER_SATELLITE.show();
            }
            else {

                logMessage("SHOW 'hybrid' failed. LAYER_TRANSPORT, LAYER_SATELLITE not loaded.");
            }
        }

        dojo.addOnLoad(init);

    </script>
    <style type="text/css">
        body { font-size: 100%; font-family: Verdana; }
        #map { height: 600px; width: 800px; margin: 50px auto; border: 3px solid black; }
    </style>
</head>
<body>
<div class="search">
    <input type="button" value="Streets" onclick="toggleStreets();" />
    <input type="button" value="Topo" onclick="toggleTopo();" />
    <input type="button" value="Hybrid" onclick="toggleHybrid();" />
</div>
<div id="map">
</div>
</body>
</html>

Be sure to follow along in Firebug's console, Chrome's javascript console window or IE9's Developer Tools console window. The log messages will show you that all the layers supposedly "load correctly" but that two of them are not available. I'd really like to know what's going on here.

How to use the app. Fire it up in a browser. Click the buttons to toggle the visibility of the layers added to the map.

Thanks,
- Aaron

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

MatthewLawton — Thu, 21 Mar 2013 16:05:36 GMT

Answer to #2 is a typo. Search for this:

if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE == true) {

And correct it to this:

if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE.loaded == true) {

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

MatthewLawton — Fri, 10 Dec 2021 23:10:56 GMT

As for #1 and #3, I think things are firing before other things are getting loaded. Sorry, I can't be more specific than that, but here is evidence to support it.

Replace this call (line 140):

toggleStreets();

With this:

dojo.connect(LAYER_TRANSPORT, "onLoad", toggleStreets);
dojo.disconnect(LAYER_TRANSPORT, "onLoad", toggleStreets);

This is a total hack, but it works. It shows that if you wait until LAYER_TRANSPORT is loaded then everything is cool.

I hope this helps.

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

derekswingley1 — Fri, 10 Dec 2021 23:10:59 GMT

In addition to this change pointed out by mflawton:

if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE.loaded == true) {

Move LAYER_TRANSPORT.show(); to be after LAYER_SATELLITE.show(); in the toggleHybrid function:

        function toggleHybrid() {

            if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE.loaded == true) {

                LAYER_STREETS.hide();
                LAYER_TOPO.hide();
                LAYER_SATELLITE.show();
                LAYER_TRANSPORT.show();
            }
            else {

                logMessage("SHOW 'hybrid' failed. LAYER_TRANSPORT, LAYER_SATELLITE not loaded.");
            }
        }

This works in IE8 for me:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Map Layers in IE8 and IE7</title>
    
    <!-- ESRI Required -->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
    
    <script type="text/javascript">

        dojo.require("esri.map");

        var map;
        var streetsUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
        var topoUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
        var transportUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer";
        var satelliteUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
       
        var LAYER_STREETS = null;
        var LAYER_TOPO = null;
        var LAYER_TRANSPORT = null;
        var LAYER_SATELLITE = null;

        function init() {

            var initExtent = new esri.geometry.Extent({ "xmin": -13056017.708638752, "ymin": 4028145.398141955, "xmax": -13030946.363361249, "ymax": 4042916.8538580453, "spatialReference": { "wkid": 102100 } });

            // Hard code levels of detail
            var lods = [
                  {
                      "level": 0,
                      "resolution": 156543.033928,
                      "scale": 591657527.591555
                  },
                  {
                      "level": 1,
                      "resolution": 78271.5169639999,
                      "scale": 295828763.795777
                  },
                  {
                      "level": 2,
                      "resolution": 39135.7584820001,
                      "scale": 147914381.897889
                  },
                  {
                      "level": 3,
                      "resolution": 19567.8792409999,
                      "scale": 73957190.948944
                  },
                  {
                      "level": 4,
                      "resolution": 9783.93962049996,
                      "scale": 36978595.474472
                  },
                  {
                      "level": 5,
                      "resolution": 4891.96981024998,
                      "scale": 18489297.737236
                  },
                  {
                      "level": 6,
                      "resolution": 2445.98490512499,
                      "scale": 9244648.868618
                  },
                  {
                      "level": 7,
                      "resolution": 1222.99245256249,
                      "scale": 4622324.434309
                  },
                  {
                      "level": 8,
                      "resolution": 611.49622628138,
                      "scale": 2311162.217155
                  },
                  {
                      "level": 9,
                      "resolution": 305.748113140558,
                      "scale": 1155581.108577
                  },
                  {
                      "level": 10,
                      "resolution": 152.874056570411,
                      "scale": 577790.554289
                  },
                  {
                      "level": 11,
                      "resolution": 76.4370282850732,
                      "scale": 288895.277144
                  },
                  {
                      "level": 12,
                      "resolution": 38.2185141425366,
                      "scale": 144447.638572
                  },
                  {
                      "level": 13,
                      "resolution": 19.1092570712683,
                      "scale": 72223.819286
                  },
                  {
                      "level": 14,
                      "resolution": 9.55462853563415,
                      "scale": 36111.909643
                  },
                  {
                      "level": 15,
                      "resolution": 4.77731426794937,
                      "scale": 18055.954822
                  },
                  {
                      "level": 16,
                      "resolution": 2.38865713397468,
                      "scale": 9027.977411
                  },
                  {
                      "level": 17,
                      "resolution": 1.19432856685505,
                      "scale": 4513.988705
                  },
                  {
                      "level": 18,
                      "resolution": 0.597164283559817,
                      "scale": 2256.994353
                  }
            ];

            map = new esri.Map("map", {

                lods: lods
            });

            LAYER_STREETS = createLayerWithUrl(streetsUrl);
            LAYER_TOPO = createLayerWithUrl(topoUrl);
            LAYER_SATELLITE = createLayerWithUrl(satelliteUrl);
            LAYER_TRANSPORT = createLayerWithUrl(transportUrl);

            toggleStreets();
        };

        function createLayerWithUrl(url) {

            var layer = new esri.layers.ArcGISTiledMapServiceLayer(url)

            if (layer != undefined && layer != null) {

                logMessage("CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.");

                dojo.connect(layer, "onError", tiledMapServiceLayerError);
                dojo.connect(layer, "onLoad", tiledMapServiceLayerLoaded);
            }
            else {

                logMessage("CREATED: failed. layer is null after constructor.");
            }

            return layer;
        }

        function tiledMapServiceLayerLoaded(layer) { 

            map.addLayer(layer);
            layer.hide();

            logMessage("LOADED: Layer loaded and added to map: '" + layer.id + "'");
        }

        function tiledMapServiceLayerError(error) {

            var message = "";

            if (error.message != undefined && error.message != null) {

                message += error.message;
            }

            logMessage("ERROR: A problem occurred retrieving the layer. Error Message: '" + message + "'");
        }

        function logMessage(message) {

            // Check for a console object
            var console = window['console'];

            // Log a message if a log property is available
            //---------------------------------------------
            if (console && console.log) {

                console.log(message);
            }
        }

        function toggleStreets() {

            if (LAYER_STREETS.loaded == true) {

                LAYER_STREETS.show();
                LAYER_TOPO.hide();
                LAYER_TRANSPORT.hide();
                LAYER_SATELLITE.hide();
            }
            else {

                logMessage("SHOW 'streets' failed. LAYER_STREETS not loaded.");
            }
        }

        function toggleTopo() {

            if (LAYER_TOPO.loaded == true) {

                LAYER_STREETS.hide();
                LAYER_TOPO.show();
                LAYER_TRANSPORT.hide();
                LAYER_SATELLITE.hide();
            }
            else {

                logMessage("SHOW 'topo' failed. LAYER_TOPO not loaded.");
            }
        }

        function toggleHybrid() {

            if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE.loaded == true) {

                LAYER_STREETS.hide();
                LAYER_TOPO.hide();
                LAYER_SATELLITE.show();
                LAYER_TRANSPORT.show();
            }
            else {

                logMessage("SHOW 'hybrid' failed. LAYER_TRANSPORT, LAYER_SATELLITE not loaded.");
            }
        }

        dojo.addOnLoad(init);

    </script>
    <style type="text/css">
        body { font-size: 100%; font-family: Verdana; }
        #map { height: 600px; width: 800px; margin: 50px auto; border: 3px solid black; }
    </style>
</head>
<body>
<div class="search">
    <input type="button" value="Streets" onclick="toggleStreets();" />
    <input type="button" value="Topo" onclick="toggleTopo();" />
    <input type="button" value="Hybrid" onclick="toggleHybrid();" />
</div>
<div id="map">
</div>
</body>
</html>

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Fri, 22 Mar 2013 20:04:30 GMT

That being said: you're writing too much code to do this. At 3.3, we added getBasemap and setBasemap methods on the map. Please look into using those to toggle basemaps from arcgis.com. You should be able to replace the bulk of your code with 10 or so lines.

Derek, thanks for the reply. I'll look at some of my code and ensure that there are no typos. I'm purposely not using the 'basemap' property on the map object for two reasons:

1. I think the hybrid map option looks really bad. There are labels that are fuzzy, redundant, and overlaid ontop of one another. Tthe roads layer (I'm guessing) seems to stay in place as you zoom in / out and then fades out when the new zoom level finishes loading tiles. Basically it looks ugly and we can't ship with it.

2. We have performance problems on our server for all the tile imagery requests that go out for a hybrid "conglomerate" layer. By that I mean, when we had a hybrid layer option that used 3 different tiled map services (transport, state boundaries and satellite) we had far too many tile requests going out from the web server. We found that our users preferred this option to the roads and topo and so had to adjust and only use two tiled map services. I posted a question about my issues with 'hybrid' basemap option here. No one has replied:

http://forums.arcgis.com/threads/80315-New-basemap-feature-Issues-with-quot-hybrid-quot

Thanks,
- Aaron

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

derekswingley1 — Fri, 22 Mar 2013 21:16:16 GMT

1. I think the hybrid map option looks really bad. There are labels that are fuzzy, redundant, and overlaid ontop of one another. Tthe roads layer (I'm guessing) seems to stay in place as you zoom in / out and then fades out when the new zoom level finishes loading tiles. Basically it looks ugly and we can't ship with it.

That sounds more like tiles are loading slowly rather than an issue with the basemap. Taking a look at the screen shot in your other thread, I would say that's caused by tiles loading slowly since tiles from the previous zoom level are not removed until the tiles for the new level have loaded. Normally, this isn't an issue but if tiles are loading slowly (and you're in a slow browsers, like old IE), I could see how this look bad. Do you see the same issue with the basemap when viewing it via a webmap on arcgis.com

2. We have performance problems on our server for all the tile imagery requests that go out for a hybrid "conglomerate" layer. By that I mean, when we had a hybrid layer option that used 3 different tiled map services (transport, state boundaries and satellite) we had far too many tile requests going out from the web server. We found that our users preferred this option to the roads and topo and so had to adjust and only use two tiled map services. I posted a question about my issues with 'hybrid' basemap option here.

I'm not sure I understand. Are you using your own imagery/labels services? If you're using arcgis.com basemaps, there wouldn't be additional requests to your web server as tiles are loaded directly from arcgis.com. Or...are you proxying everything? Using a proxy for everything can be a performance killer...

No one has replied:

http://forums.arcgis.com/threads/80315-New-basemap-feature-Issues-with-quot-hybrid-quot

I'll add a reply there to come to this thread.

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Fri, 10 Dec 2021 23:11:01 GMT

As for #1 and #3, I think things are firing before other things are getting loaded. Sorry, I can't be more specific than that, but here is evidence to support it.

Replace this call (line 140):
toggleStreets();
With this:
dojo.connect(LAYER_TRANSPORT, "onLoad", toggleStreets);
dojo.disconnect(LAYER_TRANSPORT, "onLoad", toggleStreets);
This is a total hack, but it works. It shows that if you wait until LAYER_TRANSPORT is loaded then everything is cool.

I hope this helps.

I think you're right, this will work. Unfortunately due to the business logic in my app I can't do this. I need to load 3 different layers and turn the correct one on based on a user configuration setting. Prior to my issues I could just turn the layer one without having to look to see if it was loaded. In IE resources seem to load much more slowly now. Thanks for the reply.

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Tue, 26 Mar 2013 14:08:34 GMT

@mflawton - The typo was definitely the issue with my test case and I no longer have any issues loading these layers or checking their availability via the loaded functions, now.

@dswingley - I'm going to do my best to re-create the same issue I'm seeing in production in a test project, unfortunately it's proving difficult. This might be because my production app has lots of image resources and HTML that are loaded into the DOM (which might choke IE at start up?) and which aren't present in my test case. I just don't know yet. Anyway, I'm still having issues in production with these layers and they're not displaying loading correctly, etc... in IE 8 and 7.

When I can reproduce I'll put it in a test project and post the code here.

Thanks again for all the help so far.

UPDATE - Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Tue, 26 Mar 2013 14:31:58 GMT

Derek,

I can still reproduce the problem that I'm seeing in IE8 and IE7 with little to no change to the code I provided. I think I left out a critical step in reproducing the error because at first I was able to reproduce it without this step. Once the typo above was identified I moved back onto this issue. Follow these steps:

1. Create a page called index.htm and include in it a link to the page with the map. Sample code is provided below for each.
2. Start IE (whichever version you have). If you have IE9 open the developer tools and change the browser mode to IE8 and document mode to IE8. Open the console in developer tools.
3. Browse to index.htm.
4. Click the link to test-layers-ie8-ie7.html.
5. Watch what happens in the developer tools console. You should see something like this:

----------------------------------------------
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
----------------------------------------------

No errors are logged by the API. Occasionally you'll see this:

----------------------------------------------
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: LOADED: Layer loaded and added to map: 'layer0'
LOG: CHECK: not ready
LOG: LOADED: Layer loaded and added to map: 'layer1'
LOG: CHECK: all layers loaded!
LOG: setting map cache to = 'world-street'
----------------------------------------------

Again, no errors are logged by the API and not all the layers loaded methods are fired.

6. Now force refresh the page (Control + R, F5, etc...) and you'll see this:

----------------------------------------------
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.
LOG: SHOW 'streets' failed. LAYER_STREETS not loaded.
LOG: LOADED: Layer loaded and added to map: 'layer0'
LOG: CHECK: not ready
LOG: LOADED: Layer loaded and added to map: 'layer1'
LOG: CHECK: not ready
LOG: LOADED: Layer loaded and added to map: 'layer2'
LOG: CHECK: not ready
LOG: LOADED: Layer loaded and added to map: 'layer3'
LOG: CHECK: all layers loaded!
LOG: setting map cache to = 'world-street'
----------------------------------------------

The map should now be loaded properly with the tiled layers and you should be able to swap between them with the buttons. This is what should happen each time the page loads, right? Why does this happen only after you force a full refresh of the browser?

7. Finally, click the index link at the top of the page, then click the link to test-layers-ie8-ie7.html again. Notice that the map doesn't finish loading and no errors are logged in the console anywhere just as before.

Code to reproduce is coming in the following post as I have hit a character limit.....

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Fri, 10 Dec 2021 23:11:04 GMT

Continued from previous post ...

To reproduce this yourself you need to create a page called index.htm. It needs to be in the same directory of the website that holds the page with the map and script. Here's the index.htm, that I am using:

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Debugging</title>
    <style type="text/css">
        
        body { font-size: 100%; font-family: Verdana; margin: 20px; }
        
    </style>
</head>
<body>
<ul>
    <h3>Test Pages</h3>
    <li><a href="test-layers-ie8-ie7.html">Test Layers in IE8 and IE7</a></li>
</ul>
</body>
</html>

Now the script page whose code has been provided before, has been slightly updated:

1. The streets won't be shown until all the layers have loaded.
2. The hard coded LODs have been removed.

This functions normally in Firefox, and IE 9 and Chrome, but Chrome throws a bunch of odd javascript warnings.

test-layers-ie8-ie7.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Map Layers in IE8 and IE7</title>
    
    <!-- ESRI Required -->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
    
    <script type="text/javascript">

        dojo.require("esri.map");

        var map;
        var streetsUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
        var topoUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
        var transportUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer";
        var satelliteUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
       
        var LAYER_STREETS = null;
        var LAYER_TOPO = null;
        var LAYER_TRANSPORT = null;
        var LAYER_SATELLITE = null;

        function init() {

            var initExtent = new esri.geometry.Extent({ "xmin": -13056017.708638752, "ymin": 4028145.398141955, "xmax": -13030946.363361249, "ymax": 4042916.8538580453, "spatialReference": { "wkid": 102100 } });
            
            map = new esri.Map("map");

            LAYER_STREETS = createLayerWithUrl(streetsUrl);
            LAYER_TOPO = createLayerWithUrl(topoUrl);
            LAYER_SATELLITE = createLayerWithUrl(satelliteUrl);
            LAYER_TRANSPORT = createLayerWithUrl(transportUrl);

            toggleStreets();
        };

        function createLayerWithUrl(url) {

            var layer = new esri.layers.ArcGISTiledMapServiceLayer(url)

            if (layer != undefined && layer != null) {

                logMessage("CREATED: ArcGISTiledMapServiceLayer, listening for error, loaded events.");

                dojo.connect(layer, "onError", tiledMapServiceLayerError);
                dojo.connect(layer, "onLoad", tiledMapServiceLayerLoaded);
            }
            else {

                logMessage("CREATED: failed. layer is null after constructor.");
            }

            return layer;
        }

        function tiledMapServiceLayerLoaded(layer) { 

            map.addLayer(layer);
            layer.hide();

            logMessage("LOADED: Layer loaded and added to map: '" + layer.id + "'");

            checkLayersLoaded();
        }

        function tiledMapServiceLayerError(error) {

            var message = "";

            if (error.message != undefined && error.message != null) {

                message += error.message;
            }

            logMessage("ERROR: A problem occurred retrieving the layer. Error Message: '" + message + "'");
        }

        function checkLayersLoaded() {

            if (LAYER_STREETS.loaded == true &&
                LAYER_TOPO.loaded == true &&
                LAYER_TRANSPORT.loaded == true &&
                LAYER_SATELLITE.loaded == true) {

                logMessage("CHECK: all layers loaded!");

                logMessage("setting map cache to = 'world-street'");
                toggleStreets();
            }
            else {

                logMessage("CHECK: not ready");
            }
        }

        function logMessage(message) {

            // Check for a console object
            var console = window['console'];

            // Log a message if a log property is available
            //---------------------------------------------
            if (console && console.log) {

                console.log(message);
            }
        }

        function toggleStreets() {

            if (LAYER_STREETS.loaded == true) {

                LAYER_STREETS.show();
                LAYER_TOPO.hide();
                LAYER_TRANSPORT.hide();
                LAYER_SATELLITE.hide();
            }
            else {

                logMessage("SHOW 'streets' failed. LAYER_STREETS not loaded.");
            }
        }

        function toggleTopo() {

            if (LAYER_TOPO.loaded == true) {

                LAYER_STREETS.hide();
                LAYER_TOPO.show();
                LAYER_TRANSPORT.hide();
                LAYER_SATELLITE.hide();
            }
            else {

                logMessage("SHOW 'topo' failed. LAYER_TOPO not loaded.");
            }
        }

        function toggleHybrid() {

            if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE.loaded == true) {

                LAYER_STREETS.hide();
                LAYER_TOPO.hide();
                LAYER_TRANSPORT.show();
                LAYER_SATELLITE.show();
            }
            else {

                logMessage("SHOW 'hybrid' failed. LAYER_TRANSPORT, LAYER_SATELLITE not loaded.");
            }
        }

        dojo.addOnLoad(init);

    </script>
    <style type="text/css">
        body { font-size: 100%; font-family: Verdana; }
        #map { height: 600px; width: 800px; margin: 50px auto; border: 3px solid black; }
    </style>
</head>
<body>
<p><a href="index.htm">index</a></p>
<div class="search">
    <input type="button" value="Streets" onclick="toggleStreets();" />
    <input type="button" value="Topo" onclick="toggleTopo();" />
    <input type="button" value="Hybrid" onclick="toggleHybrid();" />
</div>
<div id="map">
</div>
</body>
</html>

Please let me know if you can reproduce this on your side. Thanks.

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Tue, 02 Apr 2013 14:42:09 GMT

Has anyone else been able to re-create this issue with the sample code and project I provided? I'd really like to know what is going on with IE 8 and 7 when the browser loads the page but fails to throw any errors or load the tiled layers. I've escalated this to ESRI support but I haven't received any feedback yet.

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

KellyHutchins — Fri, 10 Dec 2021 23:11:07 GMT

Aaron,

How about letting the basemap widget handle everything - here's an example that adds the layers you want to the widget and creates a button for each basemap. Clicking the button will display the associated basemap.



<!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">
    <!--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>Display Multiple ArcGIS Online Services</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">

    <style>
      html,body,#map{
        padding:0;
        margin:0;
        height:100%;
        width:100%;
      }

    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("dijit.form.Button");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
      
      var map;
      var basemapGallery;

      function init() {
        map = new esri.Map("map", {
          center: [-31.036, 42.747],
          zoom: 3
        });
        //define the layers that will be used for each basemap 
        var streetLayer = new esri.dijit.BasemapLayer({
          url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        });
        var topoLayer = new esri.dijit.BasemapLayer({
          url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
        });
        var transportLayer = new esri.dijit.BasemapLayer({  //hybrid
          url: "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"
        });
        var satelliteLayer = new esri.dijit.BasemapLayer({ //hybrid
          url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
        });
        //Create the basemaps 
        var streets = new esri.dijit.Basemap({
          layers: [streetLayer],
          title: "Streets"
        });
        var topo = new esri.dijit.Basemap({
          layers: [topoLayer],
          title: "Topo"
        });
        var hybrid = new esri.dijit.Basemap({
          layers: [transportLayer, satelliteLayer],
          title: "Hybrid"
        });

        var basemaps = [streets,topo,hybrid];

        //build the basemap gallery 
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          map: map
        });
        //add a basemap button for each of the above maps 
         dojo.forEach(basemapGallery.basemaps, function(basemap) {      
          dojo.create("input", {
            type: "button",
            value: basemap.title,
            onclick: dojo.hitch(this, function(){
                this.basemapGallery.select(basemap.id);
            })
          },"basemaps_bar");
        });
      }
    dojo.ready(init);
    </script>
  </head>
  <body class="claro">
      
      <div id="map">
        <div id="basemaps_bar" style="position:absolute; right:50px; top:10px; z-Index:99;">
        </div>
      </div>

  </body>
</html>

Re: Issues with ArcGISTiledMapServiceLayer in IE8 and IE7

AaronConnolly — Tue, 02 Apr 2013 19:42:48 GMT

Kelly,

This looks like it would work, however it doesn't explain why we're having this issue in the first place. Can you explain why the layers don't load or throw errors when you hop between an index page and the map page? Upgrading to version 3.3 broke this particular portion of our application where users arrive at our home page and click through to our map page. We didn't have these problems with versions < 3.3.

Any thoughts?