[GIS] Toggling layers with arcgis javascript api 3.5

arcgis-javascript-api

I am using the two reference samples in the api, toggle and dynamic toggle. I tried to use the method in the basic toggle but the setvisbiblelayers doesn't seem to like my kml layers and I get a javascript error 

Object #<HTMLInputElement> has no method 'setVisibleLayers'

Here is where I add my basemap and kml layers.

            dojo.require("esri.map");
            dojo.require("esri.layers.KMLLayer");

            var layer, map, visible = [];

            function init() {
              var beginExt = new esri.geometry.Extent(-81.26, 40.64, -74.10, 42.29, new esri.SpatialReference({wkid:4326}));
              var revExt = esri.geometry.geographicToWebMercator(beginExt);
              var imageParameters = new esri.layers.ImageParameters();
              imageParameters.layerIds = ['base'];
              imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;

              map = new esri.Map("map",{
                basemap:"topo",
                extent:revExt,
                sliderStyle:"small"
              });


              var kml10url = "https://dl.dropboxusercontent.com/...kmz file";
              var hospital2010kml = new esri.layers.KMLLayer(kml10url, {id:"hospital2010kml"});
              var kml00url = "https://dl.dropboxusercontent.com/...kmz file";
              var hospital2000kml = new esri.layers.KMLLayer(kml00url, {id:"hospital2000kml"});
              map.addLayer(hospital2010kml);
              map.addLayer(hospital2000kml);

This works fine. I am able to see both of the layers and the basemap. However when I try to toggle between the layers nothing. So I tried this, which used to work in 2.6 but no longer works in 3.5.

  function updateLayerVisibility() {
                var inputs = dojo.query(".list_item"), input;

                for (var i=0, il=inputs.length; i<il; i++) {
                    if (inputs[i].checked) {
                        console.log("Input Length " +inputs.length);
                        console.log("Inputs in checked " +inputs[i]);
                        if('hospital2010kml' === inputs[i].id)
                        {
                            console.log('Showing hospital2010kml visibility');
                            hospital2010kml.show();
                        }
                        else if('hospital2000kml' === inputs[i].id)
                        {
                            console.log('Showing hospital2000kml visibility');
                            hospital2000kml.show();
                        }
                    console.log(inputs[i].id);  
                    }
                    else{
                        console.log("Input Length Hide " +inputs.length);
                        console.log("Inputs in checked Hide " +inputs[i]);
                        if('hospital2010kml' === inputs[i].id)
                        {
                            console.log('Hiding hospital2010kml visibility');
                            hospital2010kml.hide();
                        }
                        else if('hospital2000kml' === inputs[i].id)
                        {
                            console.log('Hiding hospital2000kml visibility');
                            hospital2000kml.hide();
                        }
                    }
                }

This then gives the error:

SCRIPT438: Object doesn't support property or method 'hide'

It gives an error for show as well. Anybody know how to toggle two separate kml layers? The API says there is a show and hide for kmllayers so I don't know what is up?

Best Answer

The issue was I did not have my kml variables defined outside the init function so when it got to the update layers function it didn't know it was a kml layer. For some reason when I logged the id to console it worked but it was just generic object hence the no show hide commands. I added the declaration outside the init as follows:

var layer, map, hospital2000kml, hospital2010kml, visible = [];

Now it is working... Wow I wasted a lot of time on something I should have caught hours ago.

Related Question