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

Remove layer from Table of Contents

deleted-user-yA_w_FC9FKe5

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

Encuentra más publicaciones etiquetadas con

Accepted answers

kenbuja

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>

All comments

deleted-user-yA_w_FC9FKe5

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.

RobertScheitlin__GISP

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

deleted-user-yA_w_FC9FKe5

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

};

kenbuja

Is this different than your previous question?

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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