That's what we did at <a href="http://www.icc.cat/vissir2/" target="_blank">http://www.icc.cat/vissir2/</a><br>Extend PanZoomBar and override draw() method.<br><br>Code at <a href="http://www.icc.cat/vissir2/js/vissir_lib/PanZoomBar.class.js" target="_blank">http://www.icc.cat/vissir2/js/vissir_lib/PanZoomBar.class.js</a><br>
<br>Regards,<br><br>Oscar.<br><br><br><div class="gmail_quote">2008/6/6 Paul Spencer <<a href="mailto:pagameba@gmail.com">pagameba@gmail.com</a>>:<br><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Probably your only option at this time is to copy OpenLayers/Control/<br>
PanZoomBar.js to OpenLayers/Control/PanZoomBarCustom.js, make the<br>
appropriate changes to replace PanZoomBar with PanZoomBarCustom and<br>
then make the changes to hard code your new images/positions.<br>
<br>
Cheers<br>
<font color="#888888"><br>
Paul<br>
</font><div><div></div><div class="Wj3C7c"><br>
On 6-Jun-08, at 3:45 AM, Matthew Doyle wrote:<br>
<br>
><br>
> Thank you Richard for your suggestion to check panel.html in the<br>
> examples,<br>
> but this doesn't fulfill exactly what I am trying to do.<br>
><br>
> I wish to re-position and re-size (the former being the more<br>
> important,<br>
> rather than the latter) the PanZoomBar controls so that they are<br>
> laid out<br>
> like in <a href="http://img511.imageshack.us/img511/8654/exampleinterfacepc0.jpg" target="_blank">http://img511.imageshack.us/img511/8654/exampleinterfacepc0.jpg</a><br>
> this image .<br>
><br>
> I have attempted to do this with CSS, but I see that the PanZoomBar<br>
> controls<br>
> are heavily hardcoded (size, filename, position) within the<br>
> OpenLayers JS<br>
> library: (PanZoomBar.js)<br>
><br>
> var sz = new OpenLayers.Size(18,18);<br>
> (...)<br>
> this._addButton("panup", "north-mini.png", centered, sz);<br>
> px.y = centered.y+sz.h;<br>
> this._addButton("panleft", "west-mini.png", px, sz);<br>
> if (this.zoomWorldIcon) {<br>
> this._addButton("zoomworld", "zoom-world-mini.png",<br>
> px.add(sz.w,<br>
> 0), sz);<br>
> wposition *= 2;<br>
> }<br>
> this._addButton("panright", "east-mini.png",<br>
> px.add(wposition, 0),<br>
> sz);<br>
> this._addButton("pandown", "south-mini.png", centered.add(0,<br>
> sz.h*2), sz);<br>
> this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0,<br>
> sz.h*3+5), sz);<br>
> (...)<br>
><br>
> It doesn't seem immediately able to customise these controls.<br>
><br>
> So, I ask; how, if at all possible, can I do this?<br>
><br>
> Cheers and regards,<br>
> Matt<br>
><br>
><br>
><br>
><br>
><br>
> Matthew Doyle wrote:<br>
>><br>
>> Hi OL users,<br>
>><br>
>> We have designed a new set of icons to replace the basic set in the<br>
>> OpenLayers theme and now wish to redesign some of the aspects on<br>
>> where<br>
>> these should be and how they should work.<br>
>><br>
>> I assumed this to be an easy process which is completely controlled<br>
>> via<br>
>> CSS, but have spent the day scratching my head at how some aspects<br>
>> of the<br>
>> interface is driven. Simply replacing a few images with the new<br>
>> icons does<br>
>> work for the current interface, but we wish to change the position<br>
>> of,<br>
>> say, the top left panning buttons and change the size of the<br>
>> increase zoom<br>
>> 'plus' button. It doesn't seem immediately obvious how to do this,<br>
>> and<br>
>> looks as though some on-the-fly processing of icons is done through<br>
>> the JS<br>
>> via element.style="..."<br>
>><br>
>> I'm sure there have been many others who have already been through<br>
>> this<br>
>> process, so i am ask you, is there any FAQ or "how to" on<br>
>> customising the<br>
>> OpenLayers interface?<br>
>><br>
>> I apologise if this is an easy one, but trawling through the<br>
>> style.css<br>
>> didn't define some aspects i thought it would.<br>
>><br>
>> Many thanks in advance,<br>
>> Matt<br>
>><br>
>><br>
>><br>
><br>
> --<br>
> View this message in context: <a href="http://www.nabble.com/Customising-the-OL-interface-tp17506906p17686454.html" target="_blank">http://www.nabble.com/Customising-the-OL-interface-tp17506906p17686454.html</a><br>
> Sent from the OpenLayers Users mailing list archive at Nabble.com.<br>
><br>
> _______________________________________________<br>
> Users mailing list<br>
> <a href="mailto:Users@openlayers.org">Users@openlayers.org</a><br>
> <a href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a><br>
<br>
_______________________________________________<br>
Users mailing list<br>
<a href="mailto:Users@openlayers.org">Users@openlayers.org</a><br>
<a href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a><br>
</div></div></blockquote></div><br>