How to get Event or DOM element of selected feature in OpenLayers

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); } } }); 

Answer 2

Is it something like this you look for ?

onSelect: function onFeatureSelect(event) {
              var feature = event.feature;
              if ( feature.layer.name == 'theone') {
              ...
              }
        }

Answer 3

Note I have also posted this answer at How do I get the DOM element from openlayers vector feature

If you want to find the position of the mouse or feature on hover so you can display a custom overlay, create a custom hover control and define the featurehighlighted function as follows:

var featureHoverControl = new OpenLayers.Control.SelectFeature([myLayer], {
    id: 'featureHoverControl',
    hover: true,
    autoActivate: true,
    highlightOnly: true,
    renderIntent: "temporary",
    eventListeners: {
       featurehighlighted: function(e) {
            // either use the mouse's position when the event was triggered
            var mouseXPosition = this.handlers.feature.evt.x;
            var mouseYPosition = this.handlers.feature.evt.y;

            // or retrieve the feature's center point
            var featureCenterLonLat = e.feature.geometry.bounds.getCenterLonLat();
            var featureCenterPoint = map.getPixelFromLonLat(featureCenterLonLat);

            // display your custom popup here
            // e.g. showTooltip(e.feature.attributes.name, featureCenterPoint.x, featureCenterPoint.y)
        }
        ,
        featureunhighlighted: function(e) {
            // hide your custom popup here
            // e.g. hideTooltip()
        }
    }
});
map.addControl(featureHoverControl);

If you require access to the SVG element representing your layer/feature (in the event you are using a third-party library and you don't feel like modifying the source code), use either of the following lines (depending if you require the layer or feature):

var layerElement = map.getLayersByName("My Layer")[0].features.root;
var layerElementId = map.getLayersByName("My Layer")[0].features.root.id;
var featureElementId = map.getLayersByName("My Layer")[0].getFeaturesByAttribute("name","My Feature Name")[0].geometry.components[0].id;

Note that since this only grabs the element's id, you'll still need to use an appropriate method to grab a reference to the element itself. Something like either of the following:

var elementReference1 = document.getElementById(featureElementId);
var elementReference2 = jQuery('#'+featureElementId)[0];