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(...); }
<!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>
if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE == true) {
if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE.loaded == true) {
toggleStreets();
dojo.connect(LAYER_TRANSPORT, "onLoad", toggleStreets); dojo.disconnect(LAYER_TRANSPORT, "onLoad", toggleStreets);
if (LAYER_TRANSPORT.loaded == true && LAYER_SATELLITE.loaded == true) {
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."); } }
<!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>
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
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.