Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am having a problem applying CSS to two custom OpenLayers buttons. I create a PANEL toolbar and then add 8 buttons to it. The ZoomBox, DragPan, ZoomOut, ZoomIn, and nav.next and nav.previous buttons all style the way they should. The issue is with the two BUTTON items.

As near as I can tell the OpenLayers BUTTON object only allows one CSS style called .olControlButtonItemInactive.

THE PROBLEM: I have two BUTTON objects in the PANEL and I want each one to have a different style. But, if I change the name of the CSS class from olControlButtonItemInactive the CSS no longer is picked up by the button.

I thought I could just assign a unique ID attribute to each BUTTON (for instance button #1 has an ID of 'btnMaxExtent' and button #2 has an ID of 'btnHiLite'), then create a CSS style for each one called, respectively, olControlbtnMaxExtentItemInactive and olControlbtnHiLiteItemInactive and then assign these two button styles to the olControltoolPanel class but it does not work.

Here is the script I use to create the buttons on my panel:

    var panelControls = [
            new OpenLayers.Control.ZoomBox({title: "Draw a box to ZOOM IN", text: 'Click Me'}), 
            new OpenLayers.Control.DragPan({title: "Click to PAN around map"}),
            new OpenLayers.Control.ZoomOut({title: "Click to ZOOM OUT one level"}),
            new OpenLayers.Control.ZoomIn({title: "Click to ZOOM IN one level"}),   
            new OpenLayers.Control.Button({title: "Click to go to MAX EXTENT", 
                id: 'btnMaxExtent',                                 
                trigger: zoomToExtent}),
            nav.next, nav.previous,         
            new OpenLayers.Control.Button({title: "Click once for hover info, click it again to turn off the functionality", 
                id: 'btnHiLite',
                trigger: activateHiLite})               
            ];

Just for completeness here is the script I use to add the controls to my panel:

    var toolbar = new OpenLayers.Control.Panel({'div':  document.getElementById('tlbr')});

    toolbar.addControls(panelControls);
    map.addControl(toolbar);

And here is the CSS I have now that works for the BUTTON objects but it makes both BUTTONs look the same.

I want each button to have its own CSS. If I take this same CSS script and create one for each of the BUTTONS with the names .olControlbtnMaxExtentItemInactive and .olControlbtnHiLiteItemInactive they do not work.

  .olControltoolPanel .olControlButtonItemInactive { 
border-top: 1px solid #96d1f8;
background: #6ed665;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9c50), to(#6ed665));
background: -webkit-linear-gradient(top, #3e9c50, #6ed665);
background: -moz-linear-gradient(top, #3e9c50, #6ed665);
 background: -ms-linear-gradient(top, #3e9c50, #6ed665);
background: -o-linear-gradient(top, #3e9c50, #6ed665);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
background-image: url('Img/zoom-world-mini.png');
background-repeat: no-repeat;
    }

Any suggestions would be appreciated. Thanks for taking the time to look at this!

share|improve this question
add comment

2 Answers

If I have understood well what you have written, I guess that what you are missing is assigning a different CSS classes to each button. Each of these classes will set a background image to the div used to display the button.

Assigning a CSS class can be done when creating the button using the property displayClass:

new OpenLayers.Control.Button({
    title: 'my button', 
    id: 'myButton',                                 
    trigger: myButtonTrigger,
    displayClass: 'myButtonClass'
})

In case the control has two states, 'active' and 'inactive', according to the previous example you would have to create tow CSS classes named 'myButtonClassItemActive' and 'myButtonClassItemInactive'.

EDIT: I don't see the need of explicitly giving the button an id; OpenLayers will do it for you and, besides, likely you will not need it.

share|improve this answer
    
Thanks for your comment Dariapra. Unfortunately, I see that I did not write my initial description very clearly. The issue is that when I do create a CSS class for each BUTTON it does not work. For instance: If I create a class like this: .olControltoolPanel .olControlmyButtonItemInactive { ...CSS here....} The BUTTON gets no CSS style at all. On the other hand if I write the CSS like this: .olControlmyButtonItemInactive { ...CSS here...} The style appears in the upper right corner of the map window, but my tool panel and buttons are in a div outside the map. Thanks –  Todd Krueger Oct 26 '12 at 22:21
    
It seems you have two problems, one positioning the button and another one styling it. These problems must be solved separately. First I would forget about styling and just try to put the button's div where wanted. In the code you have posted I don't see anything dealing with button placement. You can find an example about it at goo.gl/JZ5Ro. –  dariapra Oct 27 '12 at 2:46
add comment
up vote 0 down vote accepted

After trying a lot of different options here is what I did to make it work. The original problem was that I wanted to assign different CSS to two different OpenLayers.Control.BUTTON objects but for some reason they were both getting the same CSS.

What I did was remove the script that created the buttons from inside the panelControls array. Now I create variables for both buttons, assign the appropriate attributes to each variable, and then add the variable for the buttons to the panelControls array.

Each button object also gets its own block of CSS assigned to it when it is declared. Now each button gets looks different! Here is the JavaScript I use;

        var btnZoomToMaxExtent = new OpenLayers.Control.Button({ title: "MAX EXTENT",
                id: 'btnZoomToMaxExtent',
                displayClass: "btnZoomToMaxExtent",
                trigger: zoomToExtent
            }); //Calls the zoomToExtent function so that it only zooms out to the extent we tell it to instead of the map extent   
            var btnHiLite = new OpenLayers.Control.Button({ title: "Click once for hover info, click it again to turn off the functionality",
                id: 'btnHiLite',
                displayClass: "btnHiLite",
                trigger: activateHiLite
            });                             

    var panelControls = [
            new OpenLayers.Control.ZoomBox({title: "Draw a box to ZOOM IN"}),   
            new OpenLayers.Control.DragPan({title: "PAN"}),
            new OpenLayers.Control.ZoomOut({title: "ZOOM OUT"}),
            new OpenLayers.Control.ZoomIn({title: "ZOOM IN"}),
            nav.previous, nav.next, btnZoomToMaxExtent, btnHiLite                                   
            ];

and here is the CSS for both buttons. They both look similiar but have different images:

//THIS IS THE CSS FOR THE btnHiLite
.btnHiLiteItemInactive {  
border-top: 1px solid #96d1f8;
background: #6ed665;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9c50), to(#6ed665));
background: -webkit-linear-gradient(top, #3e9c50, #6ed665);
background: -moz-linear-gradient(top, #3e9c50, #6ed665);
 background: -ms-linear-gradient(top, #3e9c50, #6ed665);
background: #6ed665 url('../../img/marker.png') no-repeat center;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;

}

//THIS IS THE CSS FOR btnZoomToMaxExtent
   .btnZoomToMaxExtentItemInActive { 
border-top: 1px solid #96d1f8;
background: #6ed665;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9c50), to(#6ed665));
background: -webkit-linear-gradient(top, #3e9c50, #6ed665);
background: -moz-linear-gradient(top, #3e9c50, #6ed665);
 background: -ms-linear-gradient(top, #3e9c50, #6ed665);
background: #6ed665 url('../../Img/move_feature_off.png') no-repeat center;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;

}

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.