Avoiding Ionic and LeafletJS conflicts

Ionic is a great tool to bootstrap mobile applications easily. It is a framework based on Cordova and AngularJS and it provides some command line tools, mobile-ready directives for common components, and CSS for a basic application look and feel.

We use it together with LeafletJs. Leaflet is a robust OpenStreetMaps based map library, that makes integrating maps in your application a breeze. It is compatible with computer browsers as well as mobile devices.

If you are going to use them you need to know some basics about how mobile touch events are managed. It will spare you some nasty bugs.

Both libraries use dedicated modules to manage mobile touch events. The modules have two tasks - managing “click” events and working around known bugs.

The first usage is managed by code like this. As you can see, a click event is launched even on tap (touchdown) so you can use it for both desktop and mobile purposes. This give a nice compatibility, especially for third party libraries.
It contains some heavy logic to differentiate the click from drags and so on, but it is basically that.

The other is mostly about avoiding a multiclick on Android devices. Sometimes Android launches multiple events instead of one and this can cause your listeners to be called twice. This is managed by comparing the time since last event.

Both libraries implement the logic a bit differently, so they are not always compatible. This can cause bugs, like Leaflet buttons not working etc.

The solution was implemented by Ionic - you can disable its touch events management by adding a special attribute on your map container:

This will completly disable Ionic part of event management and Leaflet will be able to handle all by itself.

Hope this article spares you some headaches!