[OpenLayers-Dev] Hover style not working on GML

[Andreas Hocevar]

Hi,

On Jan 11, 2008 5:36 PM, Eric Lemoine <eric.c2c at gmail.com> wrote:
> On Jan 11, 2008 5:15 PM, Dejung Gewissler
> <dejung.gewissler at oit.state.nj.us> wrote:
> >     1) features rendered differently based on feature values (done with
> > styles and rules)
> >     2) on mouseover/hover of a feature the hover styles to take effect
> >     3) on click of the feature a popup should appear
> >
> > 1) is done. 2) I can't get to work unless I attach a selectFeature
> > control to the layer and set {hover: true}. Is there a way to accomplish
> > this task without using the selectFeature control?
>
> Not that I'm aware of. But I understand why you're asking this - the
> hover* style properties. I've never use these properties myself, and I
> don't know if they're actually usable. Someone may want to jump in...

Those hover* style properties do not do anything.  The proper way to
control styling of the features for mouseover is to set the
selectStyle property of the OL.SelectFeature control, like Eric
already pointed out.  If you also want to have those rule-based, you
have to create separate styling rules, again with fillColor,
strokeColor and so on. Then you have to write a custom select method
for the SelectFeature control (as also shown in examples/sld.html):

    var hover = new OpenLayers.Control.SelectFeature(myGML, {
        hover: true,
        selectStyle: yourSelectStyleHere,
        select = function(feature) {
            // store layer style
            var style = feature.layer.style;
            // set temporary layer style for hover rendering
            feature.layer.style = hover.selectStyle;
            OpenLayers.Control.SelectFeature.prototype.select.apply(hover,
arguments);
            // restore layer style
            feature.layer.style = style;
        }});


> > The reason why is
> > that I would like to use the selectFeature control in 3) and attach some
> > functionality to the onSelect callback.
>
> Have you tried using two select feature controls on the same layer,
> one with hover:true, the other with hover:false? Again, I've never
> tried this myself, and I'm not actually sure it'll work. If that
> doesn't work, I'd say it's a bug in OpenLayers, and we'll need to fix
> it.

I also do not know if that works, but I did it using the following
trick: in the onSelect method of the SelectFeature control with
hover:true, I defined a priority listener for mousedown:

    var onClick = function(evt) {
        // do your onClick stuff here
        OpenLayers.Event.stop(evt);
    }

    feature.layer.events.registerPriority('mousedown', feature, onClick);

In the onClick method, you can do the custom action you want to do on
click (note that onClick is called in the context of the feature, so
the feature can be accessed with "this").

And do not forget to also remove the mousedown event in the onUnselect method:

    feature.layer.events.unregister('mousedown', feature, onClick);

Regards,
Andreas.