Remove layer from Table of Contents

2364
7
Jump to solution
10-08-2014 07:47 AM
deleted-user-yA_w_FC9FKe5
New Contributor III

I am using the following code to remove a layer from javascript map but how do I also remove it from my toc?

for (var j = 0, jl = map.layerIds.length; j < jl; j++) { 

            var currentLayer = map.getLayer(map.layerIds);

    if(currentLayer.id == 'StoresResultsLayer'){

     map.removeLayer(map.getLayer(map.layerIds));

    

    };   

};

I tried this but I don't get the whole splice thing.

     toc.layerInfos.splice(3, 0);// remove it.

     currentLayer = null;

I create it using this code:

      var StoresResultsLayerURL = "My layer link here";
      var StoresResultsLayerOptions = {
        "id": "StoresResultsLayer",
        "opacity": .99,
        "showAttribution": false
      };
      var StoresResultsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(StoresResultsLayerURL, StoresResultsLayerOptions);

var layerDefinitions = [];
//layerDefinitions[0] = varQuery;
//layerDefinitions[1] = varQuery;
//layerDefinitions[2] = varQuery;
layerDefinitions[3] = varQuery;
layerDefinitions[4] = varQuery;
StoresResultsLayer.setLayerDefinitions(layerDefinitions);

      StoresResultsLayer.setVisibleLayers([3, 4]);
  
var h = StoresResultsLayer.on("load", function () { 
         toc.layerInfos.splice(3, 0, { 
            layer: StoresResultsLayer, 
            title: "Stores Results" 
          }); 
          toc.refresh(); 
          toc.on('load', function (evt) { 
            toc.findTOCNode(StoresResultsLayer, 0).hide(); 
            toc.findTOCNode(StoresResultsLayer, 1).hide();
   toc.findTOCNode(StoresResultsLayer, 2).hide();

          }); 
          h.remove(); 
        });   
  
   //dlMCY_Stores.hide();    

//---  End Add Layer to TOC ---//     
map.addLayer(StoresResultsLayer);

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

You can take Robert Scheitlin‌ code and easily add on an additional button to clear the layer and TOC

<!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 = {

            packages: [{

                name: "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!", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/array",

        ], function (

          Map, FeatureLayer,

          arrayUtils, parser, TOC, registry, BorderContainer, ContentPane, AccordionContainer, domReady, ArcGISDynamicMapServiceLayer, array

        ) {

            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"

                      }]

                }, '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]);

            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 () {

                    toc.layerInfos.splice(2, 0, {

                        layer: layerCity,

                        title: "Cities"

                    });

                    toc.refresh();

                    h.remove();

                });

                map.addLayer(layerCity);

            });

            registry.byId("btnStores").on("click", function () {

                //---Start of remove layer if it exists.

                for (var i = toc.layerInfos.length - 1; i >= 0; i--) {

                    if (toc.layerInfos.title === "StoresResultsLayer") {

                        toc.layerInfos.splice(i, 1);

                        break;

                    }

                }

                for (var i = map.layerIds.length - 1; i >= 0; i--) {

                    var currentLayer = map.getLayer(map.layerIds);

                    if (currentLayer.id == 'StoresResultsLayer') {

                        map.removeLayer(map.getLayer(map.layerIds));

                        break;

                    };

                }

                //---- End of remove layer if it exists.

                var StoresResultsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";

                var StoresResultsLayerOptions = {

                    "id": "StoresResultsLayer",

                    "opacity": .99,

                    "showAttribution": false

                };

                var StoresResultsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(StoresResultsLayerURL, StoresResultsLayerOptions);

                StoresResultsLayer.setVisibleLayers([0, 1]);

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

                    toc.layerInfos.splice(0, 0, {

                        layer: StoresResultsLayer,

                        title: "StoresResultsLayer"

                    });

                    toc.refresh();

                    var rOnce = toc.on('load', function (evt) {

                        rOnce.remove();

                        toc.findTOCNode(StoresResultsLayer, 2).hide(); //hide cities in legend

                        toc.findTOCNode(StoresResultsLayer, 3).hide(); // hide counties in legend

                    });

                    h.remove();

                });

                //---  End Add Layer to TOC ---//

                map.addLayer(StoresResultsLayer);

            });

            registry.byId("btnClear").on("click", function () {

                for (var i = toc.layerInfos.length - 1; i >= 0; i--) {

                    if (toc.layerInfos.title === "StoresResultsLayer") {

                        toc.layerInfos.splice(i, 1);

                        break;

                    }

                }

                toc.refresh();

                for (var i = map.layerIds.length - 1; i >= 0; i--) {

                    var currentLayer = map.getLayer(map.layerIds);

                    if (currentLayer.id == 'StoresResultsLayer') {

                        map.removeLayer(map.getLayer(map.layerIds));

                        break;

                    };

                }

            });

        });

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

                    <button id="btnStores" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconFilter'">Get Results</button>

                    <button id="btnClear" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconFilter'">Clear</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

0 Kudos
7 Replies
KenBuja
MVP Esteemed Contributor

Is this different than your previous question?

0 Kudos
deleted-user-yA_w_FC9FKe5
New Contributor III

Ok so technically no but that code does not remove it from the TOC.  It was part of my original question but it did not do everything.  However, it helped me with a couple of big questions like adding a dynamic layer with certain layers with a filter.  So I marked it answered.

Plus the function I am using is on a different button that clears all results from the map and clears out all of the text boxes and such.  So my problem is that if the layer exist I can remove it from the map but not from the TOC.

for (var j = 0, jl = map.layerIds.length; j < jl; j++) { 

            var currentLayer = map.getLayer(map.layerIds);

    if(currentLayer.id == 'StoresResultsLayer'){

     map.removeLayer(map.getLayer(map.layerIds));

    

    };   

};

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

   The link that Ken has in his post is not marked as answered and in all my testing the code I provided in that thread does remove the layer from the TOC and map...

0 Kudos
deleted-user-yA_w_FC9FKe5
New Contributor III

Ok I fixed that and did make sure it is listed as correct answer.  Get a little confused on that sometimes sorry about that.  My bad.

I took a look at the code and this is not working for me which I copied from the original code.   Again this is going to be from a separate button that I am calling from

  <button dojoType="dijit.form.Button" data-dojo-props="iconClass:'dijitIconClear'" onClick="clear();">Clear Results</button>

      function clear(evt) {

//---Start of remove layer if it exists. 
        for (var i = toc.layerInfos.length - 1; i >= 0; i--) { 
          if (toc.layerInfos.title === "StoresResultsLayer") { 
            toc.layerInfos.splice(i, 1); 
            break; 
          } 
        } 
        for (var i = map.layerIds.length - 1; i >= 0; i--) { 
          var currentLayer = map.getLayer(map.layerIds); 
          if (currentLayer.id == 'StoresResultsLayer') { 
            map.removeLayer(map.getLayer(map.layerIds)); 
            break; 
          }; 
        } 
  toc.refresh();
        //---- End of remove layer if it exists. 

0 Kudos
deleted-user-yA_w_FC9FKe5
New Contributor III

Here is a simplified fiddle.  As you can see it adds in storesresultslayer but if you click the get results more than once you see it in the toc twice.  If I try to click the clear results it removes the layer but not out of the TOC.

http://jsfiddle.net/y4hwhoge/6/embedded/result/

0 Kudos
KenBuja
MVP Esteemed Contributor

You can take Robert Scheitlin‌ code and easily add on an additional button to clear the layer and TOC

<!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 = {

            packages: [{

                name: "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!", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/array",

        ], function (

          Map, FeatureLayer,

          arrayUtils, parser, TOC, registry, BorderContainer, ContentPane, AccordionContainer, domReady, ArcGISDynamicMapServiceLayer, array

        ) {

            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"

                      }]

                }, '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]);

            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 () {

                    toc.layerInfos.splice(2, 0, {

                        layer: layerCity,

                        title: "Cities"

                    });

                    toc.refresh();

                    h.remove();

                });

                map.addLayer(layerCity);

            });

            registry.byId("btnStores").on("click", function () {

                //---Start of remove layer if it exists.

                for (var i = toc.layerInfos.length - 1; i >= 0; i--) {

                    if (toc.layerInfos.title === "StoresResultsLayer") {

                        toc.layerInfos.splice(i, 1);

                        break;

                    }

                }

                for (var i = map.layerIds.length - 1; i >= 0; i--) {

                    var currentLayer = map.getLayer(map.layerIds);

                    if (currentLayer.id == 'StoresResultsLayer') {

                        map.removeLayer(map.getLayer(map.layerIds));

                        break;

                    };

                }

                //---- End of remove layer if it exists.

                var StoresResultsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";

                var StoresResultsLayerOptions = {

                    "id": "StoresResultsLayer",

                    "opacity": .99,

                    "showAttribution": false

                };

                var StoresResultsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(StoresResultsLayerURL, StoresResultsLayerOptions);

                StoresResultsLayer.setVisibleLayers([0, 1]);

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

                    toc.layerInfos.splice(0, 0, {

                        layer: StoresResultsLayer,

                        title: "StoresResultsLayer"

                    });

                    toc.refresh();

                    var rOnce = toc.on('load', function (evt) {

                        rOnce.remove();

                        toc.findTOCNode(StoresResultsLayer, 2).hide(); //hide cities in legend

                        toc.findTOCNode(StoresResultsLayer, 3).hide(); // hide counties in legend

                    });

                    h.remove();

                });

                //---  End Add Layer to TOC ---//

                map.addLayer(StoresResultsLayer);

            });

            registry.byId("btnClear").on("click", function () {

                for (var i = toc.layerInfos.length - 1; i >= 0; i--) {

                    if (toc.layerInfos.title === "StoresResultsLayer") {

                        toc.layerInfos.splice(i, 1);

                        break;

                    }

                }

                toc.refresh();

                for (var i = map.layerIds.length - 1; i >= 0; i--) {

                    var currentLayer = map.getLayer(map.layerIds);

                    if (currentLayer.id == 'StoresResultsLayer') {

                        map.removeLayer(map.getLayer(map.layerIds));

                        break;

                    };

                }

            });

        });

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

                    <button id="btnStores" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconFilter'">Get Results</button>

                    <button id="btnClear" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconFilter'">Clear</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> 

0 Kudos
deleted-user-yA_w_FC9FKe5
New Contributor III

I think part of my problem was that at one point we were using the layer title and then in the second part using the Layer.id.  I named them different in my real code vs my fiddle example code.  Sometimes it is just the simple stuff that is easy to over look.

//---Start of remove layer if it exists. 
        for (var i = toc.layerInfos.length - 1; i >= 0; i--) { 
          if (toc.layerInfos[i].title === "StoresResultsLayer") { 
            toc.layerInfos.splice(i, 1); 
            break; 
          } 
        } 
        for (var i = map.layerIds.length - 1; i >= 0; i--) { 
          var currentLayer = map.getLayer(map.layerIds); 
          if (currentLayer.id == 'Stores Results') { 
            map.removeLayer(map.getLayer(map.layerIds)); 
            break; 
          }; 
        } 
  toc.refresh();
        //---- End of remove layer if it exists. 

0 Kudos