[OpenLayers-Users] Customising the OL interface

[Paul Spencer]

Probably your only option at this time is to copy OpenLayers/Control/ 
PanZoomBar.js to OpenLayers/Control/PanZoomBarCustom.js, make the  
appropriate changes to replace PanZoomBar with PanZoomBarCustom and  
then make the changes to hard code your new images/positions.

Cheers

Paul

On 6-Jun-08, at 3:45 AM, Matthew Doyle wrote:

>
> Thank you Richard for your suggestion to check panel.html in the  
> examples,
> but this doesn't fulfill exactly what I am trying to do.
>
> I wish to re-position and re-size (the former being the more  
> important,
> rather than the latter) the PanZoomBar controls so that they are  
> laid out
> like in  http://img511.imageshack.us/img511/8654/exampleinterfacepc0.jpg
> this image .
>
> I have attempted to do this with CSS, but I see that the PanZoomBar  
> controls
> are heavily hardcoded (size, filename, position) within the  
> OpenLayers JS
> library: (PanZoomBar.js)
>
> 	  var sz = new OpenLayers.Size(18,18);
> (...)
> 	  this._addButton("panup", "north-mini.png", centered, sz);
>        px.y = centered.y+sz.h;
>        this._addButton("panleft", "west-mini.png", px, sz);
>        if (this.zoomWorldIcon) {
>            this._addButton("zoomworld", "zoom-world-mini.png",  
> px.add(sz.w,
> 0), sz);
>            wposition *= 2;
>        }
>        this._addButton("panright", "east-mini.png",  
> px.add(wposition, 0),
> sz);
>        this._addButton("pandown", "south-mini.png", centered.add(0,
> sz.h*2), sz);
>        this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0,
> sz.h*3+5), sz);
> (...)
>
> It doesn't seem immediately able to customise these controls.
>
> So, I ask; how, if at all possible, can I do this?
>
> Cheers and regards,
> Matt
>
>
>
>
>
> Matthew Doyle wrote:
>>
>> Hi OL users,
>>
>> We have designed a new set of icons to replace the basic set in the
>> OpenLayers theme and now wish to redesign some of the aspects on  
>> where
>> these should be and how they should work.
>>
>> I assumed this to be an easy process which is completely controlled  
>> via
>> CSS, but have spent the day scratching my head at how some aspects  
>> of the
>> interface is driven. Simply replacing a few images with the new  
>> icons does
>> work for the current interface, but we wish to change the position  
>> of,
>> say, the top left panning buttons and change the size of the  
>> increase zoom
>> 'plus' button. It doesn't seem immediately obvious how to do this,  
>> and
>> looks as though some on-the-fly processing of icons is done through  
>> the JS
>> via element.style="..."
>>
>> I'm sure there have been many others who have already been through  
>> this
>> process, so i am ask you, is there any FAQ or "how to" on  
>> customising the
>> OpenLayers interface?
>>
>> I apologise if this is an easy one, but trawling through the  
>> style.css
>> didn't define some aspects i thought it would.
>>
>> Many thanks in advance,
>> Matt
>>
>>
>>
>
> -- 
> View this message in context: http://www.nabble.com/Customising-the-OL-interface-tp17506906p17686454.html
> Sent from the OpenLayers Users mailing list archive at Nabble.com.
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users