Question

I’m implementing an OpenLayers SelectFeature control, and trying to position an JQuery UI dialog widget right on top of the selected feature. To use the JQuery UI Position utility, it requires either a DOM element or an Event.

The onSelect callback of the SelectFeature control gives me an OpenLayers.Feature.Vector object representing the selected feature. From this, how do I get either the DOM element of the selected feature, or the Event object of the click event?

  var selectControl = new OpenLayers.Control.SelectFeature(clientsLayer, {
            hover   : false,
            clickout: false,
            multiple: false,
            onSelect: function(feature) {
                // how do I get the DOM element of the feature
                // or alternately, the click event of the selection?
            }
   }); 

Answer 1

You are doing it right.

If you do a console.log(feature) You’ll see that it returns an object with CLASS_NAME =
“OpenLayers.Feature.Vector”

onSelect: function(feature) {
    console.log(feature);
}

Update:

I see.
You could add event listeners

var selectControl = new OpenLayers.Control.SelectFeature(clientsLayer, {
    hover: false,
    clickout: false,
    multiple: false,
    eventListeners: {
        featurehighlighted: function (event) {
            console.log(event);
            console.log(event.feature);
        }
    }
});