Problems with adding multiple graphics layers

AaronConnolly — Wed, 01 May 2013 18:09:01 GMT

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

I 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

Re: Problems with adding multiple graphics layers

derekswingley1 — Wed, 01 May 2013 18:50:16 GMT

This:

logMessage("map says layer is loaded. Layer: " + layer + ". Error: " + error + ". Tile Info LODs Length: " + layer.tileInfo.lods.length);

Specifically the layer.tileInfo.lods.length part is what's breaking your page. mapAddLayerResult fires each time a layer is added so it's called each time you add a graphics layer. Since graphics layers don't have a tileInfo property, your code is breaking.

Re: Problems with adding multiple graphics layers

AaronConnolly — Fri, 10 Dec 2021 20:32:24 GMT

This:
logMessage("map says layer is loaded. Layer: " + layer + ". Error: " + error + ". Tile Info LODs Length: " + layer.tileInfo.lods.length);
Specifically the layer.tileInfo.lods.length part is what's breaking your page. mapAddLayerResult fires each time a layer is added so it's called each time you add a graphics layer. Since graphics layers don't have a tileInfo property, your code is breaking.

Ah, I wasn't sure if that event was even firing when the graphics layer was loaded. I thought it might NOT fire for GraphicsLayers the way it did for other layers.

I've removed that bit from the event handler and am all set now.

Thanks,
- Aaron

topic Re: Problems with adding multiple graphics layers in ArcGIS JavaScript Maps SDK Questions

Problems with adding multiple graphics layers

Re: Problems with adding multiple graphics layers

Re: Problems with adding multiple graphics layers