KMZ/KML File with Folders - View & Select in Layer Manager

[DanReavey]

I would like to add an EPA kmz file to a map found here. I have extracted the kml file which has data arranged in subfolders (facilities arranged by state). I would like to display the folder tree in a layer manager panel so that the user can select which data to view similarly to arcGIS Explorer. I have search the samples and did not find an example and didn't find a topic in the forum. Can I point directly to kmz file? If not, using the kml file isn't a problem. Can someone direct me to an appropriate example of creating a layer manager to view/select the feature layer? Additionally, are shapefiles supported in the javascript api?

Thank you.

EDIT: It looks like I should use the dijit.layout.AccordionContainer as in the legend example.

[DanReavey]

Do the Legend and Table of Content (agsjs.dijit.TOC) only work with layers from a REST service?

As in these examples:
TOC
Legend

This is the Google API reference to kmltree: link

[DanReavey]

In the API, kmlLayer is a supported layer type for the legend. It looks like I need to use esri.layers.KMLFolder to read the file contents and load into the legend pane. I believe I would have to replace the layerInfo variable in the legend example with something that uses the KMLFolder class. Can someone suggest a method of adapting the legend to achieve this? I am sure my usage of esri.layers.KMLFolder is completely wrong.

// 
var contents = esri.layers.KMLFolder("${description}",featureInfos{"type":0};

dojo.connect(acres_kml,'onLoad',function() {
 var layers = acres_kml.getFeature(Folder);
 var legendDijit = new esri.dijit.Legend({map:map,layerInfos:layers},"legendDiv");
 legendDijit.startup();
} 

[DanReavey]

I have been able to get the placemark names to appear using an old example from version 2.7:

  function showContent(kml) {
    // get layers
    var lyrs = kml.getLayers();
    var placemarks = dojo.filter(lyrs, function(lyr) {
      if ( lyr.geometryType == "esriGeometryPoint" ) {
        return lyr;
      }
    })[0];
    console.log('placemarks: ', placemarks);
    dojo.byId("info").innerHTML = "";
    dojo.forEach(placemarks.graphics, function(g) {
      var node = dojo.create('div', {
     id: g.attributes.id,
            innerHTML: g.attributes.name
      }, dojo.byId("info"));
    });
  }

Can someone show me the equivalent in version 3.3/3.4?

[DanReavey · Accepted solution]

Never mind, I found it.

   function showContent(kml) {   var tfeatureInfos = kml.folders[0].featureInfos;   dojo.forEach(tfeatureInfos,function(info){      var tfeature = kml.getFeature(info);      var tName = tfeature.name;      var tDescription = tfeature.description;    var node = dojo.create('div', {            innerHTML: tName + '<p>' + tDescription + '</p>'         }, dojo.byId("contents"));      });           var featureInfos = kml.folders[1].featureInfos;   dojo.forEach(featureInfos,function(info){            var feature = kml.getFeature(info);    var Name = feature.name;    var Description = feature.description;            var checkBox = new dijit.form.CheckBox({               name: "checkBox",               value: feature.id,              checked: false,               onChange: function(evt) {                if (this.checked==false) {       kml.setFolderVisibility(feature,false);      }      else {       kml.setFolderVisibility(feature,true);      }               }            });              //add the check box and label to the toc            dojo.place(checkBox.domNode,dojo.byId("layers"),"before");            var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:'  ' + Name},checkBox.domNode,"after");              dojo.place("<br />",checkLabel,"after");      });    }