Get @click coordinates on a vl-map

[a-lefe]

Hello, Is it possible to get coordinates of a click on a vl-map component ?

I would need to get longitude and latitude in a function called by a @ click in <vl-map ...>

Thanks

[silvester-pari]

If you trigger a method on click, you receive the entire event as a prop:

<vl-map @click="onMapClick">
[...]

methods: 
  onMapClick(event) {
    console.log(event.coordinate);
    // coordinate is available in same projection as your view
  }
}

Note that you will get the center coordinates in the same projection as your view, so if you are using mercator projection you might need to use toLonLat to convert the result into lon/lat:

import { toLonLat } from 'ol/proj'

[...]
const lonLat = toLonLat(event.coordinate)

See also official OL docs on this.

[ghettovoice]

@a-lefe I can only append that with vuelayers you can also setup data projection globally:

<vl-map data-projection="EPSG:4326" @click="onClick">...</vl-map>

In this case event.coordinate will be already in EPSG:4326 projection.

[a-lefe]

Thank you for your answers. I need to call a function when I click on a vl-geom-point element. I wanted to match the coordinates of the point and the click but it does not work. I don't have exactly the same values...

So, is it possible to call a function at the moment when the pop-up of an element appears? I tried with the "@ click" on the vl-interaction-selectand the vl-overlaywithout success

[ghettovoice]

vl-geom-* components don't have anything to catch click on them. If you need catch generic click inside map viewport - then you need to listen on vl-map. There are all pointer events: click, singleclick, dblclick, pointerdrag, pointermove. All of them have pixel and coordinate fields of the event. Coordinate will be in a view projection or data-projection if defined.

As for vl-interaction-select, it has select, unselect events that is by default fired when you click on a vector feature.

So for example if you using vl-overlay for selected features that is synchronized through vl-interaction-select, you can just listen on select/unselect events on the vl-interaction-select component.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.