Angular leaflet directive click events not working on mobile devices

1
votes

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.

2
javascriptangularjsangularjs-directiveleafletangular-leaflet-directive
Refer this answer for you solution Click here - dharmendra vaishnav

2 Answers

1
votes

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.

0
votes

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>