[Chameleon] MapSize widget modification

[Jason Fournier]

Dejan,

You could use a combination of the MapSize widget and the Link widget to achieve the desired effect.

1) Include the MapSize widget in your template somewhere but set its visibility to false eg:

<cwc2 type="MapSize" visible="false" styleresource="TextButton" popupstyleresource="TextButton" Embedded="true" PopupWidth="480" PopupHeight="240" Toolbar="false" Status="false" Menubar="false" Image="icons/icon_mapsize.png" ImageTip="Set Map Size" Label="Map Size">
  <mapsize label="Small" width="400" height="300"/>
  <mapsize label="Medium" width="600" height="450"/>
  <mapsize label="Large" width="800" height="600"/>
  <mapsize label="Custom ..." width="custom" height="custom"/>
  <image state="normal"/>
  <image state="selected"/>
  <image state="hover"/>
</cwc2>

Make sure it's in the <form>

2) Add the three link widgets which will represent the sizes of the maps you wish to offer eg:

<cwc2 type="Link" linktype="javascript" jsfunction="myMapSize" jsParams="440,330" styleresource="MapSizeButton" image="images/ms_small.png" imagewidth="12" imageheight="20" ImageTip="" toolset="mapsize" default="true">
                      <image state="normal"/>
                      <image state="hover"/>
                      <image state="selected"/>
                      </cwc2></td>
                      <td><cwc2 type="Link" linktype="javascript" jsfunction="myMapSize" jsParams="600,450" styleresource="MapSizeButton" image="images/ms_medium.png" imagewidth="16" imageheight="20" ImageTip="" toolset="mapsize">
                          <image state="normal"/>
                          <image state="hover"/>
                          <image state="selected"/>
                      </cwc2></td>
                      <td><cwc2 type="Link" linktype="javascript" jsfunction="myMapSize" jsParams="800,600" styleresource="MapSizeButton" image="images/ms_large.png" imagewidth="20" imageheight="20" ImageTip="" toolset="mapsize">
                          <image state="normal"/>
                          <image state="hover"/>
                          <image state="selected"/>
                      </cwc2>

There are a couple of things to note with these link widgets.  First, the jsfunction is called myMapSize.  This is the function that will get called when the link widget is clicked.  Secondly, the jsParams are the size you wish to set the map when this particular link widget is clicked.  As usual, use an appropriate style resource for the widgets.  In this case, we created square images of varying size to depict the mapsize.

3) Create the js callback:

function myMapSize()
{
  var vals = arguments[1].split( ',' );
  var aSize = getMapSize();
  if( aSize[0] != vals[0] || aSize[1] != vals[1] )
      applyMapSize( vals[0], vals[1] );
  return true;
}

This function includes functionality supplied by the MapSize widget (which is why we included it in the template).

That should do it.  If there are problems let us know.

Best Regards,
Jason



Gambin Dejan wrote:
> Hi,
> 
> I would like to modify MapSize widget in order to change the map size as
> I click on a button. I just want to have 3 different buttons with 3
> different map sizes assigned.
> 
> I have successfully simplified the widget (created a new one) so that it
> changes the size on button click, but how to add the other 2 buttons?
> What is the most simple way of doing this? I am not an experienced
> Chameleon developer...
> 
> I have tried to create the second similar widget with different
> width/height giving him different width/height attributes but this new
> button doesn't react, maybe it has something to do with widget
> priority...
> 
> Anyway, any help/suggestion is welcome
> 
> regards, dejan
> 
> _______________________________________________
> Chameleon mailing list
> Chameleon at lists.maptools.org
> http://lists.maptools.org/mailman/listinfo/chameleon
> 
> 

-- 
________________________
Jason Fournier

DM Solutions Group Inc.
jfournier at dmsolutions.ca
www.dmsolutions.ca
613.565.5056 x18