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

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

map.on('click', function(evt){
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
});

This is how I figured it out in v3.8.2 in order to get coordinates like the following:
[-1.1645507812500016, 53.2257684357902]
when I click around UK.

Answer 3

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 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.

Answer 5

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 6

In case anyone stumbles across this old question like I did, in the latest release of OpenLayers at this time (3.20.0) you can get the clicked position using e.mapBrowserEvent.coordinate where e is the Select event.

Answer 7

I wanted to be able to copy the coordinates with no extra characters using OL6, but lat and lng are available as needed.

  import { transform } from 'ol/proj';
  map.on('click', function(evt){
      var lonlat = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
      var lon = lonlat[0];
      var lat = lonlat[1];
      alert("You clicked near lat lon: "+ lon.toFixed(6) + "  " + lat.toFixed(6));
    });

This is not original to me, I just put the right pieces together.