AckerApple / agm-overlays

Custom marker overlay for the @agm/core package
MIT License
25 stars 24 forks source link

Clickable elements inside overlay #19

Closed zunamo closed 5 years ago

zunamo commented 5 years ago

Is it possible to make elements inside an overlay clickable? I did not get it to work using the following:

<agm-overlay *ngFor="let loc of locations" [latitude]="loc.lat" [longitude]="loc.lon"> <div class="custom-marker" (click)="openLocation(loc)"></div> <div class="custom-marker2" (click)="addLocation(loc)"></div> </agm-overlay>

If this is not possible, could it be added to this package? Thank you!

AckerApple commented 5 years ago

Does a bear shit in the woods?

Come on........

Try the demo page: https://ackerapple.github.io/agm-overlays/

Of course click works

AckerApple commented 5 years ago

Your github icon looks like a middle finger and your account has no github history.

Check the basics new guy. And get a real profile icon. Then I’ll take you a little more serious

zunamo commented 5 years ago

Hahaha, thanks for the quick response! Great analogy, but still cannot get it to work.

I looked at your example file and do not see any click events on elements nested inside agm-overlay elements. https://github.com/AckerApple/agm-overlays/blob/master/example/src/app.template.ts

I know there is a markerClick event I can use with agm-overlay, but I am trying to add multiple click events inside the agm-overlay (like the example in my first post).

When I do inspect element, I can see that there are 2 divs that contain the overlay elements. They do not have particular names, but one has z-index=104, the other one z-index=106. When I manually hide the one at 106, click events go through.

image

Could you clarify what I need to do to get this to work? Appreciate the help!

AckerApple commented 5 years ago

Alright. I see you did your work and took me serious. I will put forth the effort to review.

Sounds crazy cray but I’ll have you an answer within 36 hours as I’m on the go right now

AckerApple commented 5 years ago

I have updated the demo to included an overlay with a (click) declaration. It is working to expectations.

Find the blue element on the map labeled "resizes" and click it. See if you get the expected results which is a n absolute positioned element with the label "absolute menu". I just tested only on Chrome on Mac.

https://ackerapple.github.io/agm-overlays/

The (click) code can be found here: https://github.com/AckerApple/agm-overlays/blob/master/example/src/app.template.ts#L47

Let me know your results. I love pinball

img_1805 unadjustednonraw_thumb_100d

zunamo commented 5 years ago

Nice pinball machines, haven't seen those around in a while! I think you are right, I switched to a different data set and seems to not have this issue. A bit strange, I have to look into what was happening. Thanks a lot for your effort. Will let you know if I find out what was wrong.

AckerApple commented 5 years ago

I like when issues close!

New friend, you go ahead and contact me for any needs about this or any of my packages or if you play a cool pinball machine.

img_1839