[OpenLayers-Users] How do I Set Up Both ZoomIn and ZoomOut tools?

Richard Greenwood richard.greenwood at gmail.com
Thu Aug 14 22:45:49 EDT 2008


On Thu, Aug 14, 2008 at 3:11 PM, Bill Thoen <bthoen at gisnet.com> wrote:
> I figured out that by setting the property 'out' on the ZoomBox control
> to 'true' the tool then becomes a ZoomOut tool. So I made two copies of
> the tool and set one of them to out=true. But then how do I style them
> differently? Since they're both ZoomBox controls they get assigned the
> same CSS style. How do people differentiate them?

You override displayClass, e.g.:

   var zbo= new OpenLayers.Control.ZoomBox(

     {title:'Zoom Out by clicking or dragging a rectangle.',

     out: true,

     displayClass: "olControlZoomBoxOut"});

And in a style you set something like:

 .olControlPanel .olControlZoomBoxOutItemInactive {

    width:  24px;

    height: 22px;

    background-image: url("../graphics/zoomout.gif");

 }

 .olControlPanel .olControlZoomBoxOutItemActive {

    width:  24px;

    height: 22px;

    background-image: url("../graphics/zoomoutX.gif");

 }


-- 
Richard Greenwood
richard.greenwood at gmail.com
www.greenwoodmap.com



More information about the Users mailing list