Load Layers from Config file

[LuciHawkins]

Is anyone familiar with loading layers from a config file?  I am trying to do it and I get various results depending upon the method I try.  The method quoted gives me duplicate entries of each layer added.  I have created the array called layrnames, but cannot determine proper function to use to load all the layers names I have pushed into the array.  Any help would be greatly appreciated 🙂

Thanks,  Luci

function init(){
                esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://fwb-gissrv/ArcGIS/rest/services/Geometry/GeometryServer");
               
                //create popup for multiple popups
                var popup = new esri.dijit.Popup({
                    fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([240, 128, 128, 0.25]))
                }, dojo.create("div"));
               
                //map.spatialReference = new esri.SpatialReference({wkid:102100});
               
                //set initial extent
                var initExtent = new esri.geometry.Extent(-9651200, 3555500, -9636400, 3562470, new esri.SpatialReference({
                    "wkid": 102100
                }));
               
                locator = new esri.tasks.Locator("http://fwb-gissrv/ArcGIS/rest/services/GeoCodes/AddressessFWB/GeocodeServer");
                dojo.connect(locator, "onAddressToLocationsComplete", showResultsl);
               
                //load map
                map = new esri.Map("map", {
                    extent: initExtent,
                    slider: true,
                    lods: lods,
                    infoWindow: popup
                });
               
                //add basemap gallery tiles
                createBasemapGallery();
               
                dojo.connect(basemapGallery, "onError", function(msg){
                    console.log(msg)
                });
               
                dojo.xhrGet({
                    url: "Config.json",
                    handleAs: "json",
                    preventCache: true,
                    load: function(responseObject, ioArgs){
                        layrname = responseObject.Lyrname;
                       
                        //add layers from config file
                        if (layrname.length != 0) {
                            for (var i = 0; i < layrname.length; i++) {
                                layname = (layrname.lname);
                                laytitle = (layrname.ltitle);
                                layurl = (layrname.lUrl);
                                layrvis = (layrname.lVisb);
                                layid = (layrname.lyid);
                                layname = new esri.layers.ArcGISDynamicMapServiceLayer(layurl, {
                                    id: layid,
                                    visible: layrvis
                                });
                                legendLayers.push({
                                    layer: layname,
                                    title: laytitle
                                });
        layrnames.push({
         layern: layname
        });
        map.addLayer(layname);
                            }
                        };
     
                        dojo.connect(map, 'onLayeraddResult', function(results){
                            var legend = new esri.dijit.Legend({
                                map: map,
                                layerInfos: legendLayers
                            }, "legendDiv");
                            legend.startup();
                        });
                       
      //map.addLayers([layname]);
                                         
                        dojo.connect(map, 'onLayerAddResult', function(results){
                       
                            //add check boxes
                            dojo.forEach(legendLayers, function(layer){
                                var layerName = layer.title;
                                var checkBox = new dijit.form.CheckBox({
                                    name: "checkBox" + layer.layer.id,
                                    value: layer.layer.id,
                                    checked: layer.layer.visible,
                                    onChange: function(evt){
                                        var clayer = map.getLayer(this.value);
                                        clayer.setVisibility(!clayer.visible);
                                        this.checked = clayer.visible;
          legend.refresh();
                                    }
                                });
                               
                                //add the check box and label to the toc
                                dojo.place(checkBox.domNode, dojo.byId("toggle"), "after");
                                var checkLabel = dojo.create('label', {
                                    'for': checkBox.name,
                                    innerHTML: layerName
                                }, checkBox.domNode, "after");
                                dojo.place("<br />", checkLabel, "after");
                            });
                           
                        });
                       
                    }
                });

[BenFousek]

It might be the comma after dpi name/value pair.

There should be no comma after the last name/value pair. Firefox won't object if you add it, but Internet Explorer will trigger an error: 'Expected identifier, string or number'.

[LuciHawkins]

That was it!  Thank you! Thank you! Thank you!

[BenFousek]

Here's the order I load js.

<script type="text/javascript" src="token.php"></script>
<script type="text/javascript">var djConfig = { parseOnLoad: true }</script>
<script type="text/javascript" src="http://serverapi or local install"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/application/?id=someAppId"></script>

[LuciHawkins]

Now I cannot get it to work with the legend dijit.  I changed it from onLayersAddResult to onLayerAddResult and the legendDIV pane is still not showing any layers.  Any suggestions?  This is what I have in my Default.html right before it runs function(l)

//add the legend
    dojo.connect(map, 'onLayerAddResult', function(results) {
     var layerInfo = dojo.map(results, function(layer, index) {
      return {
       layer : layer.layer,
       title : layer.layer.name
      };
     });
     if (layerInfo.length > 0) {
      var legendDijit = new esri.dijit.Legend({
       map : map,
       layerInfos : layerInfo
      }, "legendDiv");
      legendDijit.startup();
     }
    });

I have even tried adding legendDijit.refresh(): after  map.addLayer(layer); in your function... puzzled

I am also wondering if I can change the draw order of the layers.  As it is now, the last layer in my layer list is the layer on TOP.  I would like it to be the layer on the BOTTOM.

Thanks,

Luci

[BenFousek]

Create an array for those layers you want in the legend:

var app = {
    mapParams: {
        legendLayers: []
    }
}

Create the legend as part of the onLoad function:

app.legend = new esri.dijit.Legend({ map: app.map, layerInfos: app.mapParams.legendLayers }, 'legend_container'); app.legend.startup();

When you are iterating through the layers, push the layer to the legend array:

if (l.legend == true) {
    app.mapParams.legendLayers.push({
        layer: layer,
        title: l.name
    })
}

The legend will update automatically.

It's not necessary to connect to the onLayerAddResult if you use the layer object in the addDynamic function. My addDyanamic and addFeature functions are by far my largest and most complex functions because of the layer object:

var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, { id: l.id, visible: l.visible, opacity: l.opacity });

It allows you to easily build controls, add layer functionality, etc in one shot with overall less code. For example: add the layer to a TOC widget, or set the layer up for use with an identify widget. This approach is also very useful with feature layers, when setting up infoTemplates, widgets in the popup, setting up editing, and such.

[LuciHawkins]

You have been such a great help.  I apologize for being so ignorant on the subject.  But, hopefully in time I will get it.

I have tried a couple of different ways to use your code above and I am running into errors.  Currently, I have the var app statement in my default.html with my other variables.  I added the app.legend=new code you have in the same default.html file in the function init() area of my code and it is before the addDynamic(l).    I added the if statement to the end of my addTOC.js file right before the map.addlayer(layer); statement.  The error I recieve is:

legend.js
Line: 19
Error: Unable to set value of the property 'innerHTML': object is null or undefined

Thanks,

Luci

[BenFousek]

It's hard for me to debug via the forum. Zip your code and post, or private message me with it, so I can run it.

[LuciHawkins]

Here is what I have, we are behind a firewall so you wont be able to get to our mapservices.

Thanks,

Luci