KML DOM Walking is SLOW! How To Avoid Walking Children?

I have been having some problems with performance related to navigating a KML DOM that I get from a KMZ file on a web server (using fetchKml). I am using the gex.dom.walk approach described and discussed here:

https://developers.google.com/earth/articles/domtraversal
http://code.google.com/p/earth-api-utility-library/wiki/GEarthExtensionsDomReference

Essentially, I am just trying to turn on/off visibility of folders when a folder name matches some criteria from a GUI click event. As I said, this works but performance is not great. It maybe takes 30 - 60 seconds for the visibility settings to be updated in the application. I read in the links above that you can turn off the walking of children nodes and I have attempted to do this with the object literal approach below. The code that I have included doesn't produce any javascript errors but it doesn't improve performance. I'm not sure if I am creating the object literal correctly and setting the walk children property properly. Any advice? A good example of turning off the walk children property with the use of gex.dom.walk would be very helpful. I couldn't find an example online.

These folders have a number of placemarks in them (100s) and I have 25 folders. So, I would like to avoid walking them and suspect this is at least part of the culprit for the performance issues. The KMZ file is about 250 Kb and the KML inside is about 7.5 Mb. This file will grow over time somewhat, as well.

I have also read about Gzip compression and will have to do a bit more research on that. I suspect that might help, too.

Thanks for any direct response or related tips!

function visibilityKml(context) {

    //this is called by click events on the GUI
    //if a menu item click, traverse the KML DOM to process the visibility request
    //
    //
    var gex = new GEarthExtensions(ge);
    var walkStatus = {
        walkChildren : true
    };
    gex.dom.walk({
        rootObject: ge,
        visitCallback: function(walkStatus) {
            // 'this' is the current DOM node being visited.
            if ('getType' in this && this.getType() == 'KmlFolder') {
                  if ( context.match("AXYZ") && this.getName().match("AXYZ") && this.getVisibility() == false) {
                    this.setVisibility(true);
                  }
                  else if ( context.match("AXYZ") && this.getName().match("BXYZ") && this.getVisibility() == true) {
                    this.setVisibility(false);
                  }
                  else if ( context.match("BXYZ") && this.getName().match("BXYZ") && this.getVisibility() == false) {
                    this.setVisibility(true);
                  }
                  else if ( context.match("BXYZ") && this.getName().match("AXYZ") && this.getVisibility() == true) {
                    this.setVisibility(false);
                  }
                  else if ( context.match("All XYZ") && this.getName().match("XYZ") && this.getVisibility() == false) {
                    this.setVisibility(true);
                  }
                  if ( this.getName().match("XYZ") ) {
                    this.walkChildren = false;
                  }
            }
        } 
    });
}

Solution

First: In your KML file, you need to edit these lines

OLD

<Folder>
      <name>Name of Folder</name>
      <Placemark>
      ..........
      </Placemark>
 </Folder>

NEW

<Folder id="unique_id">
      <name>Name of Folder</name>
      <Placemark>
      ..........
      </Placemark>
 </Folder>

Second: When you wish to toggle the visibility of this folder, use the Accessors

Depending on how you load your KML (eg fetch,parse,networklink) you use a different Accessor. I am going to presume you are using fetchKml() so I suggest you look into using getElementByUrl()

So, you end up doing something like this: (you need the # symbol)

var url = 'http://www.domain.com/yourFile.kml';
var folder = ge.getElementByUrl(url + '#' + 'unique_id');
folder.setVisibility(true|false);

Hope that helps!