Hide layers in legend of dynamiclayer

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

I am trying to hide two layers in my example provided called states and counties. I am trying to use this code to make it happen but I am getting a rootLayer reference error. Not sure why.

//SCRIPT5007: Unable to get property 'rootLayer' of undefined or null reference
//TOC.js, line 906 character 3

//if (serviceLayerId !== null && serviceLayerId !== undefined && w.rootLayer instanceof (ArcGISDynamicMapServiceLayer)) {

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

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

I created a simple fiddle in hopes that it helps one of you smarter people to help me. Thanks and happy Friday!

Edit fiddle - JSFiddle

RobertScheitlin__GISP · ‎10-03-2014

Michael,

Here is your code updated to do just that:

<head>

  <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, StoresResultsLayer;

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

      var mapLoad = 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);
            }
          }
        });
        mapLoad.remove();
      });

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

      var test2 = registry.byId("btnStores").on("click", function () {
        var StoresResultsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";
        var StoresResultsLayerOptions = {
          "id": "StoresResultsLayer",
          "opacity": .99,
          "showAttribution": false
        };
        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();
          toc.on('load', function (evt) {
            toc.findTOCNode(StoresResultsLayer, 2).hide(); //hide cities in legend
            toc.findTOCNode(StoresResultsLayer, 3).hide(); // hide counties in legend
          });
          h.remove();
        });
        map.addLayers([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 dojoType="dijit.form.Button" id="btnStores" 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>

View solution in original post

RobertScheitlin__GISP · ‎10-03-2014

Michael,

Here is your code updated to do just that:

<head>

  <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, StoresResultsLayer;

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

      var mapLoad = 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);
            }
          }
        });
        mapLoad.remove();
      });

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

      var test2 = registry.byId("btnStores").on("click", function () {
        var StoresResultsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";
        var StoresResultsLayerOptions = {
          "id": "StoresResultsLayer",
          "opacity": .99,
          "showAttribution": false
        };
        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();
          toc.on('load', function (evt) {
            toc.findTOCNode(StoresResultsLayer, 2).hide(); //hide cities in legend
            toc.findTOCNode(StoresResultsLayer, 3).hide(); // hide counties in legend
          });
          h.remove();
        });
        map.addLayers([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 dojoType="dijit.form.Button" id="btnStores" 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>

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

Thanks Robert: AWESOME!

Is their a simple way to copy the code you put in above into notepad++ with out the line numbers?

For those of you following at home Robert changed my example a little and I didn't want to change the way the event of my button was initiated so I just tweaked his code a little with the bolded part and it worked!!!

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

toc.layerInfos.splice(3, 0, {

layer: StoresResultsLayer,

title: "StoresResultsLayer"

});

toc.refresh();

toc.on('load', function (evt) {

toc.findTOCNode(StoresResultsLayer, 0).hide();

toc.findTOCNode(StoresResultsLayer, 1).hide();

toc.findTOCNode(StoresResultsLayer, 2).hide();

});

h.remove();

});