javascript - Angular 10 - Openlayers get map coordinates on (click) - Stack Overflow

I have an OpenLayers map in my Angular map ponent. I need to get the click coordinate of the map on the Angular (click) event. In Javascript is easy, just adding the following code:

map.on('click', function(evt) {
  var coordinate = evt.coordinate;
}

In Angular on the mapponent.html, I added the following code:

<div id="map" (click)="getCoord($event)" class="map"></div>

And created the getCoord() function in my mapponent.ts just like this:

getCoord(event: any){
    var coordinate = this.map.getEventPixel(event);
 }

For the same click event, javascript returns this coordinate, which is the one I need

Array [ -180047.42012573266, 5279667.9723422285 ]

But in angular, I get this one:

Array [ 480, 221 ]

Any idea of how can I get the correct coordinate using Angular, or how can I convert the second into the first one? I'm really stuck in this.

Thanks!

I have an OpenLayers map in my Angular map ponent. I need to get the click coordinate of the map on the Angular (click) event. In Javascript is easy, just adding the following code:

map.on('click', function(evt) {
  var coordinate = evt.coordinate;
}

In Angular on the map.ponent.html, I added the following code:

<div id="map" (click)="getCoord($event)" class="map"></div>

And created the getCoord() function in my map.ponent.ts just like this:

getCoord(event: any){
    var coordinate = this.map.getEventPixel(event);
 }

For the same click event, javascript returns this coordinate, which is the one I need

Array [ -180047.42012573266, 5279667.9723422285 ]

But in angular, I get this one:

Array [ 480, 221 ]

Any idea of how can I get the correct coordinate using Angular, or how can I convert the second into the first one? I'm really stuck in this.

Thanks!

• javascript
• angular
• dictionary
• gis
• openlayers

Share Improve this question Follow edited Aug 24, 2020 at 6:21 Iñigo asked Mar 12, 2019 at 17:37 IñigoIñigo 2,0161010 gold badges3131 silver badges6161 bronze badges 5

• Why don't you add the click handler on your ponent side, on the actual map instance (and not the dom element)? – David Commented Mar 12, 2019 at 17:42
• @David Thanks, but I can't find the way for doing that. Does Angular have a click handler on the ponent side? – Iñigo Commented Mar 12, 2019 at 17:53
• How you do instantiate your map? After instantiating it, you can get an instance of the ol map. Then just use map.on... on that instance – David Commented Mar 12, 2019 at 18:16
• 1 var coordinate = this.map.getEventCoordinate(event); – Mike Commented Mar 12, 2019 at 18:22
• Thanks @mike , it worked perfectly – Iñigo Commented Mar 12, 2019 at 19:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Finally solved with getEventCoordinate():

 getCoord(event: any){
    var coordinate = this.map.getEventCoordinate(event);
 }

for the click event generated in the map.ponent.html:

<div id="map" (click)="getCoord($event)" class="map"></div>