Ionic Side Menu with Leaflet maps directive

Hi all

I am building a side menu app. I am also using the angular-leaflet-directive to create a map in the main part of the side menu and then I just have a few bits of content in the side menu itself.

When I interact with the map controls before opening the side menu everything works as it should, but the problem comes in after the side menu has been opened and closes. All of the map controls stop working.

Would just like to know what I’m doing wrong or if it’s a bug. I have found a codepen example from some one else that shows the same problems.

Barry Reid

The codepen seems to be working fine in chrome (37.0.2062.124 m) on desktop (Windows 8.1)

So on the codepen try open and close the pins popup bubble, then click and drag right on the welcome bar to open the side menu, then drag left on the welcome bar to close the side menu. Now try open and close the pins popup bubble.

I think it may be this bug :

but I’m not sure…

Which ionic version are you using?

The latest : 1.0.0-beta.13

This could also be the same problem for ref : Leaflet map and ion-nav-view

did you try adding data-tap-disabled=“true” to the leaflet directive?

when i did it worked.

Seems to work in the codepen as well :smile:

Yip, that fixed it! Thanks so much guys!

By the way, what does that data-tap-disabled=“true” do?

i dont know :smiley:
just saw in the issue you posted that they used it to resolved the problem.

but what i saw it recovers touch events i think

I should have known this… Just didn’t notice you weren’t using it :frowning:

Basically, leaflet maps captures the click/touch/tap/etc events itself, so Ionic doesn’t need to handle this for those components! the dtaa-tap-disabled setting disables tap handling by ionic, so leaflet can do it by itself. Obviously, the tap handling is only disabled on the element is applied on (and it’s children)