Latest Contributions by jaykapalczynski

I have a main index.js page This page defines some Map Services and builds a legend.  This works fine. I have a couple other .js pages that also display Map Services and I am trying to get them in the same Legend unsuccessfully. I don't think I have to create a new LEGEND in the LayerList.js page but rather just push the layers from the LayerListPage back to the Index.js page to be included in the already defined LEGEND? Looking for some thoughts on this....not sure where to go from here... Notice the unction call to the second .js page  window.LoadLayerList(); in the index.js page Hope this make sense.... Main Index.js page //ADD THE LEGEND window.map.on("layers-add-result", function (evt) {    // CYCLE through and grab all the layer names to add to the LEGEND PLUS    // Remove layers not inteneted for the legend.    var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {      if (layer.layer.id === "Roads" || layer.layer.id === "Roads1") { return { }; }    //Hides Layers in the Legend      else { return { layer: layer.layer, title: layer.layer.name }; } //Else return All others    });    // CYCLE through and grab all the layer names to add to the LEGEND    if (layerInfo.length > 0) {      var legendDijit = new Legend({         map: map,         layerInfos: layerInfo,      }, "legend");    legendDijit.startup();    legendDijit.refresh();    }       }); window.LoadLayerList();     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ LayerList.js page window.LoadLayerList = function(){   var District2 = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Projects/AVL2/MapServer/4", {      mode: FeatureLayer.MODE_SNAPSHOT,      id: "District2",      opacity: .2,      visible: true      });   legendLayers4.push({ layer: District2, title: 'District Boundary' });   window.map.on("layers-add-result", function (evt) {      var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {      if (layer.layer.id === "Biologist" || layer.layer.id === "District2") { return { }; } //Hides Layers in the Legend      else { return { layer: layer.layer, title: layer.layer.name }; } //Else return All others         });      if (layerInfo.length > 0) {         var legendDijit = new Legend({           map: map,           layerInfos: layerInfo,         }, "legend");         legendDijit.startup();         legendDijit.refresh();      }    });         // ADD MAP LAYERS }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

I have an accordion style section that contains content panes with layers inside them for the user to turn on and off As seen below there are 5 content panes I am building a layer list that has checkboxes built on the fly with JavaScript.    I am using this on each FeatureLayer to determine which one it goes into:           legendLayers4.push({ layer: RailYards, title: 'Rail Yards' }); I added a button to the each of their content panes to be used to check all boxes or uncheck all boxes What I am trying to do now is turn on all layers in that specific content pane by clicking the BUTTON or turning them all off by clicking the same BUTTON I can handle all the little stuff but just cant see to get control of them in Javascript.... How do I test each checkbox...I can return their Layer title and Layer ID etc but can seem to be able to get the actual checkbox reference to test if it is checked or not...If I can get that far I can handle the button etc I am trying to get to the individual checkboxes in document.getElementById("FeaturesButton").onclick = function () {  You can see below that I am looping trough the legendLayers4 and creating a checkbox and label for each checkbox to be created. <div id="IDAccordionPaneLayers" data-dojo-type="dijit.layout.AccordionContainer" style="color:black; height:50%; width:90%;">                           <!-- SNIP  -->         <div id="idLayers4" data-dojo-type="dijit.layout.ContentPane"  data-dojo-props="title:'Features'" selected="true" >           <button type="button" id="FeaturesButton" style="float: right;" >Click Me!</button>           <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Natural Disasters'">                <div id="toggle4" style="padding: 2px 2px; color:Black;"></div>           </div>      </div>      <!-- SNIP  -->                 </div>     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ // ON EACH LAYER I SPECIFY WHICH LEGEND LAYER I WANT IT TO GO TO legendLayers4.push({ layer: RailYards, title: 'Rail Yards' });      arrayUtils.forEach(legendLayers4, function (layer) {      var layerName = layer.title;      var checkBox = new CheckBox({           name: "checkBox" + layer.layer.id,           value: layer.layer.id,           checked: layer.layer.visible      });      checkBox.on("change", function () {           var targetLayer = map.getLayer(this.value);           targetLayer.setVisibility(!targetLayer.visible);           this.checked = targetLayer.visible;      });      //add the check box and label to the toc      domConstruct.place(checkBox.domNode, dom.byId("toggle4"), "after");      var checkLabel = domConstruct.create('label', {           'for': checkBox.name,           innerHTML: layerName           }, checkBox.domNode, "after");      domConstruct.place("<br />", checkLabel, "after"); });      document.getElementById("FeaturesButton").onclick = function () {      arrayUtils.forEach(legendLayers4, function (layer) {                                var layerName = layer.title;           //alert (layerName);                                var layerID = layer.layer.id;           //alert(layerID);                                var i;           for (i = 0; i < layerID.length; i++) {                //myNodelist.style.backgroundColor = "red";                alert(layerID);           }      });                      };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more