Leaflet map don't work with ionic


I’m developing mobile application using phone gap, angularjs,ionic framework and leafleat for map.
Problem is when I use leafleat map in ionic-view.
Zoom in and zoom out do not work, and click on marker also don’t work.
But, when I refresh page then it work’s.
And again if I move to another page (state) and come back, clicks don’t work.

Please does anyone had this problem, and how can I solve this?


might try this



use it in you ion-content like so

<ion-content data-tap-disabled="true"></ion-content>

you might also take a look at this repo from @Calendee

Hi cyprusglobe,

thanks you a million! :smile:
That help me and solve my problem.

One again, thank you!


I have some problem, but in safari only. All solution about adding data-tap-disabled="true". It work in chrome, but safari still have problem with click event.

codepen example

In this example:

  1. open Sample location page – zoom control work fine.
  2. Try go back and return to location page – zoom works
  3. repeat step 2 4-5 times
  4. zoom control dont work

I try add data-tap-disabled="true" and scroll="false", wrap map to some div.
I test it only in safari and chrome and in chrome all work fine.

how can I solve this? Thanks!