1

I am using leaflet and angular leaflet directive in ionic for map development, the map is mapbox. In browser, everything works fine, but on iPad emulator, the click events don't work at all, including markers and zoom buttons. But the dbclick to zoom works fine.

I don't know why this issue comes up.

I have tried many ways but they don't work out, I really need advice.

Thank you in advance.

xiangzuomanongerbude
  • 117
  • 1
  • 2
  • 16
  • Refer this answer for you solution [Click here](http://stackoverflow.com/questions/25675208/ionic-angular-leaflet-directive-zoom-in-out-buttons-do-not-work) – dharmendra vaishnav Oct 03 '16 at 10:20

2 Answers2

1

The Leaflet event handlers for touch events sometimes don't play too well with the touch event wrappers offered by ionic and similar platforms.

The usual way to work around the problem is to disable the tap option in the L.Map instance. This way Leaflet will assume "clean" mouse events, and only ionic will apply the touch event hacks.

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45
  • Thanks for answering, I have tried your method but it does not seem to work out, on iPad emulator, click events are not fired. I have hardcoded in the directive to make tap false, did I do the method wrongly? wish you could help me – xiangzuomanongerbude Jul 13 '16 at 02:44
0

The solution is to add the attribute 'data-tap-disabled="true"' in the parent element, so Ionic won't handle these events:

<ion-content data-tap-disabled="true">
    <leaflet height="480px"></leaflet>
</ion-content>
Fernando Ghisi
  • 419
  • 4
  • 8