OpenLayers SelectFeature control with hover delay?

Question

Using OpenLayers, I have a OpenLayers.Control.SelectFeature installed on a layer, with the hover option set to true. When creating the layer I call

<layer>.events.register("featureselected",...)

and

<layer>.events.register("featureunselected",...)

to register functions that create and destroy a popup. This all works fine. Now I want to add a small delay before the popup is created in order to avoid the popup flickering that currently occurs when moving the mouse across multiple features. However, I can't seem to figure out how to do this. I did find the OpenLayers.Handler.Hover handler, which has a delay option, but I don't know how to combine that with the SelectFeature control (if I even can).

I wish someone would know about this, I find the flickering very annoying. In case I find out why I will post it here. — Glenn Plas, Oct 09 '12 at 19:47

score 1 · Answer 1 · edited May 23 '17 at 12:14

I think this post has some valuable info, which I'm about to verify. Some answers down, someone talks about the flickering.

edit: In case you are making your own labels, I noticed the effect is less when you raise the labelOutlineWidth . It seems that only the letters of the label count as 'hover' and not the whole PointRadius radius. When you make the label outline too big, the label looks like a fly that hit a windscreen though (not a square but it follows the label contours, the letters more specifically).

update: apparently this is why when you hover a text label , check this out: pointer events properties. set this attribute (pointerEvents: ) in your OpenLayers.Style and try value 'all' and the others. It sure makes a difference for me.

Thanks Glenn! And even more explicitly, the solution to the flickering problem was to add `.olPopup {pointer-events: none;}` to the CSS. — sfletche, Oct 08 '13 at 22:43

score 0 · Answer 2 · answered Oct 17 '12 at 22:02

I bind my feature selections a little different, here's a quick (untested) example that should get you what you need.

var timer,
delay = 500, //delay in ms
hover = new OpenLayers.Control.SelectFeature( <layer> , {

    hover: true,

    onSelect: function (feature) {

        // setup a timer to run select function
        timer = window.setTimeout(function () {

            // your select code

        }, delay);
    },

    onUnselect: function () {

        // first cancel the pending timer (no side effects)
        window.clearTimeout(timer);

        // your unselect code
    }

});

<map>.addControl(hover);

hover.activate();

OpenLayers SelectFeature control with hover delay?

2 Answers2