AnsweredAssumed Answered

Setting Content Pane visible does not open Legend widget

Question asked by ghilton on Jul 25, 2016
Latest reply on Jul 25, 2016 by ghilton

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[i];

  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[i].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[i].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[i].checked) {

                visibleLayerIds.push(inputs[i].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>

Attachments

Outcomes