topic Re: Too many Layers appearing in TOC in ArcGIS JavaScript Maps SDK Questions

Too many Layers appearing in TOC

RyanWhiley — Wed, 17 Jul 2013 13:49:48 GMT

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

Re: Too many Layers appearing in TOC

KenBuja — Sat, 11 Dec 2021 14:44:29 GMT

Have you tried setting the layerInfos property on the TOC control? This is how I'm using it (also using the 3.5 AMD syntax)

    layerDynamic = new esri.layers.ArcGISDynamicMapServiceLayer(myurl, {
        id: 'Dynamic'
    });
    map.addLayers([layerDynamic]);

    map.on("layers-add-result", function (event) {
        try {
            var toc = new agsjs.dijit.TOC({
                map: map,
                layerInfos: [{
                    layer: layerDynamic,
                    title: "Legend",
                    slider: true
                }]
            }, 'tocDiv');
            toc.startup();
        }
        catch (e) {
            console.log(e.message);
        }

        mapReady(map);

    });

Re: Too many Layers appearing in TOC

RyanWhiley — Wed, 17 Jul 2013 16:53:59 GMT

Thanks for the reply Ken. Yeah, I tried that and then the map wouldn't appear at all. I messed with the basemap a bit and that helped take out some of the unnecessary layers, but there are still layers that are being repeated.

Re: Too many Layers appearing in TOC

KenBuja — Wed, 17 Jul 2013 17:40:58 GMT

Can you post your code or put some of it into a Fiddle to replicate the error?

Re: Too many Layers appearing in TOC

RyanWhiley — Sat, 11 Dec 2021 14:44:33 GMT

Yeah absolutely. Here is my init, which contains all the code for the TOC.

 dojo.require("esri.map");
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.form.CheckBox");
      dojo.require("dijit.Toolbar");
      dojo.require("esri.SnappingManager");
   dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.tasks.find");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.virtualearth.VETiledLayer");
dojo.require("dijit.TitlePane");
dojo.require("esri.dijit.AttributeInspector-all");
dojo.require("esri.dijit.editing.TemplatePicker-all");
dojo.require("dijit.form.CheckBox");
dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
   dojo.require("agsjs.dijit.TOC");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.Measurement");



   

var layer, visible = [];


var findTask, findParams, map, basemapGallery, dialogBox, navToolbar, operationalLayer, updateFeature, operationalLayer2;

function init() {
esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start +  "<br/>Press <b>ALT</b> to enable snapping";


 esri.config.defaults.io.proxyUrl = "/proxy"; 
 
 esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://www.curacaogis.com/ArcGIS/rest/services/Geometry/GeometryServer");

map = new esri.Map("map", {
  
  center: [-68.95921478269354, 12.201009750494986],
  zoom:11,
  
  });
  
   map.on("load", function(){
          //add the overview map 
          var overviewMapDijit = new esri.dijit.OverviewMap({
            map: map,
            visible: false
          });
          overviewMapDijit.startup();
        });

  var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");

              map.addLayer(basemap);

  
  
  dojo.connect(map, "onLoad", function(theMap) {
          var scalebar = new esri.dijit.Scalebar({
            map: map,
            // "dual" displays both miles and kilmometers
            // "english" is the default, which displays miles
            // use "metric" for kilometers
            scalebarUnit: "dual"
          });
        });
  
  //measuring
  var measurement = new esri.dijit.Measurement({
          map: map
        }, dojo.byId('measurementDiv'));
        measurement.startup();


 
 dojo.connect(map, "onLayersAddResult", initEditor);

 dojo.connect(map, "onLayersAddResult", initSelectToolbar);
  
var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/MapServer");
        map.addLayer(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'
  
  
      });
   
   dojo.connect(map, 'onLayersAddResult', function(results) {

                var standardTOC = new agsjs.dijit.TOC({

                map: map
      

                }, 'standardDiv');
    

                standardTOC.startup();
  });


  map.addLayer(operationalLayer4);
  
  
  
createBasemapGallery();

        //create find task with url to map service
        findTask = new esri.tasks.FindTask("http://curacaogis.com/ArcGIS/rest/services/Ryan/Ryan_Service/MapServer");

        //create find parameters and define known values
        findParams = new esri.tasks.FindParameters();
        findParams.returnGeometry = true;
        findParams.layerIds = [0];
        findParams.searchFields = ["Adres", "Straatnaam_conc", "FUNCTIE", "B_STATUS"];
  
  dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
  
  dojo.connect(dijit.byId("mapPanel"), "resize", function(changeSize, resultSize){
     map.resize();
    });
    
  map.on("load", loadFeatureLayers);
     navToolbar = new esri.toolbars.Navigation(map);
 map.on("load", initOperationalLayer);
  
 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);
  
  
  
}

And then here's the relevant html

<script>
  var dojoConfig = {
              parseOnLoad: true,
              packages: [{
                "name": "agsjs",
                "location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' 
              }]
            };
 
 </script>
........
<div data-dojo-type="dijit.layout.AccordionContainer" style="height:80%; ">
    <div dojotype="dijit.layout.ContentPane" title="Standard Style">

                        (Legend nested under layer name)

                        <div id="standardDiv">

                        </div>
      
      <div  data-dojo-props="title:'Editing Tools'">
    Editing Tool Pane
     <div id="templateDiv"></div>
        <div id="editorDiv">
    </div>
    
     </div>
     </div>

                    </div>

Thanks for taking a look!

Re: Too many Layers appearing in TOC

KenBuja — Sat, 11 Dec 2021 14:44:35 GMT

OK...I think I figured out the problem. If you don't set the layerInfo, all the layers in the map will be added to the TOC. However, it looks like you cannot add a FeatureLayer to the TOC. According to the docs, layerInfo will only take a ArcGISTiledMapServiceLayer or ArcGISDynamicMapServiceLayer.

Here's a sample I created that works

<!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",

            "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 dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
            <div id="tocDiv">
            </div>
        </div>
        <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        </div>
    </div>
</body>
</html>

Re: Too many Layers appearing in TOC

RyanWhiley — Thu, 18 Jul 2013 12:18:31 GMT

Hi Ken, thanks for the code. But I tried to implement the relevant JS into my code and was getting no results. Then I copied all of that code into its own html file, and the page would show up blank. In Firebug it returns an error "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied." I've looked through the code and it appears that it should work just fine in its own html, so am I just missing something really simple in there? Thanks for all your help so far.

Re: Too many Layers appearing in TOC

KenBuja — Thu, 18 Jul 2013 12:34:04 GMT

Can you use Fiddle or Plunker to create an example that shows this problem?

Re: Too many Layers appearing in TOC

RyanWhiley — Thu, 18 Jul 2013 12:39:53 GMT

Yeah, below is a link to a fiddle with the code that you supplied in its own html.

Fiddle

Re: Too many Layers appearing in TOC

KenBuja — Sat, 11 Dec 2021 14:44:38 GMT

Changing the lines in red makes it work in Fiddle.

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

Can you instead post the code that you're having problems with?

Re: Too many Layers appearing in TOC

RyanWhiley — Sat, 11 Dec 2021 14:44:41 GMT

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.

Re: Too many Layers appearing in TOC

KenBuja — Sat, 11 Dec 2021 14:44:44 GMT

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?

Re: Too many Layers appearing in TOC

RyanWhiley — Thu, 18 Jul 2013 17:33:47 GMT

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!

Re: Too many Layers appearing in TOC

KenBuja — Thu, 18 Jul 2013 17:58:56 GMT

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.

Re: Too many Layers appearing in TOC

RyanWhiley — Thu, 18 Jul 2013 18:18:53 GMT

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.

Re: Too many Layers appearing in TOC

KenBuja — Thu, 18 Jul 2013 19:00:38 GMT

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]

Re: Too many Layers appearing in TOC

KenBuja — Thu, 18 Jul 2013 21:11:23 GMT

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 });

Re: Too many Layers appearing in TOC

RyanWhiley — Sat, 11 Dec 2021 14:44:47 GMT

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?

Re: Too many Layers appearing in TOC

KenBuja — Sat, 11 Dec 2021 14:44:49 GMT

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.