[OpenLayers-Users] Customising the OL interface

[Oscar Fonts]

That's what we did at http://www.icc.cat/vissir2/
Extend PanZoomBar and override draw() method.

Code at http://www.icc.cat/vissir2/js/vissir_lib/PanZoomBar.class.js

Regards,

Oscar.


2008/6/6 Paul Spencer <pagameba at gmail.com>:

> 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
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20080606/47162f12/attachment.html