[Chameleon] Chameleon 2.6 RC1 Broken Update Map in JSAPI

Normand Savard nsavard at mapgears.com
Wed Sep 26 12:21:08 EDT 2007


Nolte, Tim wrote:

>Ok, I'm not really getting anywhere on this Update Map button issue. I'm
>including all of my legend code in hopes that someone can help me find
>where the problem is.
>
>
>
>
>Perhaps someone can clue me in to where I need to make the change.
>Actually, what would be most helpful is a good explanation for the
>changes that need to be made not just a "insert here" or "change to
>this" sort of response. Thanks in advance!
>
>  
>
Tim,

This is the solution to your problem and an explanation on why you have 
to apply this.  I hope that helps.

Norm


First you have to know that onclick event of the group and layer is set 
in the jsCheckbox class (jsCheckbox.js).  This is why eventhough we set 
an onclick function call (ChangeLayerStatus()) for the checkbox at the 
layer level in legend_template.html it has no effect.  It is overwritten 
when this class is instanciated.  To make our function being called when 
a user clicks the checkbox (group or layer) we need to set the onclick 
function call after the jsCheckbox class has been instanciated.  So the 
legend template at the group level will look like this:

    <script language="JavaScript" type="text/javascript">
        oGroup.img = CWCDHTML_GetImage( "img_[leg_group_name]");
        oGroup.szExpandImgSrc = "images/expand.png";
        oGroup.szCollapseImgSrc = "images/collapse.png";
       
        oGroupCB = new 
jsCheckbox(CWCDHTML_GetImage("cbg_[leg_group_name]"));
        oGroupCB.szOnImgSrc = "images/checkbox_0.png";
        oGroupCB.szOffImgSrc = "images/checkbox_1.png";
        oGroupCB.szPartialImgSrc = "images/checkbox_2.png";
                oGroupCB.obj.onclick = ChangeLayerStatus;         <<<<<<<<
                oGroupCB.checkState();          <<<<<<<<<<<
        goCheckboxManager.addChild( oGroupCB );
    </script>


and at the layer level:

        <script language="JavaScript" type="text/javascript">
            oLayerCB = new jsCheckbox( 
document.getElementById('cbl_[leg_layer_name]' ));
                oLayerCB.obj.onclick = ChangeLayerStatus;          <<<<<<<
                oLayerCB.checkState();        <<<<<<<<<<<<
            oGroupCB.addChild( oLayerCB );
        </script>


The checkState() function call was added to correct an issue when the 
application was first loaded.  The layers state in the checkbox 
architecture (jsCheckbox.js) was set to true by default and was not 
corresponding to the layer status in the map file.

The ChangeLayerStatus function does two things.  It sets the layer 
status in the map file and sets the checkbox state in the checkbox 
architecture so the checkbox will be correctly displayed.  There are two 
cases that we need to take care:  when a user clicks a checkbox at the 
group level and when a user clicks a checkbox at the layer level.  A 
click at the group level will set all the layers "ON" if there are some 
layers "ON" and some "OFF.  It will set all layers "OFF" if all layers 
are "ON".  A click at the layer level will toggle the layer status.  The 
ChangeLayerStatus function looks like the following:

function ChangeLayerStatus(e)
{
      //alert('ChangeLayerStatus');

    if(typeof goCWCJSAPI == "undefined")
    {
        return false;
    }

    bLayersOn = true;
    oCheckboxGroup = e.target.cb;
    if (oCheckboxGroup.children.length > 0)
    {
        for(var i=0; i<oCheckboxGroup.children.length;i++)
        {
            szLayerName = oCheckboxGroup.children[i].obj.value;
            //alert(szLayerName);

           
            szStatus = 
goCWCJSAPI.oMap.GetLayerByName(szLayerName).GetStatus();
            //alert('status='+szStatus);

            if(szStatus == "OFF")
            {
                bLayersOn = false;
                break;
            }

        }//End first for with i index

        if(bLayersOn)
        {
            szStatus = "OFF";
        }
        else
        {
            szStatus = "ON";
        }

        for(var i=0; i<oCheckboxGroup.children.length;i++)
        {
            szLayerName = oCheckboxGroup.children[i].obj.value;
            goCWCJSAPI.oMap.GetLayerByName(szLayerName).SetStatus(szStatus);
        }

    }//End first if
    else  //This is a layer only
    {
        szLayerName = e.target.value;
        //alert(szLayerName);

           
        szStatus = goCWCJSAPI.oMap.GetLayerByName(szLayerName).GetStatus();
        //alert('status='+szStatus);

        if(szStatus == "ON")
        {
            szStatus = "OFF";
        }
        else
        {
            szStatus = "ON";
        }

        goCWCJSAPI.oMap.GetLayerByName(szLayerName).SetStatus(szStatus);


        //szStatus = 
goCWCJSAPI.oMap.GetLayerByName(szLayerName).GetStatus();
        //alert('status='+szStatus);

    }
    jsCheckbox_onClick(e);
}

To make the on/off control feature work you need a  new function that 
will be called in the application template.  This function is saved in 
sample.js.  This function call is set like this:

    <span class="generalLabel">Turn all Layers: </span><a
href="javascript:void(0)" onClick="ChangeAllLayersStatus(event, true); 
return false;"><span class="generalLabel">on</span></a>
        <span class="generalLabel"> |</span>
    <a href="javascript:void(0)" onClick="ChangeAllLayersStatus(event, 
false); return false;"><span class="generalLabel">off</span></a>


This function definition is like this:

function ChangeAllLayersStatus(e, nState)
{
//    alert('ChangeAllLayersStatus');

    if(typeof goCWCJSAPI == "undefined")
    {
        return false;
    }

    oCheckboxRoot = e.view.goCheckboxManager;

    if (oCheckboxRoot.children.length > 0)
    {
        for(var i=0; i<oCheckboxRoot.children.length;i++)
        {
            if (oCheckboxRoot.children[i].children.length > 0)
            {
                for(var j=0; 
j<oCheckboxRoot.children[i].children.length;j++)
                {
                    szLayerName = 
oCheckboxRoot.children[i].children[j].obj.value;
                    //alert(szLayerName);
                   
                     szStatus = 
goCWCJSAPI.oMap.GetLayerByName(szLayerName).GetStatus();
                    //alert('status='+szStatus);
                    if(nState == true)
                    {
                        szNewStatus = "ON";
                    }
                    else if(nState == false)
                    {
                        szNewStatus = "OFF";
                    }

                    if(szStatus != szNewStatus)
                    {
                        szStatus = szNewStatus;
                    }

                    
goCWCJSAPI.oMap.GetLayerByName(szLayerName).SetStatus(szStatus);


                    //szStatus = 
goCWCJSAPI.oMap.GetLayerByName(szLayerName).GetStatus();
                    //alert('status='+szStatus);


                }//End second for with j index
            }//End second if
        }//End first for with i index
    }//End first if

    goCheckboxManager.set( nState );

}






More information about the Chameleon mailing list