SelectFeature with Double-Click

Question

I have the ability to select features on the map with a click using OpenLayers.Control.SelectFeature. How can i add a double-click handler to that?

I have tried modifying this code to suite my needs, but it ends up overriding my SelectFeature. So i'm able to handle the double click, but the single click in the SelectFeature stops working.

DEMO LINK

DEMO CODE:

<script type="text/javascript">
    var map, vectorLayer;

    function init() {
        map = new OpenLayers.Map('map');
        var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });

        vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");

        map.addLayers([layer, vectorLayer]);

        var wkt = new OpenLayers.Format.WKT();

        polygonFeature = wkt.read("POLYGON((-85.419086 49.25385,-55.05949 44.951293,-71.090388 1.315632,-91.743655 4.348987,-85.419086 49.25385))");

        vectorLayer.addFeatures([polygonFeature]);
        var bounds = polygonFeature.geometry.getBounds();
        map.zoomToExtent(bounds);

        addClickHandler();
        addDoubleClickHandler();   

    }

    function addDoubleClickHandler() {

        var DblclickFeature = OpenLayers.Class(OpenLayers.Control, {
            initialize: function (layer, options) {
                console.log(this);
                OpenLayers.Control.prototype.initialize.apply(this, [options]);
                this.handler = new OpenLayers.Handler.Feature(this, layer, {
                    dblclick: this.dblclick
                });
            }
        });

        var dblclick = new DblclickFeature(vectorLayer, {
            dblclick: function (event) {
                console.log(event);
            }
        });

        map.addControl(dblclick);
        dblclick.activate();
    }

    function addClickHandler() {

        var handler_featureselected = function (e) {
            console.log("handler_featureselected");
        };
        var handler_featureunselected = function (e) {
            console.log("handler_featureunselected");
        };

        var selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
            {
                hover: false,
                clickout: false,
                multiple: true,
                toggle: true,
                //box: true,
                eventListeners: {
                    featurehighlighted: handler_featureselected,
                    featureunhighlighted: handler_featureunselected
                }
                //multipleKey: "shiftKey"
            }
        );

        map.addControl(selectControl);
        selectControl.activate();
    }

</script> 

Answer 1

I think you will get what you're looking for examining the source code of that page.