I have some code that adds graphics layers to the map *after* the map's 'onLoad' event is called and even after explicitly checking to see if the map's 'loaded' property = true. Unfortunately, after the call to 'addLayer': map.addLayer(graphicsLayer1);
... the map completely breaks down. The tile imagery doesn't load and there are no errors thrown by the API. What am I doing wrong? Here's my code:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Multiple Graphics Layers</title> <!-- ESRI Required --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" /> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/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.4"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.graphics"); var map; var streetsUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"; function init() { //alert("testing"); 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"); // In IE listen for onLayerAddResult dojo.connect(map, "onLayerAddResult", mapAddLayerResult); dojo.connect(map, "onLoad", mapLoaded); var layer0 = new esri.layers.ArcGISTiledMapServiceLayer(streetsUrl, { "id": "Streets", "opacity": 1.0, "visible" : true }); var BASE_MAP_ARRAY = [layer0]; map.addLayers(BASE_MAP_ARRAY); }; function mapLoaded(theMap) { logMessage("map loaded"); var graphicsLayer1 = new esri.layers.GraphicsLayer({ "id" : "graphicsLayer1" }); var graphicsLayer2 = new esri.layers.GraphicsLayer({ "id" : "graphicsLayer2" }); var graphicsLayer3 = new esri.layers.GraphicsLayer({ "id" : "graphicsLayer3" }); logMessage("Map loaded? " + theMap.loaded); map.addLayer(graphicsLayer1); map.addLayer(graphicsLayer2); map.addLayer(graphicsLayer3); var oldGraphicsLayer = map.getLayer("graphicsLayer3"); logMessage("graphics layer 3: " + oldGraphicsLayer); }; function mapAddLayerResult(layer, error) { logMessage("map says layer is loaded. Layer: " + layer + ". Error: " + error + ". Tile Info LODs Length: " + layer.tileInfo.lods.length); }; 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); } } 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 id="map"> </div> </body> </html>
I have followed this sample here and I am not doing anything different, other than not running a geoprocessing task. http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/graphics_multiple_layers.htmlI have also tried not sending the "options" into the constructor for the GraphicsLayer, and nothing seems to work. Do I have a spelling error somewhere that I don't see!? Thanks,- Aaron
