Too many Layers appearing in TOC

[RyanWhiley]

Hello,

Right now I'm working with a Table of Contents, and I have gotten everything to work just fine.  But the table of contents is displaying too many layers.  I've changed the setVisibleLayers to different layers, and then the map will not show up.  Most of the layers I have not even been able to find in my service directory, and there are three "undefined" layers.  Then most of the layers repeat themselves, one with full functionality and the other without.  So I am not really sure where all these other layers are coming from and why they are repeating themselves.  I've attached an image of my TOC, and also the code for it is below.  

var operationalLayer4 = new esri.layers.FeatureLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/FeatureServer", {                  id: 'operationalLayer4'             });        dojo.connect(map, 'onLayersAddResult', function(results) {                  var standardTOC = new agsjs.dijit.TOC({                    map: map                  }, 'standardDiv');                  standardTOC.startup();   });     map.addLayer(operationalLayer4);   

If there is any advice anyone could give me to point me in the right direction, I'd really appreciate it.


Thanks!
Ryan

[RyanWhiley]

Thanks for all your help so far, I really appreciate it. 
Well, to be honest I'm not sure where the code is that is giving me the trouble.  I've implemented your code right into my main html, but the tocDiv doesn't show up in my sidebar.  I had a TOC named standardTOC which I was using, but that was the one giving me too many layers.

  var operationalLayer4 = new esri.layers.ArcGISDynamicMapServiceLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/MapServer", {
        
        id: 'operationalLayer4'
   });
   
   dojo.connect(map, 'onLayersAddResult', function(results) {
           var standardTOC = new agsjs.dijit.TOC({
                map: map
  }, 'standardDiv');
   standardTOC.startup();
  });
map.addLayer(operationalLayer4);

That is the code for standardTOC.  Whenever I change the id in my html to standardDiv it shows up just with multiple layers.  Then when I change it to tocDiv it does not display.  The console does not log "Set TOC" either.  So maybe there's a conflict between that code and some code that I have somewhere else in the application? But I have looked through my code and wasn't able to find anything that I would think would conflict with it. Here is the the TOC code.

connect.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: operationalLayer5,
                        title: "Legend",
                        
                    }]
                }, 'tocDiv');
                toc.startup();
                console.log("Set TOC");
            });

And then here is the html code that references the TOC code. 

<div id="leftPanel" data-dojo-type="dojox.layout.ExpandoPane"  data-dojo-props=" splitter:true, region:'leading'" style="width:250px; height:200px; display:hidden; ">
 <div dojoattachevent="ondijitclick:toggle" aria-controls="leftPanel" tabindex="0" class="dojoxExpandoIcon dojoxExpandoIconLeft1" dojoattachpoint="iconNode"></div>
    <div data-dojo-type="dijit.layout.AccordionContainer" style="height:80%; ">
    <div dojotype="dijit.layout.ContentPane" title="Standard Style">
      <div id="tocDiv">
       </div>
      <p>--------------------</p>
       <div id="measurementDiv"></div>
      <p>--------------------</p>
      <div  data-dojo-props="title:'Editing Tools'">
    Editing Tool Pane
     <div id="templateDiv"></div>
      <div id="editorDiv">
        </div>
    
      </div>
     </div>
    </div>
   </div>

I've placed console.logs throughout that code and none of them are showing up.  So I am not really sure what would be causing this. When I place the code in a separate JS file it does not show up either.

[KenBuja]

Using this code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>TOC</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">

    <style>
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }


        #leftPane
        {
            width: 280px;
            overflow: auto;
        }
        /* this line hide layers when out of scale for the inline TOC */
        #scaleDiv .agsTOCOutOfScale
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
                //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load
            }]
        };
    </script>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>

    <script type="text/javascript">
        var map;

        require([
           "dojo/_base/connect",
           "dojo/parser",
           "dojo/ready",

           "esri/map",

           "agsjs/dijit/TOC",

            "esri/arcgis/utils",

            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojox/layout/ExpandoPane",
            "dijit/layout/AccordionContainer",

            "dojo/domReady!"

        ], function (
        connect, parser, ready,
        Map) {

            ready(function () {
                //parser.parse();
            });


            map = new esri.Map("map", {
                basemap: "topo",
                showAttribution: false,
                logo: false,
                center: [-68.95921478269354, 12.201009750494986],
                zoom: 11
            });

            map.resize();

            var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/MapServer");
            map.addLayers([censusMapLayer]);

            var operationalLayer = new esri.layers.FeatureLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/FeatureServer", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["Adres", "Buurten", "B_STATUS", "FUNCTIE", "LENGTH", "WEGKLASSE", "STRAATNAAM", "Oneway"]

            });
            operationalLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol());
            map.addLayer(operationalLayer);

            var operationalLayer4 = new esri.layers.FeatureLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/FeatureServer", {
                id: 'operationalLayer4'
            });
            map.addLayer(operationalLayer4);

            var operationalLayer5 = new esri.layers.ArcGISDynamicMapServiceLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/MapServer", {
                id: 'operationalLayer5'
            });
            map.addLayer(operationalLayer5);

            var imageParameters = new esri.layers.ImageParameters();
            imageParameters.layerIds = [0];
            imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
            //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

            layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/MapServer", { "imageParameters": imageParameters });
            map.addLayer(layer);

            connect.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: operationalLayer5,
                        title: "Legend",
                        slider: true
                    }]
                }, 'tocDiv');
                toc.startup();
                console.log("Set TOC");
            });

            var resizeTimer;

            connect.connect(map, 'onLoad', function (theMap) {
                connect.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });

        }
      );

    </script>

</head>
<body class="claro">
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
        <div id="leftPanel" data-dojo-type="dojox.layout.ExpandoPane" data-dojo-props=" splitter:true, region:'leading'" style="width: 250px; height: 200px; display: hidden;">
            <div dojoattachevent="ondijitclick:toggle" aria-controls="leftPanel" tabindex="0" class="dojoxExpandoIcon dojoxExpandoIconLeft1" dojoattachpoint="iconNode"></div>
            <div data-dojo-type="dijit.layout.AccordionContainer" style="height: 80%;">
                <div dojotype="dijit.layout.ContentPane" title="Standard Style">
                    <div id="tocDiv">
                    </div>
                    <p>--------------------</p>
                    <div id="measurementDiv"></div>
                    <p>--------------------</p>
                    <div data-dojo-props="title:'Editing Tools'">
                        Editing Tool Pane
                    <div id="templateDiv"></div>
                        <div id="editorDiv">
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        </div>
    </div>

</body>
</html>

I get this page

[ATTACH=CONFIG]26042[/ATTACH]

Can you make a Fiddle using your code that shows the problem you're having?

[RyanWhiley]

Here you go.  [url=http://jsfiddle.net/67H72/2/]Fiddle[/url].  In fiddle it is working okay.  But then when I edit it in Notepad it doesn't.  It works as long as I don't include any more JS with the html file, but then as soon as I reference a js file or add more in the html it doesn't work.  The JS that is the the lower left hand corner is a file that I reference from my main html that has been giving me trouble.  I have other js files that are giving me trouble, but this one is one that I need to have in my app.


Thanks!

[KenBuja]

What would be more helpful if you could get the Fiddle into a state (or create a new project) where it replicates the problem with the code that you're using. As much as I'm trying to help, trying to figure out what's causing the problem by piecing together parts of your code is tough.

[RyanWhiley]

Yeah, I'm sorry for all the complications.  Here is a Fiddle that displays the issues I am having. [url=http://jsfiddle.net/67H72/4/]Fiddle[/url]  Unfortunately though, the Fiddle is very sloppy.  So I also uploaded the application to a website so that maybe the code is easier to look through.  [url=http://sbshows.com/GIS%20Work/locator2.html]Website[/url]. And as you can see, everything looks fine.  Except the TOC is not showing up. 

Thank you for all the assistance.

[KenBuja]

The firewall in my organization doesn't like sbshows.com, so I can't see that page. However, in the Fiddle, you haven't defined the createBasemapGallery function, so it's stopping when you call that function.

**Edit

After commenting that line out, the next error is on the line

map.on("load", initOperationalLayer);

where you don't have initOperationalLayer defined.

Have you used Firebug (or its equivalents) to debug the code?

[ATTACH=CONFIG]26047[/ATTACH]

[KenBuja · Accepted solution]

Taking a look at the website shows the initOperationalLayer error, as well as an error in the locate2.html file.

 map = new esri.Map("map", { basemap: "topo", showAttribution: false, logo: false, center: [-68.95921478269354, 12.201009750494986], zoom: 11 console.log("ASDAS"); <--this has to be moved outside the map initializer }); 

[RyanWhiley]

Aha, I've got it.  I fixed the errors you brought up and then took parts of the code you provided, placed it in my init, then manipulated the code a little.

 var operationalLayer5 = new esri.layers.ArcGISDynamicMapServiceLayer("../Ryan_Service/MapServer", {
                id: 'operationalLayer5'
    
            });
            

     
           dojo.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: operationalLayer5,
                        title: "Legend",
                        slider: true
                    }]
                }, 'tocDiv');
                toc.startup();
                console.log("Set TOC");
            });

   map.addLayer(operationalLayer5);
 
            var resizeTimer;

            dojo.connect(map, 'onLoad', function (theMap) {
                dojo.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });

Thank you for all your help.  But now when I select a checkbox, it does not alter the map.  When I have layerInfos in the code it does not alter the map, but when I do not have layerInfos I am able to alter the map, there are just multiple feature layers.  Would I want to do something line listen for the event onSelectionChange? And the maybe refresh that map when that happens?

[KenBuja]

You're adding the service to the map several time, so even when you turn off a layer in operationalLayer5, you still have the censusMapLayer, operationalLayer, and operationalLayer4 layers showing. You could make them invisible, or set up a listener on the
operationalLayer5 to change the visibleLayers property on all the others. Something like

    operationalLayer5.on("update-end", function (event) {
        if (event.error !== undefined) {
            console.log("Update complete with error: " + event.error);
        }
        censusMapLayer.visibleLayers = operationalLayer5.visibleLayers;
    });

Now that your application is getting to the state that it's working, please use the "The post was helpful" up arrow on the helpful posts and when appropriate, the "Click to mark this post as answered" check.