Toggling layers with arcgis javascript api 3.5

Question

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?

• greenlaw: Just before calling .show() or .hide(), try inspecting the layer objects themselves by calling console.log(hospital2010kml); -- the object will show up in the developer console and you can inspect its properties/methods etc. If it's a valid KMLLayer object, it should have show/hide methods, as you said.
• Xaxum: @greenlaw thanks for the tip. So apparently there is something wrong with it because it just comes back as [object HTMLInputElement]. On my 2.6 API version it shows up fine. So something up with 3.5 that doesn't like me code. Hmmmm

Answer 1

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.