topic Re: Trying To Set Visible Layers By Check Boxes in ArcGIS JavaScript Maps SDK Questions

Trying To Set Visible Layers By Check Boxes

CharlesGant — Sat, 17 May 2014 20:34:32 GMT

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.checked) {
      visible[lc].push(inputs.id-li);
     }
    }
    for (var t=0, tl=layers.length; t<tl; t++) 
     layers.setVisibleLayers(visible);}

   });

   });

    });
  </script>

Re: Trying To Set Visible Layers By Check Boxes

CharlesGant — Sun, 18 May 2014 19:00:51 GMT

After nearly another twelve hours of code combinations, nothing. My project currently entails only two map services with only one layer in each, however that might not always be the case. Thus, I would like to build one updateLayerVisibility () function to do it all. Can anyone help? Thanks!!!

Re: Trying To Set Visible Layers By Check Boxes

CharlesGant — Sun, 18 May 2014 19:57:34 GMT

Re: Trying To Set Visible Layers By Check Boxes

LoriGonzalez — Tue, 20 May 2014 11:52:26 GMT

How are your checkboxes setup? Can you post the HTML?

Also, have you tried using the TOC control. I think it has all the functionality you are looking for.
http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

Re: Trying To Set Visible Layers By Check Boxes

JordanPorter — Tue, 20 May 2014 12:34:39 GMT

This is how i did it

[PHP]

//Layers, these will be referenced later by their "id"

var A = new FeatureLayer("http://maphics:6080/arcgis/rest/services/Transportation/MapServer/4", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            infoTemplate: TrafficTemplate,
            outFields: ["Name1", "AADT2011"],
            id: "Layer1",
            opacity: 0
        });
        l
var B = new FeatureLayer("http://maphics:6080/arcgis/rest/services/Transportation/MapServer/6", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            infoTemplate: TrafficTemplate,
            outFields: ["Name1", "AADT2011"],
            id: "Layer2",
            opacity: 0

//create a checkbox for each layer (referencing their IDs), that when pressed will toggle show/hide

arrayUtils.forEach(["Layer1", "Layer2"], function(id){
            new CheckBox({
                id: "cb_" + id,
                name: "cb_" + id,
                checked: false,
                onChange: function(bool){
                    bool ? map.getLayer(this.id.split("_")[1]).show() : map.getLayer(this.id.split("_")[1]).hide();

                }
            }, domConstruct.create("input", {
                id: "lyr_" + id
            })).placeAt(dom.byId("layerToggle"));

            // create a label for the check box
            var label = domConstruct.create('label', {
                "for": "cb_" + id,
                "id": "lbl_" + id,
                "innerHTML": id
            });

            domConstruct.place(label, dom.byId("layerToggle"));
            domConstruct.place(domConstruct.create("br"), dom.byId("layerToggle"));


        });[/PHP]

Re: Trying To Set Visible Layers By Check Boxes

CharlesGant — Wed, 21 May 2014 18:42:19 GMT

How are your checkboxes setup? Can you post the HTML?

Also, have you tried using the TOC control. I think it has all the functionality you are looking for.
http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

I will look into the TOC widget and see if I can get that working the way I desire. If not, I'll be back. LOL. Then will attach my code. Thanks!