[OpenLayers-Users] Customising the OL interface

[Erik Uzureau]

For those of you still following this thread, the problem has been
formalised in trac:

http://trac.openlayers.org/ticket/1400

...and hopefully a solution will be in the upcoming OpenLayers 2.7 release

cheers
e


On Fri, Jun 6, 2008 at 9:46 AM, Oscar Fonts <oscar.fonts.lists at gmail.com> wrote:
> 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
>
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>