A while back, I was given a challenge to integrate a dynamic JavaScript-based legend into Chameleon 1.1.  The following information is my take on creating a Widget for use in a MapServer / Chameleon 1.1 implementation.  If you are not sure what Chameleon and MapServer are, then the following info may be of little use to you.  To learn about these online mapping tools, you can find more at the DM Solutions – MapTools website.

First, the disclaimer stuff: I am not a PHP / MapScript guru and learned much of the skills used in developing this Widget by reviewing and understanding code written by DM Solutions.  DM Solutions developed Chameleon as a interface to MapServer.  DJAJSLegend Widget is provided “as is” and I offer no warranties or guarantees that will work in your environment yada yada yada.  The code was developed and tested on IE 6, IIS 5.x running on both Win 2000 and XP machines.


The provided code is open source and contains copyrighted components (as described in the code) by other authors as well.  Translation – I was not the original creator of the JavaScript Tree Legend code. My role was to take the Tree Legend, make it “callable” from within a Widget and allow for some of its properties to be controlled more easily by users of Chameleon.

Now on to the nitty-gritty. The purpose of this Widget is to allow a user to create a tree-like legend.  It is flexible and can be modified using a variety of different parameters in the Widget call. A sample call is here:

<CWC2 TYPE="DJAJSLegend" TREESOURCE="treelegend/tree/tree.js" MENUSRC="treelegend/zenondemo.js" TREECSS="treelegend/tree/tree.css" OPENNODES="[1,4,16]"AUTOSUBMIT="0" LEGENDSTYLE="4" />

TREESOURCE – optional – if specified, you can provide the virtual reference to the file tree.js. If not specified, the default location is used.

MENUSRC – optional – if specified, you can provide the virtual reference to the file zenondemo.js This file contains an array that is used to construct the tree and parent/child nodes. Please read the notes in the file for details on features that can be added / removed.

TREECSS – optoinal – allows you to specify the location of the style sheet file. The CS Stylesheet used to change the look of the tree.

OPENNODES – optoional (recommended) – user can specify which parent nodes are to be open by default. You must use the [] brackets. If none, do not incude the option.

AUTOSUBMIT – optional – set this value to 1 of you want to map to turn on/off layers when any layer checkbox is clicked. default is 0.

LEGENDSTYLE – user can change the graphic icons used in the display of the legend. There are 3 choices. If you want to add more, see tree.js.

For those that are optional, if you want to use the defaults, do not even include the item in the widget call

For a basic Widget call, you would use the following:


Feel free to download the source and try it out yourself. I ask only that you participate in the same public license practises that others do by keeping the original copyright information intact.  If you mofify, fix, update, change any part of this code, please pass it back to me. 🙂 .


:: Chameleon 1.1
:: MapServer 4.0/4.1
:: Browsers:
NS 6+ *
IE 5.x+ *
Mozilla *
(* limited testing)

Rate This Post: 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)