TOC adding layer into TOC after initial startup

deleted-user-yA_w_FC9FKe5 · ‎10-02-2014

I have my layers that I load up during the initial start up of my map that you can see below. However, I have a layer that I add in later like this:

StoresResultsLayer.setVisibleLayers([3, 4]);

map.addLayer(StoresResultsLayer);

I would like this to show up in my table of contents but I would also like to allow the user the ability to turn the individual layers on and off as well. I'm going to have one be my results for my layer and the other will be labeling for those layers. How can I do this?

Below is my code on startup for the TOC

map.on("layers-add-result", function (results) {

var toc = new TOC({

map: map,

layerInfos: [{

layer: dlDRegionDistrictPolygons,

title: "Boundary Files",

collapsed: true,

showGroupCount: false,

slider: true

},{

layer: dlMCY_Stores,

title: "Macys Stores",

collapsed: true

}

]

}, 'sliderDiv');

toc.startup();

toc.on('toc-node-checked', function (evt) {

// When dlMCY_Stores is turned off I want flMCY_Stores_Labels to turn off as well and vice versa.

if(dlMCY_Stores.visible == true){

//Show feature layer Labels because dynamic layers allow for infotemplate

flMCY_Stores_Labels.show();

}

else{

//Hide Labels

flMCY_Stores_Labels.hide();

}

} );

});

map.addLayers([dlDRegionDistrictPolygons,flMCY_Stores_Labels,dlMCY_Stores,flDistricts,flRegions]);

KenBuja · ‎10-02-2014

That appears to be the same code used in the TOC example, so it should work. Have you put something into the StoresResultsLayer "load" event (like an alert or a console.log) to make sure the event is firing properly?

Splice allows you to change the contents of an array (the TOC's layerInfos array) by adding or removing an element. This documentation explains how to use it.

This example shows how to add the layer

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map with legend</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/css/agsjs.css" />
    <style>
        html, body {
            height: 97%;
            width: 98%;
            margin: 1%;
        }

        #rightPane {
            width: 20%;
        }

        #legendPane {
            border: solid #97DCF2 1px;
        }
    </style>

    <script>
        var dojoConfig = {
            //parseOnLoad: true,
            packages: [
                {
                    name: "agsjs",
                    //location: location.pathname.replace(/\/[^/]+$/, "") + '../../agsjs'
                    "location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs' // for xdomain load
                }]
        };
    </script>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map, layerState, layerCounty, layerCity, toc;

        require([
          "esri/map", "esri/layers/FeatureLayer",
          "dojo/_base/array", "dojo/parser", "agsjs/dijit/TOC", "dijit/registry",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
          "dijit/layout/AccordionContainer", "dojo/domReady!"
        ], function (
          Map, FeatureLayer,
          arrayUtils, parser, TOC, registry
        ) {
            parser.parse();

            map = new Map("map", {
                basemap: "oceans",
                center: [-86, 30],
                zoom: 6
            });


            layerState = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2", {
                mode: FeatureLayer.MODE_ONDEMAND,
                id: 'State'
            });
            layerCounty = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3", {
                mode: FeatureLayer.MODE_ONDEMAND,
                id: 'County'
            });

            map.on("layers-add-result", function (evt) {
                toc = new TOC({
                    map: map,
                    layerInfos: [{
                        layer: layerState,
                        title: "States",
                        collapsed: true
                    },
                    {
                        layer: layerCounty,
                        title: "Counties"
                        //},
                        //{
                        //    layer: layerCity,
                        //    title: "Cities"
                    }]
                }, 'legendDiv');
                toc.startup();

                toc.on('toc-node-checked', function (evt) {
                    if (evt.rootLayer) {
                        if (evt.rootLayer.id === "County") {
                            layerCity.setVisibility(evt.checked);
                        }
                    }
                });

            });

            map.addLayers([layerCounty, layerState]);

            map.on("update-end", function () {
                console.log("update end");
            });

            var test = registry.byId("btnCities").on("click", function () {
                test.remove(); //this can only be clicked once.
                layerCity = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    id: 'City'
                });
                var h= layerCity.on("load", function () {
                    //alert("Cities added!");
                    toc.layerInfos.splice(2, 0, {
                        layer: layerCity,
                        title: "Cities"
                    });
                    toc.refresh();
                    h.remove();

                });

                map.addLayer(layerCity);
            });

        });

    </script>
</head>

<body class="claro">
    <div id="content"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:true"
         style="width: 100%; height: 100%; margin: 0;">

        <div id="rightPane"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'right'">

            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                     data-dojo-props="title:'Legend', selected:true">
                    <div id="legendDiv"></div>
                    <button id="btnCities" data-dojo-type="dijit/form/Button" type="button">
                        Add cities
                    </button>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane"
                     data-dojo-props="title:'Pane 2'">
                </div>
            </div>
        </div>
        <div id="map"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'"
             style="overflow: hidden;">
        </div>
    </div>
</body>

</html>

View solution in original post

deleted-user-yA_w_FC9FKe5 · ‎10-02-2014

I tried this but it does not seem to be working. Not sure I understand the splice piece of this at all.

var h = StoresResultsLayer.on('load', function (results) {

toc.layerInfos.splice(1, 0, {

layer: StoresResultsLayer,

title: "StoresResultsLayer",

// collapsed: true, // whether this root layer should be collapsed initially, default false.

slider: true, // whether to display a transparency slider.

autoToggle: false //whether to automatically collapse when turned off, and expand when turn on for groups layers. default true.

});

toc.refresh();

// h.remove();

});

map.addLayer(StoresResultsLayer);

KenBuja · ‎10-02-2014

That appears to be the same code used in the TOC example, so it should work. Have you put something into the StoresResultsLayer "load" event (like an alert or a console.log) to make sure the event is firing properly?

Splice allows you to change the contents of an array (the TOC's layerInfos array) by adding or removing an element. This documentation explains how to use it.

This example shows how to add the layer

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map with legend</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/css/agsjs.css" />
    <style>
        html, body {
            height: 97%;
            width: 98%;
            margin: 1%;
        }

        #rightPane {
            width: 20%;
        }

        #legendPane {
            border: solid #97DCF2 1px;
        }
    </style>

    <script>
        var dojoConfig = {
            //parseOnLoad: true,
            packages: [
                {
                    name: "agsjs",
                    //location: location.pathname.replace(/\/[^/]+$/, "") + '../../agsjs'
                    "location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs' // for xdomain load
                }]
        };
    </script>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map, layerState, layerCounty, layerCity, toc;

        require([
          "esri/map", "esri/layers/FeatureLayer",
          "dojo/_base/array", "dojo/parser", "agsjs/dijit/TOC", "dijit/registry",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
          "dijit/layout/AccordionContainer", "dojo/domReady!"
        ], function (
          Map, FeatureLayer,
          arrayUtils, parser, TOC, registry
        ) {
            parser.parse();

            map = new Map("map", {
                basemap: "oceans",
                center: [-86, 30],
                zoom: 6
            });


            layerState = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2", {
                mode: FeatureLayer.MODE_ONDEMAND,
                id: 'State'
            });
            layerCounty = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3", {
                mode: FeatureLayer.MODE_ONDEMAND,
                id: 'County'
            });

            map.on("layers-add-result", function (evt) {
                toc = new TOC({
                    map: map,
                    layerInfos: [{
                        layer: layerState,
                        title: "States",
                        collapsed: true
                    },
                    {
                        layer: layerCounty,
                        title: "Counties"
                        //},
                        //{
                        //    layer: layerCity,
                        //    title: "Cities"
                    }]
                }, 'legendDiv');
                toc.startup();

                toc.on('toc-node-checked', function (evt) {
                    if (evt.rootLayer) {
                        if (evt.rootLayer.id === "County") {
                            layerCity.setVisibility(evt.checked);
                        }
                    }
                });

            });

            map.addLayers([layerCounty, layerState]);

            map.on("update-end", function () {
                console.log("update end");
            });

            var test = registry.byId("btnCities").on("click", function () {
                test.remove(); //this can only be clicked once.
                layerCity = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    id: 'City'
                });
                var h= layerCity.on("load", function () {
                    //alert("Cities added!");
                    toc.layerInfos.splice(2, 0, {
                        layer: layerCity,
                        title: "Cities"
                    });
                    toc.refresh();
                    h.remove();

                });

                map.addLayer(layerCity);
            });

        });

    </script>
</head>

<body class="claro">
    <div id="content"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:true"
         style="width: 100%; height: 100%; margin: 0;">

        <div id="rightPane"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'right'">

            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                     data-dojo-props="title:'Legend', selected:true">
                    <div id="legendDiv"></div>
                    <button id="btnCities" data-dojo-type="dijit/form/Button" type="button">
                        Add cities
                    </button>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane"
                     data-dojo-props="title:'Pane 2'">
                </div>
            </div>
        </div>
        <div id="map"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'"
             style="overflow: hidden;">
        </div>
    </div>
</body>

</html>

deleted-user-yA_w_FC9FKe5 · ‎10-02-2014

I know it is something simple here. I have a feeling it doesn't recogonize my TOC. I am using this in a function. The alert box with "Found Load" fires off and if I take out the TOC code the layer loads with my expected results.

I have a feeling it is having an issue with seeing the toc. I'm getting this error "ReferenceError: 'toc' is undefined "

KenBuja · ‎10-02-2014

Can you post your code or a version that replicates the error?

deleted-user-yA_w_FC9FKe5 · ‎10-02-2014

It was all because I was using var toc = new TOC . ..... instead of toc = new TOC.

I know you can setVisibleLayers for a ArcGISDynamicMapServiceLayer but can you hide layers in your DSL in the TOC. I have 5 layers inside my DSL but I only want to show 3 and 4.

KenBuja · ‎10-02-2014

Yes, you can hide specific layers. The example site uses this syntax

toc.findTOCNode(dynaLayer1, 12).hide();

in one of my applications, I hide all the layers of a service with many layers and only expose the ones I have in an array (layersArray)

toc.on("load", function () {
    for (var k = 0; k < layerInfo.length; k++) {
      var layer = layerInfo.layer;
      if (layersArray !== null) {
         var dynamicLayerInfos = layer.createDynamicLayerInfosFromLayerInfos();
         for (var j = 0; j < dynamicLayerInfos.length; j++) {
            toc.findTOCNode(layer, dynamicLayerInfos.id).hide();
            for (var i = 0; i < layersArray.length; i++) {
               if (dynamicLayerInfos.id === layersArray.id) {
                  //var test = toc.findTOCNode(layer, dynamicLayerInfos.id);
                  toc.findTOCNode(layer, dynamicLayerInfos.id).show();
               }
            }
         }
      }
   }
});

The layersArray looks something like this (id is the layer number in the service)

var layersArray = [

{

label: "Study Area",

id: 86,

showLayer: true

},

{

label: "Habitat Boundary",

id: 87,

showLayer: true

},

{

label: "Structure",

id: 90,

showLayer: true

},

{

label: "Biological Cover",

id: 88,

showLayer: true

},

{

label: "Live Coral Cover",

id: 89,

showLayer: true

},

{

label: "Percent Hardbottom",

id: 91,

showLayer: true

},

{

label: "Zone",

id: 92,

showLayer: true

}

],

deleted-user-yA_w_FC9FKe5 · ‎10-03-2014

Ken I am still having issues with this but you already answered my original question so I opened a new one out of respect for you and the point system I think you get for answering questions. Here is a link to the new question and thanks for all of your help.

https://community.esri.com/message/426872#426872