OpenLayers Feature Click and Double Click Event – How to Implement

openlayers-2

I'm have an OpenLayers map with a single vector layer containing many features. I've been using SelectFeature to pop up some info when a feature is clicked, and that's working fine. However, I now want to add some functionality when the feature is double-clicked – specifically I just want to zoom in, and not have the popup appear.

I gave this a shot: http://blog.slashpoundbang.com/post/2342888467/openlayers-zoom-when-a-feature-in-a-vector-layer-is
But it removed my single-click functionality.

Essentially this is the same problem as SelectFeature with Double-Click

Any ideas?

UPDATE:

So I'm trying a workaround using SelectFeature to handle the single click and registering an event listener on the vector layer to handle the double click. All I want to do is zoom in on the double clicked feature. This is what I have:

VEClayer.events.register('dblclick', VEClayer, function(e){
    map.zoomToExtent(e.features.geometry.getBounds(), closest=true);
    }
);

However now I have another problem, and I'm not sure if it's being caused by having both SelectFeature and the listener active or what. The new issue is that try as I might I can't access any of the event attributes. So when I try to get e.features.geometry.getBounds(), Firebug gives me the error "e.features is undefined". I've tried to get this multiple other ways (e.xy, e.longlat, getMousePosition) and it's always the same result.

Best Answer

Did you look at OpenLayers.Handler.Click?

The select control takes an handler as option, and the above one has a boolean that should tell you if is single or double click.

Example 

Not exactly what you asked (select on dblClick; deselect on click) but should be easy to change

// Simple WFS layer
wfs = new OpenLayers.Layer.Vector(
    "WFS",
    {
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS(
        {
            url:  "/optima/geoserver/wfs",
            featureType: "node",
            featureNS: "http://piemonte.optima.sistemaits.com",
            geometryName: 'poin'
        })
});
map.addLayer(wfs);

// Add a select control (note: this control is added to the map, but is disabled)
var select = new OpenLayers.Control.SelectFeature(
    wfs,
    {
        multiple: false,
        clickout: true,             // Will be ignored (aka, you have to deselect a feature when no feature is found onClick)
        onSelect: function(feature)
        {
            // ...
        },
        onUnselect: function(feature)
        {
            // ...
        }
    }
);

map.addControl(select);

// Handler to intercept click.
handler = new OpenLayers.Handler.Click(
    select,  // The select control
    {
        click: function(evt)
        {
            console.warn(this); // OpenLayers.Control.SelectFeature
            var feature = this.layer.getFeatureFromEvent(evt);
            
            // clickout
            if(this.layer.selectedFeatures){
                this.unselect(this.layer.selectedFeatures[0]);
            }
        },
        dblclick: function(evt)
        {
            console.info(this); // OpenLayers.Control.SelectFeature
            var feat = this.layer.getFeatureFromEvent(evt);
            // Select a feature
            if(feat){
                this.select(feat);
            }

        }
    },
    {
        single: true,
        double: true,
        stopDouble: true,
        stopSingle: true
    }
);

// select.activate();  // The select control must NOT be active
handler.activate();    // The handler will handles the click events for the select control
Related Question