Click on a marker of leafletmap not working

ionic-v1
1

But now I discover a new problem. A marker on a leaflet map should show a popoup. This works with ionic.v1.0.0.beta.1 but not on beta.2, beta.3, beta.4 and beta.5

Did I miss something…

Now this is weard. In the browser the popups are shown if I use on the keyboard and click the marker.
Maybe this is a clue???

1 Like
2

Can you post a codepen? Also do you have data-tab-disable="true" enabled

3

HI, where should I put this data-tab-disable=“true” ???

I just discover that if I call the map the click on the marker works. But after enabling 1 overlay on the map the click doesn’t work anymore

Thanks for helping and the quick replies so far…

4

You can do this

<div data-tap-disable="true">
  <leafletmap></leafletmap>
</div>

Whats happening is that ionic is using it’s own tap/click implementation to overcome the 300ms delay in webkit, but it’s prevent native click/tap events. The data-tap-disable should will disable our tap system for all the contents in that div, so you leaflet map

2 Likes
5

I am having the same issue but putting the data-tap-disable does not help: after putting it, my map stops loading any tiles when I zoom or move the map…

Do you have any idea?

Thanks,
Luís

6

Are you putting it on the map itself? Or on a div that wraps the leaflet marker? Can you provide a demo?

7

This has solved the Issue. I am not using the leafletmap directive, just using the .js files from leaflet & rendering the tiles.

8

Yep, I have same problem after update to beta8. <div data-tap-disable="true"> not working.

1 Like
9

Hmm seems to work for me.

10

@mhartington Your codepen is missing other ionic elements that seem to cause the problem:

I added some form elements. Now try the following

  1. Load the codepen.
  2. Play with only the map (don’t touch the buttons yet). It works.
  3. Click one of the buttons or the text box.
  4. Click on the map zoom controls.

Expected result: zoom works fine, and clicking the marker changes the title
Actual result: zoom does not work and clicking the marker does not trigger the event

11

Actually it does work if you use the correct syntax.

##data-tap-disabled

with a d at the end, in the docs here: http://ionicframework.com/docs/api/page/tap/

You can also put the attribute directly in your leaflet directive tag. See this new codepen: http://codepen.io/anon/pen/kango

1 Like
12

You can either do <leaflet data-tap-disabled="true"></leaflet> OR <div data-tap-disabled="true" style="height: 100%"><leaflet></leaflet></div> (Notice the ‘height’ in the 2nd option)

13

I also fixed the problem with this.

14

guys, after 2 days of all efforts I have, finally I could finish the task with the help from you guys. Full respect! Really appreciate you contribution!

div data-tap-disabled=“true”