Setting Content Pane visible does not open Legend widget

2548
3
Jump to solution
07-25-2016 06:00 AM
GeorgeHilton__GISP
New Contributor III

I have a Content Pane that contains an AccordionContainer and two content panes.  One of the content panes contains a Legend for the map.  I want the content pane that contains everything to be hidden when the map loads.  I have a button that I've set up to click to open the outer Content Pane and show the Legend.  When I set the visibility of the outer content pane to hidden and click the button, the Legend is not visible when it opens.  However, if I set the visibility of the outer content pane to visible the Legend opens up and is visible when the map opens.  I'm not sure what I'm missing.  but I have code and a couple screen shots below.

Thanks,
George Hilton

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Identify with Popup</title>

   

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

  <script src="https://js.arcgis.com/3.16/"></script>

   

  <style>

      html, body, #map {

        height:100%;

        width:100%;

        margin:0;

        padding:0;

      }

   #button{

    position: absolute;

    width: 50px;

    height: 25px;

    left: 10px;

    top: 100px;

    background-color:grey;

    border: 1px black;

    border-radius: 5px;

    z-index: 6;

   }

   #button:hover {

    background-color: green;

   }

  

   #zoomout{

    position: absolute;

    width: 50px;

    height: 25px;

    left: 10px;

    top: 80px;

    background-color:green;

    z-index: 6;

   }

  

   #rightPane {

  position: absolute;

  //float: right;

  right: 0px;

  bottom: 50px;

  height: 80%;

  width: 20%;

  background-color: white;

  border: 1px solid grey;

  border-radius: 5px;

  z-index: 6;

   }

  

   #leftPane {

     position: absolute;

  //float: left;

  left: 0px;

  bottom: 10px;

  height: 400px;

  width: 300px;

  background-color: white;

  border: 1px solid green;

  border-radius: 5px;

  z-index: 6;

   }

  

   #legendPane {

      border: solid #97DCF2 1px;

   background-color: white;

   }

  

   .dijitAccordionTitle {

  font-size: 1.25em;

  font-family: Arial;

   }

  

   .dijitAccordionTitle:hover {

  background-color: grey;

   }

  

   .dijitAccordionTitleSelected {

    background-color: #ccffcc;

   

   }

  

    </style>

    <script>

      var map;

      var pLayer;

   var visibleLayerIds;

   var legend;

  

      require([   

        "esri/map",

        "esri/InfoTemplate",

  "esri/dijit/Legend",

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/tasks/IdentifyTask",

        "esri/tasks/IdentifyParameters",

        "esri/dijit/Popup",

  "dojo/on",

        "dojo/parser",

  "dojo/_base/array",

        "esri/Color",

  "dijit/form/Button",

        "dijit/layout/AccordionContainer",

  "dijit/layout/ContentPane",

  "dijit/layout/TabContainer",

  "dijit/registry",

        "dojo/domReady!"

      ], function (

        Map, InfoTemplate, Legend, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,

        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup, on, parser,

        arrayUtils, Color, registry

      ) {

     parser.parse();

        var identifyTask, identifyParams;

      

        map = new Map("map", {

          basemap: "topo",

   logo: false,

   slider: false,

   showAttribution: false,

          center: [-73.68, 43.35],

          zoom: 11

         

        });

       

  var parcelsURL = "http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer";

        pLayer = new ArcGISDynamicMapServiceLayer(parcelsURL);

  map.addLayers([pLayer]);

  map.on("load", mapReady);

        map.on("layers-add-result", layersadded);

                

        function layersadded() {

  

  document.getElementById("layer0CheckBox").checked=true;

  document.getElementById("layer1CheckBox").checked=true;

  document.getElementById("layer2CheckBox").checked=true;

  document.getElementById("layer3CheckBox").checked=true;

  document.getElementById("layer4CheckBox").checked=false;

  visibleLayerIds= [0,1,2,3]

  

  legend = new Legend({

   map: map,

  

   layerInfos: [{

     layer: pLayer,

  hideLayers: [0,1],

  title: "Interactive Map Layers"

   }]

  },"legendDiv");

  legend.startup();

  

  

  }

        function mapReady () {

         

  

   for (i=0; i < pLayer.layerInfos.length; i++) {

      var lname = pLayer.layerInfos;

  console.log(lname.name);

  

     if (lname.defaultVisibility ==true) {console.log("vis" + lname.name)}

   }

  

  

   map.on("click", executeIdentifyTask);

        

          identifyTask = new IdentifyTask(parcelsURL);

          identifyParams = new IdentifyParameters();

          identifyParams.tolerance = 3;

          identifyParams.returnGeometry = true;

          identifyParams.layerIds = [3,5,6];

          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

          identifyParams.width = map.width;

          identifyParams.height = map.height;

        }

        function executeIdentifyTask (event) {

          identifyParams.geometry = event.mapPoint;

          identifyParams.mapExtent = map.extent;

          identifyTask.execute(identifyParams, function(results){

      

  

      

               for (i = 0; i < results.length; i++) {

       

              var layername = results.layerName;

  console.log(layername);

               }  

  

    });

  }

        

      });

  

   function buttonclick() {

  

  var legwin = document.getElementById("rightPane");

  //**** THIS IS THE CODE TO SET THE OUTER CONTENT PANE VISIBLE FROM BUTTON CLICK

  //legwin.style.visibility = 'visible';

  var layercount = pLayer.layerInfos.length;

  

  for (i = 0; i < layercount; i++) {

       

  // console.log(pLayer.layerInfos.name);

         }

  require(["esri/toolbars/navigation"], function(Navigation) {

  navToolbar = new Navigation(map);

  navToolbar.activate(Navigation.ZOOM_IN); });

  }

  function updateVisibility(inbox) {

   

         var inputs = document.getElementsByClassName("list_item");

         //var inputCount = inputs.length;

         // alert("Class Count" + incnt); 

         visibleLayerIds = [];

  for (var i = 0; i < inputCount; i++) {

              if (inputs.checked) {

                visibleLayerIds.push(inputs.value);

              }

            }

            if (visibleLayerIds.length === 0) {

              visibleLayerIdsp.push(-1);

            }

            pLayer.setVisibleLayers(visibleLayerIds);

     legend.refresh([{layer: pLayer}]);

  }

    </script>

  </head>

  <body class="claro">

    <div id="map">

   <div id="leftPane" >

     <input type='checkbox' class='list_item' id='layer0CheckBox' value=0 onchange="updateVisibility(id)" />Municipal Boundaries<br>

     <input type='checkbox' class='list_item' id='layer1CheckBox' value=1 onchange="updateVisibility(id)" />Town Boundary<br>

     <input type='checkbox' class='list_item' id='layer2CheckBox' value=2 onchange="updateVisibility(id)" />Roads<br>

     <input type='checkbox' class='list_item' id='layer3CheckBox' value=3 onchange="updateVisibility(id)" />Queensbury Parcels<br>

     <input type='checkbox' class='list_item' id='layer4CheckBox' value=4 onchange="updateVisibility(id)" />Election Districts<br>

     <input type='checkbox' class='list_item' id='layer5CheckBox' value=5 onchange="updateVisibility(id)" />Subdivisions<br>

  <input type='checkbox' class='list_item' id='layer6CheckBox' value=6 onchange="updateVisibility(id)" />Zoning Districts<br>

  <input type='checkbox' class='list_item' id='layer7CheckBox' value=7 onchange="updateVisibility(id)" />Sewerlines<br>

  <input type='checkbox' class='list_item' id='layer8CheckBox' value=8 onchange="updateVisibility(id)" />Waterlines<br>

  <input type='checkbox' class='list_item' id='layer9CheckBox' value=9 onchange="updateVisibility(id)" />Waterbodies<br>

  <input type='checkbox' class='list_item' id='layer10CheckBox' value=10 onchange="updateVisibility(id)" />Streams<br>

  <input type='checkbox' class='list_item' id='layer11CheckBox' value=11 onchange="updateVisibility(id)" />Flood Zones<br>

  <input type='checkbox' class='list_item' id='layer12CheckBox' value=12 onchange="updateVisibility(id)" />Critical Environmental Areas<br>

  <input type='checkbox' class='list_item' id='layer13CheckBox' value=13 onchange="updateVisibility(id)" />Mapped DEC Wetlands<br>

  <input type='checkbox' class='list_item' id='layer14CheckBox' value=14 onchange="updateVisibility(id)" />Mapped APA Wetlands<br>

  <input type='checkbox' class='list_item' id='layer15CheckBox' value=15 onchange="updateVisibility(id)" />NWI Wetlands<br>

   </div>

   <div id="rightPane"

      data-dojo-type="dijit/layout/ContentPane"

         data-dojo-props="region:'right'" style="visibility: visible">  <!-- VISIBILITY SET TO HIDDEN TO HIDE ON MAP LOAD -->

   

   

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

        </div>

        <div data-dojo-type="dijit/layout/ContentPane" id="layerList"

           data-dojo-props="title:'Layer List'">

         <div id="tabs" data-dojo-type="dijit/layout/TabContainer" style="width:200px; height:150px;">

          <div id="bldgTab" data-dojo-type="dijit/layout/ContentPane" title="Buildings"></div>

          <div id="parcelTab" data-dojo-type="dijit/layout/ContentPane" title="Tax Parcels"></div>

         </div>

     </div>

         

        </div>

      </div>

   

   </div>

   

  

  

   <div id="button" onclick="buttonclick()"></div>

  

  </div>

  </body>

</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

George,

I have tweaked your code a little to fix that issue:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.16/"></script>

    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #button {
            position: absolute;
            width: 50px;
            height: 25px;
            left: 10px;
            top: 100px;
            background-color: grey;
            border: 1px black;
            border-radius: 5px;
            z-index: 6;
        }

        #button:hover {
            background-color: green;
        }

        #zoomout {
            position: absolute;
            width: 50px;
            height: 25px;
            left: 10px;
            top: 80px;
            background-color: green;
            z-index: 6;
        }

        #rightPane {
            position: absolute;
            //float: right;
            right: 0px;
            bottom: 50px;
            height: 80%;
            width: 20%;
            background-color: white;
            border: 1px solid grey;
            border-radius: 5px;
            z-index: 6;
        }

        #leftPane {
            position: absolute;
            //float: left;
            left: 0px;
            bottom: 10px;
            height: 400px;
            width: 300px;
            background-color: white;
            border: 1px solid green;
            border-radius: 5px;
            z-index: 6;
        }

        #legendPane {
            border: solid #97DCF2 1px;
            background-color: white;
        }

        .dijitAccordionTitle {
            font-size: 1.25em;
            font-family: Arial;
        }

        .dijitAccordionTitle:hover {
            background-color: grey;
        }

        .dijitAccordionTitleSelected {
            background-color: #ccffcc;
        }
    </style>

    <script>
        var map;
        var pLayer;
        var visibleLayerIds;
        var legend;

        require([
            "esri/map",
            "esri/InfoTemplate",
            "esri/dijit/Legend",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/tasks/IdentifyTask",
            "esri/tasks/IdentifyParameters",
            "esri/dijit/Popup",
            "dojo/on",
            "dojo/parser",
            "dojo/_base/array",
            "esri/Color",
            "dijit/registry",
            "esri/toolbars/navigation",
            "dijit/form/Button",
            "dijit/layout/AccordionContainer",
            "dijit/layout/ContentPane",
            "dijit/layout/TabContainer",
            "dojo/domReady!"
        ], function(
            Map, InfoTemplate, Legend, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
            SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup, on, parser,
            arrayUtils, Color, registry, Navigation
        ) {
            parser.parse();
            var identifyTask, identifyParams;

            on(document.getElementById("button"), "click", buttonclick);

            map = new Map("map", {
                basemap: "topo",
                logo: false,
                slider: false,
                showAttribution: false,
                center: [-73.68, 43.35],
                zoom: 11
            });

            var parcelsURL = "http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer";
            pLayer = new ArcGISDynamicMapServiceLayer(parcelsURL);
            map.addLayers([pLayer]);

            map.on("load", mapReady);
            map.on("layers-add-result", layersadded);

            function layersadded() {
                document.getElementById("layer0CheckBox").checked = true;
                document.getElementById("layer1CheckBox").checked = true;
                document.getElementById("layer2CheckBox").checked = true;
                document.getElementById("layer3CheckBox").checked = true;
                document.getElementById("layer4CheckBox").checked = false;
                visibleLayerIds = [0, 1, 2, 3]

                legend = new Legend({
                    map: map,
                    layerInfos: [{
                        layer: pLayer,
                        hideLayers: [0, 1],
                        title: "Interactive Map Layers"
                    }]
                }, "legendDiv");
                legend.startup();
            }

            function mapReady() {
                for (i = 0; i < pLayer.layerInfos.length; i++) {
                    var lname = pLayer.layerInfos;
                    console.log(lname.name);
                    if (lname.defaultVisibility == true) {
                        console.log("vis" + lname.name)
                    }
                }

                map.on("click", executeIdentifyTask);
                identifyTask = new IdentifyTask(parcelsURL);
                identifyParams = new IdentifyParameters();
                identifyParams.tolerance = 3;
                identifyParams.returnGeometry = true;
                identifyParams.layerIds = [3, 5, 6];
                identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                identifyParams.width = map.width;
                identifyParams.height = map.height;
            }

            function executeIdentifyTask(event) {
                identifyParams.geometry = event.mapPoint;
                identifyParams.mapExtent = map.extent;
                identifyTask.execute(identifyParams, function(results) {
                    for (i = 0; i < results.length; i++) {
                        var layername = results.layerName;
                        console.log(layername);
                    }
                });
            }

            function buttonclick() {
                var legwin = document.getElementById("rightPane");
                //**** THIS IS THE CODE TO SET THE OUTER CONTENT PANE VISIBLE FROM BUTTON CLICK
                legwin.style.visibility = 'visible';
                registry.byId("ac").selectChild("legendPane", true);

                var layercount = pLayer.layerInfos.length;

                for (i = 0; i < layercount; i++) {
                    // console.log(pLayer.layerInfos.name);
                }
                navToolbar = new Navigation(map);
                navToolbar.activate(Navigation.ZOOM_IN);
            }
        });

        function updateVisibility(inbox) {
            var inputs = document.getElementsByClassName("list_item");
            //var inputCount = inputs.length;
            // alert("Class Count" + incnt);
            visibleLayerIds = [];

            for (var i = 0; i < inputCount; i++) {
                if (inputs.checked) {
                    visibleLayerIds.push(inputs.value);
                }
            }

            if (visibleLayerIds.length === 0) {
                visibleLayerIdsp.push(-1);
            }

            pLayer.setVisibleLayers(visibleLayerIds);
            legend.refresh([{
                layer: pLayer
            }]);
        }
    </script>
</head>

<body class="claro">
    <div id="map">
        <div id="leftPane">
            <input type='checkbox' class='list_item' id='layer0CheckBox' value=0 onchange="updateVisibility(id)" />Municipal Boundaries
            <br>
            <input type='checkbox' class='list_item' id='layer1CheckBox' value=1 onchange="updateVisibility(id)" />Town Boundary
            <br>
            <input type='checkbox' class='list_item' id='layer2CheckBox' value=2 onchange="updateVisibility(id)" />Roads
            <br>
            <input type='checkbox' class='list_item' id='layer3CheckBox' value=3 onchange="updateVisibility(id)" />Queensbury Parcels
            <br>
            <input type='checkbox' class='list_item' id='layer4CheckBox' value=4 onchange="updateVisibility(id)" />Election Districts
            <br>
            <input type='checkbox' class='list_item' id='layer5CheckBox' value=5 onchange="updateVisibility(id)" />Subdivisions
            <br>
            <input type='checkbox' class='list_item' id='layer6CheckBox' value=6 onchange="updateVisibility(id)" />Zoning Districts
            <br>
            <input type='checkbox' class='list_item' id='layer7CheckBox' value=7 onchange="updateVisibility(id)" />Sewerlines
            <br>
            <input type='checkbox' class='list_item' id='layer8CheckBox' value=8 onchange="updateVisibility(id)" />Waterlines
            <br>
            <input type='checkbox' class='list_item' id='layer9CheckBox' value=9 onchange="updateVisibility(id)" />Waterbodies
            <br>
            <input type='checkbox' class='list_item' id='layer10CheckBox' value=10 onchange="updateVisibility(id)" />Streams
            <br>
            <input type='checkbox' class='list_item' id='layer11CheckBox' value=11 onchange="updateVisibility(id)" />Flood Zones
            <br>
            <input type='checkbox' class='list_item' id='layer12CheckBox' value=12 onchange="updateVisibility(id)" />Critical Environmental Areas
            <br>
            <input type='checkbox' class='list_item' id='layer13CheckBox' value=13 onchange="updateVisibility(id)" />Mapped DEC Wetlands
            <br>
            <input type='checkbox' class='list_item' id='layer14CheckBox' value=14 onchange="updateVisibility(id)" />Mapped APA Wetlands
            <br>
            <input type='checkbox' class='list_item' id='layer15CheckBox' value=15 onchange="updateVisibility(id)" />NWI Wetlands
            <br>
        </div>
        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" style="visibility: hidden">
            <!-- VISIBILITY SET TO HIDDEN TO HIDE ON MAP LOAD -->
            <div data-dojo-type="dijit/layout/AccordionContainer" id="ac">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend'">
                    <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" id="layerList" data-dojo-props="title:'Layer List', selected:true">
                    <div id="tabs" data-dojo-type="dijit/layout/TabContainer" style="width:200px; height:150px;">
                        <div id="bldgTab" data-dojo-type="dijit/layout/ContentPane" title="Buildings"></div>
                        <div id="parcelTab" data-dojo-type="dijit/layout/ContentPane" title="Tax Parcels"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="button"></div>
    </div>
</body>
</html>

View solution in original post

3 Replies
TimWitt2
MVP Alum

When you click the button to make it visible, did you try to run the refresh method? Legend | API Reference | ArcGIS API for JavaScript 3.17

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

George,

I have tweaked your code a little to fix that issue:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.16/"></script>

    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #button {
            position: absolute;
            width: 50px;
            height: 25px;
            left: 10px;
            top: 100px;
            background-color: grey;
            border: 1px black;
            border-radius: 5px;
            z-index: 6;
        }

        #button:hover {
            background-color: green;
        }

        #zoomout {
            position: absolute;
            width: 50px;
            height: 25px;
            left: 10px;
            top: 80px;
            background-color: green;
            z-index: 6;
        }

        #rightPane {
            position: absolute;
            //float: right;
            right: 0px;
            bottom: 50px;
            height: 80%;
            width: 20%;
            background-color: white;
            border: 1px solid grey;
            border-radius: 5px;
            z-index: 6;
        }

        #leftPane {
            position: absolute;
            //float: left;
            left: 0px;
            bottom: 10px;
            height: 400px;
            width: 300px;
            background-color: white;
            border: 1px solid green;
            border-radius: 5px;
            z-index: 6;
        }

        #legendPane {
            border: solid #97DCF2 1px;
            background-color: white;
        }

        .dijitAccordionTitle {
            font-size: 1.25em;
            font-family: Arial;
        }

        .dijitAccordionTitle:hover {
            background-color: grey;
        }

        .dijitAccordionTitleSelected {
            background-color: #ccffcc;
        }
    </style>

    <script>
        var map;
        var pLayer;
        var visibleLayerIds;
        var legend;

        require([
            "esri/map",
            "esri/InfoTemplate",
            "esri/dijit/Legend",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/tasks/IdentifyTask",
            "esri/tasks/IdentifyParameters",
            "esri/dijit/Popup",
            "dojo/on",
            "dojo/parser",
            "dojo/_base/array",
            "esri/Color",
            "dijit/registry",
            "esri/toolbars/navigation",
            "dijit/form/Button",
            "dijit/layout/AccordionContainer",
            "dijit/layout/ContentPane",
            "dijit/layout/TabContainer",
            "dojo/domReady!"
        ], function(
            Map, InfoTemplate, Legend, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
            SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup, on, parser,
            arrayUtils, Color, registry, Navigation
        ) {
            parser.parse();
            var identifyTask, identifyParams;

            on(document.getElementById("button"), "click", buttonclick);

            map = new Map("map", {
                basemap: "topo",
                logo: false,
                slider: false,
                showAttribution: false,
                center: [-73.68, 43.35],
                zoom: 11
            });

            var parcelsURL = "http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer";
            pLayer = new ArcGISDynamicMapServiceLayer(parcelsURL);
            map.addLayers([pLayer]);

            map.on("load", mapReady);
            map.on("layers-add-result", layersadded);

            function layersadded() {
                document.getElementById("layer0CheckBox").checked = true;
                document.getElementById("layer1CheckBox").checked = true;
                document.getElementById("layer2CheckBox").checked = true;
                document.getElementById("layer3CheckBox").checked = true;
                document.getElementById("layer4CheckBox").checked = false;
                visibleLayerIds = [0, 1, 2, 3]

                legend = new Legend({
                    map: map,
                    layerInfos: [{
                        layer: pLayer,
                        hideLayers: [0, 1],
                        title: "Interactive Map Layers"
                    }]
                }, "legendDiv");
                legend.startup();
            }

            function mapReady() {
                for (i = 0; i < pLayer.layerInfos.length; i++) {
                    var lname = pLayer.layerInfos;
                    console.log(lname.name);
                    if (lname.defaultVisibility == true) {
                        console.log("vis" + lname.name)
                    }
                }

                map.on("click", executeIdentifyTask);
                identifyTask = new IdentifyTask(parcelsURL);
                identifyParams = new IdentifyParameters();
                identifyParams.tolerance = 3;
                identifyParams.returnGeometry = true;
                identifyParams.layerIds = [3, 5, 6];
                identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                identifyParams.width = map.width;
                identifyParams.height = map.height;
            }

            function executeIdentifyTask(event) {
                identifyParams.geometry = event.mapPoint;
                identifyParams.mapExtent = map.extent;
                identifyTask.execute(identifyParams, function(results) {
                    for (i = 0; i < results.length; i++) {
                        var layername = results.layerName;
                        console.log(layername);
                    }
                });
            }

            function buttonclick() {
                var legwin = document.getElementById("rightPane");
                //**** THIS IS THE CODE TO SET THE OUTER CONTENT PANE VISIBLE FROM BUTTON CLICK
                legwin.style.visibility = 'visible';
                registry.byId("ac").selectChild("legendPane", true);

                var layercount = pLayer.layerInfos.length;

                for (i = 0; i < layercount; i++) {
                    // console.log(pLayer.layerInfos.name);
                }
                navToolbar = new Navigation(map);
                navToolbar.activate(Navigation.ZOOM_IN);
            }
        });

        function updateVisibility(inbox) {
            var inputs = document.getElementsByClassName("list_item");
            //var inputCount = inputs.length;
            // alert("Class Count" + incnt);
            visibleLayerIds = [];

            for (var i = 0; i < inputCount; i++) {
                if (inputs.checked) {
                    visibleLayerIds.push(inputs.value);
                }
            }

            if (visibleLayerIds.length === 0) {
                visibleLayerIdsp.push(-1);
            }

            pLayer.setVisibleLayers(visibleLayerIds);
            legend.refresh([{
                layer: pLayer
            }]);
        }
    </script>
</head>

<body class="claro">
    <div id="map">
        <div id="leftPane">
            <input type='checkbox' class='list_item' id='layer0CheckBox' value=0 onchange="updateVisibility(id)" />Municipal Boundaries
            <br>
            <input type='checkbox' class='list_item' id='layer1CheckBox' value=1 onchange="updateVisibility(id)" />Town Boundary
            <br>
            <input type='checkbox' class='list_item' id='layer2CheckBox' value=2 onchange="updateVisibility(id)" />Roads
            <br>
            <input type='checkbox' class='list_item' id='layer3CheckBox' value=3 onchange="updateVisibility(id)" />Queensbury Parcels
            <br>
            <input type='checkbox' class='list_item' id='layer4CheckBox' value=4 onchange="updateVisibility(id)" />Election Districts
            <br>
            <input type='checkbox' class='list_item' id='layer5CheckBox' value=5 onchange="updateVisibility(id)" />Subdivisions
            <br>
            <input type='checkbox' class='list_item' id='layer6CheckBox' value=6 onchange="updateVisibility(id)" />Zoning Districts
            <br>
            <input type='checkbox' class='list_item' id='layer7CheckBox' value=7 onchange="updateVisibility(id)" />Sewerlines
            <br>
            <input type='checkbox' class='list_item' id='layer8CheckBox' value=8 onchange="updateVisibility(id)" />Waterlines
            <br>
            <input type='checkbox' class='list_item' id='layer9CheckBox' value=9 onchange="updateVisibility(id)" />Waterbodies
            <br>
            <input type='checkbox' class='list_item' id='layer10CheckBox' value=10 onchange="updateVisibility(id)" />Streams
            <br>
            <input type='checkbox' class='list_item' id='layer11CheckBox' value=11 onchange="updateVisibility(id)" />Flood Zones
            <br>
            <input type='checkbox' class='list_item' id='layer12CheckBox' value=12 onchange="updateVisibility(id)" />Critical Environmental Areas
            <br>
            <input type='checkbox' class='list_item' id='layer13CheckBox' value=13 onchange="updateVisibility(id)" />Mapped DEC Wetlands
            <br>
            <input type='checkbox' class='list_item' id='layer14CheckBox' value=14 onchange="updateVisibility(id)" />Mapped APA Wetlands
            <br>
            <input type='checkbox' class='list_item' id='layer15CheckBox' value=15 onchange="updateVisibility(id)" />NWI Wetlands
            <br>
        </div>
        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" style="visibility: hidden">
            <!-- VISIBILITY SET TO HIDDEN TO HIDE ON MAP LOAD -->
            <div data-dojo-type="dijit/layout/AccordionContainer" id="ac">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend'">
                    <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" id="layerList" data-dojo-props="title:'Layer List', selected:true">
                    <div id="tabs" data-dojo-type="dijit/layout/TabContainer" style="width:200px; height:150px;">
                        <div id="bldgTab" data-dojo-type="dijit/layout/ContentPane" title="Buildings"></div>
                        <div id="parcelTab" data-dojo-type="dijit/layout/ContentPane" title="Tax Parcels"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="button"></div>
    </div>
</body>
</html>
GeorgeHilton__GISP
New Contributor III

Thanks Robert !!  The fix seems to be that you assigned an id to the AccordionContainer and then set the Legend visible with selectChild using the ContentPane's id (legendPane).

Thanks again for your quick response and your edits on the code !

George

0 Kudos