Sean Askay - kml - Improving the JGI Chimp Blog

Making the Jane Goodall Institute's "Chimp Blog" more accessible

I liked the website-style navigation approach on the Jane Goodall Institute's (JGI) Chimp Blog. Navigation and feature-control from right inside the placemark descriptions is a key concept to improving Google Earth's usability with complex data layers.

Unfortunately, once you have clicked on one of the layers in the balloon's left-hand table/menu, you can't turn it back off with the same link. And, if you click the same link again, GE asks you if you want to reload the file.

This is confusing and distracting for users. Knowing there was a better way, I developed a technique to add mock checkboxes to the "Chimp Bios" placemarks. These allow you to turn on and off the related layers without ever touching the "My Places" sidebar.

As I suggested some time back, I think that Google Earth needs an internal URI to allow links in placemark descriptions to manipulate related layers and features. Such functionality would allow for the customization of layer navigation, and greatly improve usability for complex KML.

After the release of KML 2.1, it occurred to that using custom <Schemas>, <BalloonStyle> + <text> and <NetworkLinkControls>, simple URI functionality could be emulated.

My Solution:

The "Chimp Bios" () ballon descriptions have a mock checkbox next to each feature item. By clicking on the checkbox, or the feature's text link, you can turn on and off that feature without interacting with the "My Places" folder tree. The "My Places" folder tree has also been vastly simplified into "On" and "Off" folders (some of which can be expanded).

note: I have only tested this on WinXP with the newest GE beta 4.x, in which case GE transparently loads a <NetworkLink> file from our server when clicking on the "checkbox" or text link. On my test system, the GE web browser pane does not open, nor are you prompted with a window to open the kml file. This might be different on other systems, and would affect the smooth and transparent operation of this idea...

Try it out:

Improved JGI interface

How it's done:

Create a Custom Schema

A custom <Schema> is created to add 'menu status' tags to <Placemarker>. These will determine whether the 'on' or 'off' checkbox image is displayed, and which script is called when clicked. Stores a string, either 'on' or 'off'.

Custom <Schema> example


<Schema parent="Placemark" name="JGI_Placemark">
   <SimpleField type="wstring" name="status_archives">
   </SimpleField>
   <SimpleField type="wstring" name="status_chimp_bios">
   </SimpleField>
</Schema>

Create a Balloon Style

Next, in <BalloonStyle>, we create a link to an image of a selected, or unselected HTML checkbox
( ) - checkbox_ON.gif & checkbox_OFF.gif.
When referencing the image, the ON/OFF part of the file name is provided by:
<text> <img src="checkbox_$[<<menu_status_tag_name>>].gif</text>
The technique is also used to create a changeable link to KML on a server:
<a href="www.domain.com/kml_script_turn_$[<<menu_status_tag_name>>].kml">text link or image</a>
Thus, when a particular menu item's status is 'ON' the fake checkbox gif looks checked, and when you click on it, it call a specific KML file on the server that will turn that feature off, and change the "checkbox" to 'OFF'.

Custom <BalloonStyle> example


<BalloonStyle>
   <color>ff669999</color>
   <text> 
      //Using un-encoded < , >, " here, but for the actual KML, you have to replace with HTML-safe equivalents: &lt; &gt;&quot;
      <a href="http://newdms.jamesreserve.edu/kml2_1/scripts/JGI_menu_archives_were_$[status_archives].kml">
         <img src="http://newdms.jamesreserve.edu/kml2_1/scripts/checkbox_$[status_archives].gif">
      </a>
      <a href="http://newdms.jamesreserve.edu/kml2_1/images/JGI_menu_chimp_bios_were_$[status_chimp_bios].kml">
         <img src="http://newdms.jamesreserve.edu/kml2_1/images/checkbox_$[status_chimp_bios].gif">
      </a>
   </text>
</BalloonStyle>

Create NetworkLink and NetworkLinkControl to enact the changes

The image and text link call a KML file on the server. This is a <NetworkLink> which, in turn, loads a <NetworkLinkControl> KML file.
The NetworkLinkControl file instructs GE to change the <visibility> on the corresponding feature (don't forget to use ids on the items you need changed!). It also changes the <menu_item_status> to 'OFF' on all the placemarks with the menu.

But there are a few more things to consider:

As all newly loaded KML files are shown in the 'Temporary Items' folder in 'My Places', without cleanup, the user would get a new entry every time they click on the menu checkbox.
Also, as soon as the user turns a feature ON (script A), then OFF (script B), and ON (script A) again, we would be reloading the same file from the server, and would get a message asking them if they want to reload the file (same problem as the original JGI layer!)
To remedy both these problem, I've also added <Delete> commands to the <NetworkLinkControl> to do some cleanup. It removes any <NetworkLinkControls> that may have come before it. These are always named "(ignore me) XXXX layer - turned ON/OFF", and you will see a new one loaded each time you click a checkbox (and any previous ones removed).

<NetworkLink> example

//NetworkLink loaded by clicking on the fake checkbox

<NetworkLink id="JGI_nwl_archives_on">
   <name>(ignore) archives - 'off'</name>
   
   <!-- The user wants to turn the archives to off, so run a <NetworkControlLink> that will <Update> the kml -->
   <Link>
      <href>http://newdms.jamesreserve.edu/kml2_1/scripts/JGI_menu_update_archives_were_on.kml</href>
   </Link>
</NetworkLink>

<NetworkLinkControl> example

//NetworkLinkControl loaded by clicking on the fake checkbox

 <NetworkLinkControl>    
 <!-- Since the user wants to turn off the archives layer-->
 <!-- ...set the custom schema tag 'status_archives' to off for each menu-ized placemarks  -->
   <Update> 
     <targetHref>http://newdms.jamesreserve.edu/kml2_1/JGI.kmz</targetHref> 
     <Change>
        <JGI_Placemark targetId="JGI_pl_id_chimp_bios_Sandi">
   <status_archives>off</status_archives>
        </JGI_Placemark>
        <JGI_Placemark targetId="JGI_pl_id_chimp_bios_Gaia">
   <status_archives>off</status_archives>
        </JGI_Placemark>

<!-- REPEAT for each of the Chimp Bios placemarkers-->

    </Change> 
      </Update>
      

<!-- Since we are turning archives off, delete the old 'on' NetworkLink in the Temporary Places-->
    <Update> 
        <targetHref>http://newdms.jamesreserve.edu/kml2_1/scripts/JGI_menu_archives_were_off.kml</targetHref> 
        <Delete>
          <NetworkLink targetId="JGI_nwl_archives_off" />
        </Delete>
   </Update>
    
<!-- and delete any other old the old 'on/off' NetworkLinks in the Temporary Places -->
   <targetHref>http://newdms.jamesreserve.edu/kml2_1/scripts/JGI_menu_chimp_bios_were_on.kml</targetHref> 
      <Delete>
         <NetworkLink targetId="JGI_nwl_chimp_bios_on" />
      </Delete>
   </Update> 
   <Update> 
   <targetHref>http://newdms.jamesreserve.edu/kml2_1/scripts/JGI_menu_chimp_bios_were_off.kml</targetHref> 
      <Delete>
         <NetworkLink targetId="JGI_nwl_chimp_bios_off" />
      </Delete>
   </Update>

<!--this will be explained in the next section of the tutorial. It deals with the Radion Folders in My Places-->

<!-- Now lets turn on the appropriate radio button folder in the Place side bar -->
    <Update> 
        <targetHref>http://newdms.jamesreserve.edu/kml2_1/JGI.kmz</targetHref> 
        <Change>
         <Folder targetId="JGI_radio_folder_archives_on">
            <visibility>0</visibility>
         </Folder>
        </Change>
   </Update>
   <Update> 
        <targetHref>http://newdms.jamesreserve.edu/kml2_1/JGI.kmz</targetHref> 
        <Change>
         <Folder targetId="JGI_radio_folder_archives_off">
            <visibility>1</visibility>
         </Folder>
        </Change>
   </Update>
        
    </NetworkLinkControl>
</kml>

There is one final problem:

If a user were to turn ON a layer from the placemark's fake checkbox, and turn it off from the 'My Places' sidebar, the cycle would be broken, and the checkboxes displaying the wrong status.

The solution I came up with was to employ the new "Radio Folder" <ListStyle>.

Two folders, 'ON' and 'OFF' are created under a regular folder, given the name of the feature.
The actual feature/layer KML to be controlled is inside the 'ON' radio folder, along with a <NetworkLink> to another set of <NetworkLinkControls> files on the server. These new NetworkControlLinks will change <XXX_status> in all the placemarks to on or off to make sure the checkboxes in the balloons and the folders in My Places are in sync.
Similarly there is an 'OFF' radio button sub-folder for each feature, containing the opposite reacting <NetworkLinkControl> file.

<NetworkLinkControl> for inclusion in the Radio Folders


<NetworkLink id="JGI_nwl_archives_off">
   <name>(radio) archives - 'on'</name>
   
   <!-- The user wants to turn the archives to on, so run a <NetworkControlLink> that will <Update> the kml -->
   <Link>
      <ref>http://newdms.jamesreserve.edu/kml2_1/scripts/radio/JGI_radio_update_archives_turn_on.kml</ref>
   </Link>
</NetworkLink>

<NetworkLinkControl> 
<!-- Since the user wants to turn on the archives layer, set the custom 
  schema tag 'status_archives' to on for each menu-i zed placemark's -->

  <Update> 
     <targetHref>http://newdms.jamesreserve.edu/kml2_1/JGI.kmz</targetHref> 
        <Change>
         <JGI_Placemark targetId="JGI_pl_id_chimp_bios_Gaia">
         <status_archives>on</status_archives>
         </JGI_Placemark>
         <JGI_Placemark targetId="JGI_pl_id_chimp_bios_Gaia">
         <status_archives>on</status_archives>
     //...
      </Change> 
   </Update> 
</NetworkLinkControl>

Summary and potential applications:

This same technique could be used for a number of other features:

Increasing/decreasing font size, or background colors for placemarker descriptions,
Offering the user "Jump to the Next..." links where they could follow a pre-chosen route between placemark's
Simplifying large and complex KML layers by "Hiding Folder Children" in 'My Places' and offering targeted controls in specific placemarkers.

Shortcomings:

This system fails without a live network connection. It may be possible to make the feature checkbox and text hyperlinks in the Balloon descriptions link to files kept inside a master KMZ file. This way the NetworkLinkControls files can be loaded locally, just how you can load an image (<img src="name.kmz/files/image.jpg" />) from inside a KMZ. Unfortunately, my testing of this concept has failed, as all hyperlinks in balloon descriptions appear to be loaded directly in the web browser window pane, instead of from a local KMZ.

There might be a way "disable" the checkboxes if a live internet connection isn't available. Perhaps another custom KML tag could hold an "image width" value. When first loading the source KMZ, the image would start out at dimensions of 1-by-1 pixel, hiding it from view. Another NetworkLink inside the KMZ would try to access the internet, and if successful, load a NetworkLinkControl that would change the "image width" to the full size of the checkbox, thus making it visible and accessible.

kml >> Improving the JGI Chimp Blog