dynamically created layers not usuable for layer commands

Question

I'm building layers dynamically and this is working great but I don't seem to be leveraging the api properly.  The layers are being built at runtime properly but I can't attach to them after the page is loaded, which leads me to believe that their creation is not seen by the API, but I'm unsure of how to solve this.  My first thought is to use the **new** keyword to instantiate the object but I can't get that working.

The code below is what is actually generating new objects from the GIS api, 'makeid()' is a function that creates a unique string from uppercase/lowercase letters and numbers.  I call this function for every new layer I want to add, the variable creation is where I think I'm off but I'm not sure.....    var setTiledLayer = function(URL) {
        var tuID = makeid();
        tuID = new esri.layers.ArcGISTiledMapServiceLayer(URL, {id: tuID + 'ID'});
        return tuID;
    };

NigelAlford · Answer

You helped get me to the place I needed.  I'm using Jquery heavily these days and your dynamic add of the checkbox was exactly what I was missing.  I added a jquery button dynamically and the problem was solved in minutes.  The dynamic layer adding is beautiful and makes app maintenance so much better.

Thanks a lot

BenFousek · Answer

Glad to help. Couple of things: 1) Keep in mind that the esri api is simply an extension of the dojo api. I spend way more time working with dojo than with the esri api. If you want to build powerful, high functioning apps, you must know dojo. 2) I mentioned adding your own objects to existing objects. When doing this you need to make sure the class doesn't use the same name. When 3.0 was released I ran into problems because the api added new objects and functions to classes with names I was using for objects and functions. 3) You can create your controls in the same function as you create the layer. The snippet I shared sends the layer object to a toc widget which adds the controls, menus, etc, but it's easily done with some simple dojo. Suppose we have a region and we want add simple layer toggle controls to it: [HTML]

[/HTML] In that same function (truncated for ease of reading) we build a control, place it and add layer toggle functionality to the checkbox:ms: function (l) { if (l.type === 'dynamic') { var imageParameters = new esri.layers.ImageParameters(); imageParameters.format = l.imageFormat; imageParameters.dpi = l.dpi; var layer = new esri.layers.ArcGISDynamicMapServiceLayer(l.url, { id: l.id, imageParameters: imageParameters, visible: l.visible, opacity: l.opacity }); layer.layer_params = l; //add params to layer object app.map.addLayer(layer); //create control var control = '

' + '' + ' ' + l.name + '

'; //place contol dojo.place(control, 'left', 'first'); //create checkbox var checkbox = new dijit.form.CheckBox({ checked: l.visible, //set checked same as default visibility onChange: function () { //onChange function to toggle layer using the layer object itself if (layer.visible) { layer.hide() } else { layer.show() } } }, l.id + '_layer_control'); } else if (l.type === 'tiled') { //add tiled layer } } Once again the indents are goofy.

NigelAlford · Answer

Ben,
I love what you've created, and yes that' exactly what i'm going for.  I'll dig through your code a bit more to work on implementing it vs what I have.  So my problem lies in not being able to manipulate the layer after its created (dynamically).  You may have solved this in your code based on how your creating each layer.  I'll have a go with this and get back to you, your seperate config.js sheet is a cleaner way for app maintenance which is the ultimate goal of my app as well.

This is the click function that I'm using to look through the layers and toggle visibility(main goal). I find it a bit quicker to create an array and manipulate it during layer resume/suspend and use that for referencing if the layer is in the map vs calling the esri method. var setChkBox = function(lyr, layerName) {
    "use strict";
   if(lyrIDs.indexOf(lyr) > 1) {
     layerName.suspend();
     lyrIDs.splice(lyrIDs.indexOf(lyr), 1);
   } else if (!(lyrIDs.hasOwnProperty(lyr))) {
     lyrIDs.push(lyr);
     layerName.resume();
   }
};