topic Re: Remove layer from Table of Contents in ArcGIS JavaScript Maps SDK Questions

Remove layer from Table of Contents

deleted-user-yA_w_FC9FKe5 — Wed, 08 Oct 2014 14:47:53 GMT

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

Re: Remove layer from Table of Contents

KenBuja — Wed, 08 Oct 2014 15:10:23 GMT

Is this different than your previous question?

Re: Remove layer from Table of Contents

deleted-user-yA_w_FC9FKe5 — Wed, 08 Oct 2014 16:12:35 GMT

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

};

Re: Remove layer from Table of Contents

RobertScheitlin__GISP — Wed, 08 Oct 2014 16:22:12 GMT

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

Re: Remove layer from Table of Contents

deleted-user-yA_w_FC9FKe5 — Wed, 08 Oct 2014 16:53:39 GMT

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.

Re: Remove layer from Table of Contents

deleted-user-yA_w_FC9FKe5 — Wed, 08 Oct 2014 17:49:12 GMT

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/

Re: Remove layer from Table of Contents

KenBuja — Wed, 08 Oct 2014 18:10:08 GMT

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>

Re: Remove layer from Table of Contents

deleted-user-yA_w_FC9FKe5 — Thu, 09 Oct 2014 13:44:29 GMT

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.