Remove layer from application and TOC

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

I've created a TOC with a lot of help but in the end what I am doing is creating a layer based on some filters. So what I want to do is add the layer with the filters and then if someone runs it again it removes the old layer and adds a new layer with the same name but with the new filters.

Where I am having problems is removing the layer out of the Table of Contents. So if you click on my example below and click the get results button twice you will see that my "StoresResultsLayer" is showing twice. I only want it to show once. So how do you remove a layer from the TOC?

http://jsfiddle.net/bearcatrunner/y4hwhoge/5/embedded/result/

RobertScheitlin__GISP · ‎10-03-2014

Michael,

Here is the code for doing that:

I am not sure if you are noticing but I have moved the Get Results button click handler and function inside the scope of the projects function again (AMD coding style).

<!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);
      });
    });
  </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" dojoType="dijit.form.Button" data-dojo-props="iconClass:'dijitIconFilter'">Get Results</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

RobertScheitlin__GISP · ‎10-03-2014

Michael,

Here is the code for doing that:

I am not sure if you are noticing but I have moved the Get Results button click handler and function inside the scope of the projects function again (AMD coding style).

<!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);
      });
    });
  </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" dojoType="dijit.form.Button" data-dojo-props="iconClass:'dijitIconFilter'">Get Results</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>