How do I get the coordinates of a click on vector feature/layer in OpenLayers?

Question

I need to get the coordinate of the click when the user clicks on a vector feature on the OpenLayers map. The SelectControl only gives the feature that was clicked and not the coordinates of the click. Anyway to get at the coordinates of the click on a vector? I need to show AnchoredBubble at the point of the user click.

Answer 1

Actually, the click event sample gives you what you want.

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
            defaultHandlerOptions: {
                'single': true,
                'double': false,
                'pixelTolerance': 0,
                'stopSingle': false,
                'stopDouble': false
            },

            initialize: function(options) {
                this.handlerOptions = OpenLayers.Util.extend(
                    {}, this.defaultHandlerOptions
                );
                OpenLayers.Control.prototype.initialize.apply(
                    this, arguments
                ); 
                this.handler = new OpenLayers.Handler.Click(
                    this, {
                        'click': this.trigger
                    }, this.handlerOptions
                );
            }, 

            trigger: function(e) {
                var lonlat = map.getLonLatFromViewPortPx(e.xy);
                alert("You clicked near " + lonlat.lat + " N, " +
                                          + lonlat.lon + " E");
            }

        });

If needed you can convert coordinates to pixel to display the popup.

Edit - to get coordinates only on selecting feature :

   var options = {
    onSelect: getCoordinates,
};

var selectEt = new OpenLayers.Control.SelectFeature(mylayer, options);
map.addControl(selectEt);

function getCoordinates(e) {
 // this should work
 var lonlat = map.getLonLatFromViewPortPx(e.xy);
 alert("You clicked near " + lonlat.lat + " N, " +
                                          + lonlat.lon + " E");
}

Answer 2

The API doesn't provide a way to get the click location from the SelectFeature control - but it should. It would be a trivial addition (to have xy included in the featureselected event). If you ticket this, it would be the first step in making it happen.

In the meantime, you can access the mouse event on the feature handler used by the SelectFeature control. So, you might have a listener that looks something like this:

layer.events.on({featureselected: function(event) {
    // should be event.xy, but it's not available currently
    var pixel = control.handlers.feature.evt.xy;
    var location = map.getLonLatFromPixel(pixel);
    alert("You clicked near " + location);
});

This assumes (obviously) that you have a reference to the SelectFeature control and your map.

Answer 3

You can use feature.getBounds().getCenterLonLat(). Works for point/line/polygon type features. And you don't have to know what it is, since it works for all.

Answer 4

I was able to get the lat lon of the click event using the following:

Inside the clickFeature handler

var clickedlonlat = 
    Ext.getCmp("coreRef").parent.map.getLonLatFromPixel(
        new OpenLayers.Pixel(
            selectFeatureReference.handlers.feature.evt.layerX,
            selectFeatureReference.handlers.feature.evt.layerY
        ));

where selectFeatureReference is the reference to the SelectFeature that you created.