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

[KenBuja]

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

    });

[RyanWhiley]

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.

[KenBuja]

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

[RyanWhiley]

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!

[KenBuja]

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>

[RyanWhiley]

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.

[KenBuja]

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

[RyanWhiley]

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


Fiddle

[KenBuja]

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?