Sorry Brent - it's rather busy around here. I'm CC:ing the list on this because I think enyone can benefit from this. I'm just sorry that I haven't had time to package it up better. I fear if I wait to do it right it won't happen, so here it all is :-)
<br><br>Everything is based on Chameleon 2.2. Only REALLY tested in IE6 and Firefox 1.0+<br><br><span style="font-weight: bold; text-decoration: underline;">1.. ScaleZoom Widget for JSAPI mode.</span><br>the one I have built is rather convoluted, and a little bit buggy. If you use it with a fixed size of map, it might work much better. This one works with our dynamic map resize - which is probably part of the problem. I say it has problems, but they are intermittent and < 2% of the time.
<br><br>So not to destroy/harm to the original scale zoom widget in Chameleon, we made our own widget: NLWISZoomBar<br>see attached zip file (<span style="font-weight: bold;">NLWISZoomBar.zip</span>). There are two files, a php widget file and the separate javascript.
Put this in your widgets directiory.<br><br>The following changes to UpdateMap.php will also be required. This is in chameleon/htdocs<br><div><span><font face="Arial" size="2">starting at around 216<br></font></span></div>
<div><span><font face="Arial" size="2">used this
instead... (the COMPASS_POINT section is unchanged but shown so you know where to make changes). This changes was required because the SCALE_ZOOM navigation check was originally happening outside of NAV_CMD check which didn't make sense. This change brings it inside the NAV_CMD check.
<br></font></span></div>
<pre style="font-family: courier new,monospace;"><span>if (substr($HTTP_FORM_VARS["NAV_CMD"], 0, 13) == "COMPASS_POINT")<br> {<br> include("widgets/CompassPoint/CompassPoint.widget.php");
<br> $oWidget = new CompassPoint();<br> $oWidget->InitDefaults();<br> $oWidget->mszDirection = strtoupper(substr( $HTTP_FORM_VARS["NAV_CMD"], 14 ));<br> $oWidget->SetMap($oMapSession);
<br> $oWidget->SetURL($oHttpFormVars, $HTTP_FORM_VARS);<br> $_SESSION["gszCurrentState"] = $oMapSession->saveState();</span></pre>
<pre style="font-family: courier new,monospace;"><span> }</span></pre>
<pre style="font-family: courier new,monospace;"><span> if ($HTTP_FORM_VARS["NAV_CMD"] == "SCALE_ZOOM" &&<br> isset( $HTTP_FORM_VARS["SCALE_ZOOM"]) &&<br> $HTTP_FORM_VARS["SCALE_ZOOM"] != "")
<br> {<br> include("widgets/ScaleZoom/ScaleZoom.widget.php");<br> $oWidget = new ScaleZoom();<br> $oWidget->InitDefaults();<br> $oWidget->SetMap($oMapSession);<br> $oWidget->SetURL($oHttpFormVars, $HTTP_FORM_VARS);
<br> $_SESSION["gszCurrentState"] = $oMapSession->saveState();</span></pre>
<pre style="font-family: courier new,monospace;"><span> }</span></pre>
<pre style="font-family: courier new,monospace;"><span> $szFormContents .= BuildHTMLOutputMapExtentsChanged($oMap);<br>}</span></pre>
Insert the following section around line 756 after saving of context, but <span style="font-weight: bold;">before</span> this line:<br><pre style="font-family: courier new,monospace;"><span>$_SESSION["gszCurrentState"] = $oMapSession->saveState();
</span></pre>
Code to add:<br><span style="font-family: courier new,monospace;">if (isset( $HTTP_FORM_VARS["PROCESS_NLWISZOOMBAR"]) &&
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $HTTP_FORM_VARS["PROCESS_NLWISZOOMBAR"] == "1")
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">{
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> include("widgets/NLWISZoomBar/NLWISZoomBar.widget.php");
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $oWidget = new NLWISZoomBar();
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $oWidget->InitDefaults();
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $oWidget->SetMap($oMapSession);
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $oWidget->SetURL($oHttpFormVars, $HTTP_FORM_VARS);
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $_SESSION["gszCurrentState"] = $oMapSession->saveState();
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $nLevels = $HTTP_FORM_VARS["NLWISZOOMBAR_LEVELS"];
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $oWidget->nMaxWidthFactor = $HTTP_FORM_VARS["NLWISZOOMBAR_MAXWIDTHFACTOR"];
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $nMinScale = $oWidget->getMinScale();
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $nMaxScale = $oWidget->getMaxScale();
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $aScale = $oWidget->getZoomBarLevels($nLevels,$nMinScale,$nMaxScale);
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $szFormContents .= "<input type=\"hidden\" name=\"UPDATE_NLWISZOOMBAR_SCALES".
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> "\" value='".implode(",",$aScale)."'>\n";
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $szFormContents .= "<input type=\"hidden\" name=\"UPDATE_NLWISZOOMBAR_CURRENTSCALE".
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> "\" value='".$oMapSession->oMap->scale."'>\n";
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">}</span><br><br>The widget will recalculate the individual zoom scales based on the changing max and min scales (these depend on the size of the map which is why it's dynamic). The number of ticks is user defined, and uses CSS for styling. - see attached
<span style="font-weight: bold;">zoombar.css</span> for what I use in our app.<br><br>How used in Template:<br><div style="font-family: courier new,monospace;"><font size="2"><cwc2 type="NLWISZoomBar" LEVELS="8"
zoominlabel="Zoom In" zoomoutlabel="Zoom Out" topelement="zoomBar"></cwc2></font></div>
<div> </div> Ok. That's it for the ZooomBar!<br><br>For the Mapsizing... much more complicated, and my javascript is rather integrated against the template and CSS.<br><br>Basically though, I watch for window resize events (registered with JSAPI) and when they happen I change the size of all the other components on the page that matter - map (many layers here are affected), right side button container, left side tabbed pages container.
<br><br>I'll see if I can package it up separately and send it along next... Please don't hesitate to ask questions about what I've already included. I did this quickly and it's possible I missed something.
<br><br>Cheers,<br><br>Liz<br><br><br><br><br><br><br><div><span class="gmail_quote">On 1/30/07, <b class="gmail_sendername">Brent Lund</b> <<a href="mailto:Brent.Lund@state.mn.us" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
Brent.Lund@state.mn.us
</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="blue" lang="EN-US">
<div>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">Hi Liz,</span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">Just checking back with you to see if you
have time available to send the scripts mentioned below.</span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">Thanks,</span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">Brent</span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<div>
<div style="text-align: center;" align="center"><font face="Times New Roman" size="3"><span style="font-size: 12pt;">
<hr align="center" size="2" width="100%">
</span></font></div>
<p><b><font face="Tahoma" size="2"><span style="font-size: 10pt; font-family: Tahoma; font-weight: bold;">From:</span></font></b><font face="Tahoma" size="2"><span style="font-size: 10pt; font-family: Tahoma;"> Liz Godwin [mailto:
<a href="mailto:godwin.liz@gmail.Com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">godwin.liz@gmail.Com</a>]
<br>
<b><span style="font-weight: bold;">Sent:</span></b> Tuesday, January 16, 2007
2:40 PM<br>
<b><span style="font-weight: bold;">To:</span></b> Brent Lund<br>
<b><span style="font-weight: bold;">Subject:</span></b> Re: [Chameleon] jsapi and
scalezoom widget</span></font></p>
</div>
<p><font face="Times New Roman" size="3"><span style="font-size: 12pt;"> </span></font></p>
<p style="margin-bottom: 12pt;"><font face="Times New Roman" size="3"><span style="font-size: 12pt;">Hi Brent,<br>
<br>
I extended the mapsize widget to support JSAPI but also there's some javascript
there. It isn't very graceful. And the code could probably be done
better - but it works!<br>
<br>
I can send you that too. It's something I've been meaning to give back to
the group, but I havn't had time to fix it up yet. Bear with me - I'll
try to get the code to you this week.... <br>
<br>
Liz</span></font></p>
<div>
<p><span><font face="Times New Roman" size="3"><span style="font-size: 12pt;">On 1/16/07, <b><span style="font-weight: bold;">Brent
Lund</span></b> <<a href="mailto:Brent.Lund@state.mn.us" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">Brent.Lund@state.mn.us</a>>
wrote:</span></font></span></p>
<div link="blue" vlink="blue">
<div>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">Liz,</span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">I really like how your site auto fits the map to the size of
the browser. Is this done in a css? Or script? Both?</span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">Thanks again</span></font></p>
<div><span>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;">Brent</span></font></p>
<p><font color="navy" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial; color: navy;"> </span></font></p>
<div>
<div style="text-align: center;" align="center"><font face="Times New Roman" size="3"><span style="font-size: 12pt;">
<hr align="center" size="2" width="100%">
</span></font></div>
<p><b><font face="Tahoma" size="2"><span style="font-size: 10pt; font-family: Tahoma; font-weight: bold;">From:</span></font></b><font face="Tahoma" size="2"><span style="font-size: 10pt; font-family: Tahoma;"> Liz Godwin [mailto:
<a href="mailto:godwin.liz@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">godwin.liz@gmail.com</a>] <br>
<b><span style="font-weight: bold;">Sent:</span></b> Monday, January 15, 2007
9:10 AM<br>
<b><span style="font-weight: bold;">To:</span></b> <a href="mailto:chameleon@lists.maptools.org" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">chameleon@lists.maptools.org</a><br>
<b><span style="font-weight: bold;">Cc:</span></b> <a href="mailto:Brent.Lund@state.mn.us" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">Brent.Lund@state.mn.us</a><br>
<b><span style="font-weight: bold;">Subject:</span></b> Re: [Chameleon] jsapi and
scalezoom widget</span></font></p>
</div>
<p><font face="Times New Roman" size="3"><span style="font-size: 12pt;"> </span></font></p>
<p style="margin-bottom: 12pt;"><font face="Times New Roman" size="3"><span style="font-size: 12pt;">We're using a slightlyolder version of Chameleon
(2.0?) - but in that the ScaleZoom widget wasn't jsapi enabled. We made
changes to enable it, but it's still a bit flakey (randomly), mostly just with
IE.<br>
<br>
I'd be happy to share it with you or anyone else. Of course if you make
it better, please share back :-)<br>
<br>
It can be seen in action here (it's along the top of the map):<br>
<a href="http://nlwis-snite1.agr.gc.ca/eco/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://nlwis-snite1.agr.gc.ca/eco/</a><br>
<br>
Cheers,<br>
<br>
Liz</span></font></p>
<div>
<p><font face="Times New Roman" size="3"><span style="font-size: 12pt;">On
1/11/07, <b><span style="font-weight: bold;">Brent Lund</span></b> <<a href="mailto:Brent.Lund@state.mn.us" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">Brent.Lund@state.mn.us </a>>
wrote:</span></font></p>
<div link="blue" vlink="purple">
<div>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">My
ScaleZoom widget is not updated when in jsapi mode. It will updated
the map (zoom in/out), but ScaleZoom itself is not redrawn. Am I missing
something? </span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"> </span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">Thanks,</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">Brent</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"> </span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"> </span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"> </span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"><CWC2
TYPE="ScaleZoom"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">ORIENTATION="HORIZONTAL"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">ENABLED="TRUE"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">VISIBLE="TRUE"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">INCREASEIMAGE="images/z-in2.png"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">DECREASEIMAGE="images/z-out2.png"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">CURRENTIMAGE="images/zoom_current.png"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">PUTTABLETAGS="TRUE"</span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">> </span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"> </span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">
<ZOOMVALUE SCALE="100000"
IMAGE="images/zoom_inc.png"/></span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">
<ZOOMVALUE SCALE="50000"
IMAGE="images/zoom_inc.png"/></span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">
<ZOOMVALUE SCALE="20000"
IMAGE="images/zoom_inc.png"/></span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">
<ZOOMVALUE SCALE="10000"
IMAGE="images/zoom_inc.png"/></span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">
<ZOOMVALUE SCALE="5000" IMAGE="images/zoom_inc.png"/></span></font></p>
<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"></CWC2></span></font></p>
</div>
</div>
<p style="margin-bottom: 12pt;"><font face="Times New Roman" size="3"><span style="font-size: 12pt;"><br>
_______________________________________________<br>
Chameleon mailing list<br>
<a href="mailto:Chameleon@lists.maptools.org" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">Chameleon@lists.maptools.org</a><br>
<a href="http://lists.maptools.org/mailman/listinfo/chameleon" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://lists.maptools.org/mailman/listinfo/chameleon</a></span></font></p>
</div>
<p><font face="Times New Roman" size="3"><span style="font-size: 12pt;"> </span></font></p>
</span></div>
</div>
</div>
</div>
<p><font face="Times New Roman" size="3"><span style="font-size: 12pt;"> </span></font></p>
</div>
</div>
</blockquote></div><br>