chagan02

Trying To Set Visible Layers By Check Boxes

Discussion created by chagan02 on May 17, 2014
Latest reply on May 21, 2014 by chagan02
Well made a little progress before hitting another road block. Trying to toggle visibility of n number of layers by check box.  The code below loads up fine, but I get a "visible[lc] is undefined" and "a.join is not a function" errors in the console.  I played around with it for about four hours and all I could get it to do what load both layers at the same time when clicking either check box.  Obviously, the check boxes need to be independent of one another.   I think the error lies in the for loops.  Did not testing and it has the correct number for "layers", and also for "il".  What am I missing?

Also, not sure if this "imageParameters.layerIds = [0,1,2];" is correct?  I have the webmap loaded, then two layers on top, shouldn't that be correct with an index of "0"?

  <script src="http://js.arcgis.com/3.9/"></script>
  <script>
      
    require([
   "esri/map", 
   "dojo/parser",
   "dojo/ready",
   "dijit/layout/BorderContainer",
   "dijit/layout/ContentPane",
   "dojo/dom",
   "dojo/on",
   "dojo/query",
   "esri/layers/CSVLayer",
   "esri/Color",
   "esri/symbols/SimpleMarkerSymbol",
   "esri/renderers/SimpleRenderer",
   "esri/InfoTemplate",
   "esri/urlUtils",
   "esri/arcgis/utils",
   "esri/dijit/Legend",
   "esri/dijit/Scalebar",
   "esri/layers/ArcGISDynamicMapServiceLayer",
   "esri/layers/FeatureLayer",
   "esri/layers/ImageParameters",
   "dojo/domReady!"
    ], function(
   Map,
   parser,
   ready,
   BorderContainer,
   ContentPane,
   dom,
   on,
   query,
   CSVLayer,
   Color, 
   SimpleMarkerSymbol, 
   SimpleRenderer, 
   InfoTemplate,
   urlUtils,
   arcgisUtils,
   Legend,
   Scalebar,
   ArcGISDynamicMapServiceLayer,
   FeatureLayer,   
   ImageParameters
    ) {
    
    
   ready(function(){

   parser.parse();
   

   var visible = [] ,layers = [];
   
   arcgisUtils.createMap("964718e320ea4fc4abcc73ada068d015","map").then(function(response){
     //update the app 

   var map = response.map;
     
   //Use the ImageParameters to set the invisible layers in the map service during ArcGISDynamicMapServiceLayer construction.
   var imageParameters = new ImageParameters();
   imageParameters.layerIds = [0,1,2];
   imageParameters.layerOption = ImageParameters.LAYER_OPTION_HIDE;
   //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
     
   //Takes a URL to a non cached map service.
   var dynamicMapServiceLayer1 = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/ArcGIS/rest/services/RIDGERadar/MapServer", {
      "opacity" : 0.5,"imageParameters":imageParameters});
   
   //Takes a URL to a non cached map service.
   var dynamicMapServiceLayer2 = new ArcGISDynamicMapServiceLayer("http://gisdev.srh.noaa.gov/arcgis/rest/services/GSP/gffg/MapServer", {
      "opacity" : 0.5,"imageParameters":imageParameters});
   
   map.addLayer(dynamicMapServiceLayer1);
   layers.push(dynamicMapServiceLayer1);
   map.addLayer(dynamicMapServiceLayer2);
   layers.push(dynamicMapServiceLayer2);
    
   on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);
   on(dom.byId("layer2CheckBox"), "change", updateLayerVisibility);
       
     // var csv = new CSVLayer("./data/180query.csv");
     // var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
     // var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
     // var renderer = new SimpleRenderer(marker);
     // csv.setRenderer(renderer);
     // var template = new InfoTemplate("${lid}", "${name}");
     // csv.setInfoTemplate(template);

     // map.addLayer(csv);

     
   //Sets up the ability for dynamicMapServiceLayers to be toggled.
   console.log(layers)
   function updateLayerVisibility() {
    var lc = 0;
    var li = 0;
    var inputs = dojo.query(".list_item"), input;
    visible = [];
    for (var i=0, il=inputs.length; i<il; i++) {
     if(i>=li+layers[lc].layerInfos.length) {
      lc++;
      li=i;
     }
     if (inputs[i].checked) {
      visible[lc].push(inputs[i].id-li);
     }
    }
    for (var t=0, tl=layers.length; t<tl; t++) 
     layers[t].setVisibleLayers(visible[t]);}

   });

   });

    });
  </script>

Outcomes