8

I'm new to @asymmetrik/ngx-leaflet and Angular in general, so this is maybe just a newbie-issue...

I have an Angular.io (v5) project using the @asymmetrik/ngx-leaflet-tutorial-ngcli

Now I would like to get the coordinates of the point I clicked on the map. According to Issue #51 get coordinates on click?, I added this:

map.on('click', () => { console.log(e.latlng); });

to:

onMapReady(map: Map) {
    map.fitBounds(this.route.getBounds(), {
        padding: point(24, 24),
        maxZoom: 12,
        animate: true
    });
    map.on('click', () => { console.log(e.latlng); });
}

that gives me a runtime error: Cannot find name 'e'.

Which kind of makes sense to me. So, I changed the code to:

map.on('click', (e) => { console.log(e.latlng); });

But this gives me an error too: Property 'latlng' does not exist on type 'LeafletEvent'

When I just put e to the console console.log(e) I can see the latlng-Property exists... Why can't I access the coordinates with e.latlng?

My project is using:

"@angular/cli": "1.4.7",
"@asymmetrik/ngx-leaflet": "^2.5.1",
"@types/leaflet": "^1.2.0",
"leaflet": "^1.2.0",

reblace
  • 4,115
  • 16
  • 16
CaptainInler
  • 157
  • 1
  • 9
  • Can you try to get e.latlng.lat and e.latlng.lng? – Pterrat Feb 12 '18 at 11:27
  • @Pterrat: Yes. Then this Error pops up: `Property 'latlng' does not exist on type 'LeafletEvent'` – CaptainInler Feb 12 '18 at 11:47
  • Is that a compiler error or a runtime error? In other words, do you see the error in the console or the browser? – reblace Feb 12 '18 at 14:22
  • @reblace It's a compiler error. I see it in the console e.g. when I use `ng build` – CaptainInler Feb 12 '18 at 15:15
  • @CaptainInler That suggests that the issue is that the inferred type of ```e``` is the ```LeafletEvent```, which doesn't have the ```latlng``` property. So, the compiler is complaining. At runtime, the property is there because the concrete class is ```LeafletMouseEvent```, which does have ```latlng```. Like the two current answers suggest, you should try type checking and casting the event to ```LeafletMouseEvent``` and it should work. You can also cast like this: ```(e as LeafletMouseEvent).latlng``` – reblace Feb 12 '18 at 19:40

3 Answers3

8

Try to "cast" it as a LeafletMouseEvent:

map.on('click', <LeafletMouseEvent>(e) => { console.log(e.latlng) });
ghybs
  • 47,565
  • 6
  • 74
  • 99
  • Casting works. But I had to change your code a bit to: `map.on('click', (e) => { console.log(e.latlng); });` – CaptainInler Feb 12 '18 at 15:45
  • Thank you for your feedback! Please do not forget to mark the answer that helped you solve your issue as _accepted_. This way people know that your problem is fixed. Once you have enough _reputation_, you will also be able to _upvote_. – ghybs Feb 14 '18 at 00:38
5

The compiler is inferring that the event type is LeafletEvent, which doesn't have the latlng property. That's why you're getting this error.

The Leaflet docs indicate that this event is actually of type LeafletMouseEvent, which extends LeafletEvent. So, you can cast the event to gain access to the properties of LeafletMouseEvent (as demonstrated below:

map.on('click', (<LeafletMouseEvent>e) => {
    console.log(e.latlng);
});
reblace
  • 4,115
  • 16
  • 16
Pterrat
  • 1,682
  • 11
  • 18
  • 1
    Your Code works, when I change it to: `map.on('click', (e) => { console.log(e.latlng.lat); console.log(e.latlng.lng); });` – CaptainInler Feb 12 '18 at 15:47
  • Do you mean: `map.on('click', (e) => { console.log(e.type); });`? This returns: `click` – CaptainInler Feb 12 '18 at 15:49
  • Ok thank you, could you open an issue on github about this? It's not normal that e.type is click and e is a LeafletMouse object – Pterrat Feb 12 '18 at 15:57
0

To have the latlng property, use parameter type LeafletMouseEvent instead of LeafletEvent.

ahuemmer
  • 1,653
  • 9
  • 22
  • 29
Shafiq Hussain
  • 1