nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

TOC adding layer into TOC after initial startup

deleted-user-yA_w_FC9FKe5

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

Finde mehr Beiträge mit dem Tag

Accepted answers

kenbuja

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>

All comments

kenbuja

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

deleted-user-yA_w_FC9FKe5

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

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

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.