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>
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.