How to change the default color used by openlayers hover?

Question

It is possible to change the color of highlightCtrl when I use onselectedHover? Default is light blue.

I want to change it to another one eg. red? Does anyone know where this value is defined?

Problem solved !! I've just added new style in OpenLayers.StyleMap. I had specific styles for: 'default', 'select' and now i've added also 'temporary' which is responsible for highlightCtrl style. Hope this is helpfull for someone else too. — Alex, Dec 15 '11 at 12:08

score 19 · Answer 1 · answered Dec 16 '11 at 21:11

When you define your layer you could specify your styleMaps as well:

_layer = new OpenLayers.Layer.Vector("My Layer Name", {
    styleMap: new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            strokeColor: "#ff0000",
            strokeOpacity: .7,
            strokeWidth: 1,
            fillColor: "#ff0000",
            fillOpacity: 0,
            cursor: "pointer"
        }),
        "temporary": new OpenLayers.Style({
            strokeColor: "#ffff33",
            strokeOpacity: .9,
            strokeWidth: 2,
            fillColor: "#ffff33",
            fillOpacity: .3,
            cursor: "pointer"
        }),
        "select": new OpenLayers.Style({
            strokeColor: "#0033ff",
            strokeOpacity: .7,
            strokeWidth: 2,
            fillColor: "#0033ff",
            fillOpacity: 0,
            graphicZIndex: 2,
            cursor: "pointer"
        })
    })
});

Then specify your renderintent:

_highlightControl = new OpenLayers.Control.SelectFeature(layer, {
    hover: true,
    highlightOnly: true,
    renderIntent: "temporary"
});

thanks, as I mentioned before I solved the problem, exactly as you say, thanks anyway — Alex, Dec 20 '11 at 08:32
@Alex: Since you're new here, let me explain how this works. If you get to solve your own answer, then answer it. And mark the answer as 'answered'. You have made a comment which lacks example and proper explanation. I figured if anyone searching has the same question as you did, they will appreciate having an answer that will be helpful to them. — CaptDragon, Dec 20 '11 at 14:10

score 1 · Answer 2 · answered Dec 30 '11 at 13:54

The other way is to edit directly the style.css archive in the ol/Theme/default directory of your Openlayers library. Look for this code and edit it:

.olHandlerBoxSelectFeature {
border: 2px solid blue;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);}

Hope this will be useful to you.

How to change the default color used by openlayers hover?

2 Answers2