Leaflet: Tapping marker in iOS/Ionic/Cordova/Phonegap does not open popup

[tannerlinsley]

Works fine in a browser, but as soon as it is simulated or sent to a device, it doesn't work.

[mourner]

What Leaflet version do you use? Did you try if it works on Leaflet master? Does it not work on official Leaflet examples as well?

[iH8]

The same kind of error (sounds like it) has just been reported by someone else on Stackoverflow:

I'm using a leaflet map via mapbox.js in a hybrid platform developed with the Ionic framework. Everything works well so far except for clicking on a Marker in iOS. On all the other platforms (Chrome, Webapp on Android, Androidapp) one tap on the marker is enough to fire the click event. On iOS I always need to tap the marker two times before it fires the event. The problem is the same whether I use the app as Webapp in Safari or as a standalone app via Cordova. Any ideas what I can do to get the same behaviour on iOS as on other platforms?

http://stackoverflow.com/questions/28955508/ios-ionic-leaflet

[bastiRe]

Hey, I'm the guy from the Stackoverflow issue. I think my issue is somehow different. It seems like the first tap on the map get's lost while a second tap triggers the click event/popup. I just discovered that it's only the first tap after the map is rerendered that get's lost. After a first interaction with the map one tap is enough to trigger the event.

[asherwebb]

Also having this issue - get an UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0
As if the event to launch the popup is not registering? On iOs, haven't tested on Android

[asherwebb]

Nor are events registering on the default zoom in/out controls. the pinch zoom on the map works however

[evenfrost]

Got the two-tap issue @iH8 mentioned while using custom map controls overlay in web app on iOS. It affects only taps (focus event for an input located on the same overlay fires right away). tap map option does not have any effect. The app utilizes fastclick.

[jonathanpglick]

I'm also having the two-tap issue that @iH8 and @evenfrost are seeing. Anytime something outside of the map is touched, it takes a tap to "focus" on the map again before events start getting through.

[kcivey]

Not sure if it's the same problem, but using Leaflet with jQuery Mobile on iOS I'm having trouble opening a popup from a tap on a CircleMarker. It does eventually open, but it may take a dozen taps to get it to do it. No similar problem on Android.

[Blechfalke]

I have the same problem as @asherwebb .
When i open leaflet examples in safari on iOS, clicking events on markers and the map work.
But when I implement the .js in my cordova app, the events are not fired and i get the following error:
[Error] UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0: The Event's type was not specified by initializing the event before the method was called.

Works fine on Android...

[drFabio]

Same behaviour here, strangely drag works so the capture of a click should be working.
@Blechfalke for me is not working on android which android version and device are you using?

[drFabio]

It seems to me that onClick will never go out.
I am using mousedown and that is working for me on the 1.0-dev i tracked the problem down to:
L.Map.Tap on the _onDown method is setting on line 7736:

    this._holdTimeout = setTimeout(L.bind(function () {
        if (this._isTapValid()) {
            this._fireClick = false;
            this._onUp();
            this._simulateEvent('contextmenu', first);
        }
    }, this), 1000);

That this._fireClick = false is always being called (at least on my tests) before the _onUp.
_onUp check it as :

if (this._fireClick && e && e.changedTouches) {

        var first = e.changedTouches[0],
            el = first.target;

        if (el && el.tagName && el.tagName.toLowerCase() === 'a') {
            L.DomUtil.removeClass(el, 'leaflet-active');
        }

        this._simulateEvent('mouseup', first);

        // simulate click if the touch didn't move too much
        if (this._isTapValid()) {
            this._simulateEvent('click', first);
        }
    }

Since this._fireClick was false the this._simulateEvent('click', first); was never called.
I don't have enough leaflet knowledge to know what prevents it and why or when _fireClick should be false but since mousedown was always fired on the _onDown that was a good enough substitute for the onclick

[Blechfalke]

@drFabio I'm using a HTC One M7 with Android 5.0.3
strangely no events seem to work on iOS, neither the 'click', nor the 'touchend'

[mourner]

So, is this happening only with 0.7.3, or 1.0-dev (master branch) as well?

[drFabio]

I got the same behaviour on 1.0-dev

[evenfrost]

Worth mentioning that, since I'm using Hammer.js in my project, I managed to work around this issue by using its tap event.

[mourner]

Bummer. :( Any further help on this issue appreciated.

[kcivey]

This is the horrible kluge I used to make it possible to open the popups without having to click multiple times:

    map.on('click', function (evt) {
        var latLng = evt.latlng,
            clickedPoint = evt.layerPoint,
            nearestMarker = null,
            minDistance = Infinity,
            markerClickDistance = 12, // pixels
            distance;
        markersLayer.eachLayer(function (circleMarker) {
            distance = latLng.distanceTo(circleMarker.getLatLng());
            if (distance < minDistance) {
                minDistance = distance;
                nearestMarker = circleMarker;
            }
        });
        if (nearestMarker) {
            distance = map.latLngToLayerPoint(nearestMarker.getLatLng()).distanceTo(clickedPoint);
            if (distance <= markerClickDistance) {
                nearestMarker.openPopup();
            }
        }
        return false;
    });

[ovanschie]

Hi guys,

Just wanna let know i had this issue as well on version 0.7.3. Setting options.tap to false fixed it for me.

[AndresERojasI]

Hey, I also tried the tab: false that @ovanschie mentioned and it worked.

[nerdfiles]

+1. I have the opposite issue, where the device click is fine, but the browser requires a solution similar to the solution that creates a contextmenu event and passes the handler to it: https://github.com/Leaflet/Leaflet/issues/3184#issuecomment-117276381

[magnusmanske]

This (touch on markers not working) is still an issue. Tried different Leaflet versions, above hacks, to no avail. Android, multiple versions (including Marshmallow)/devices/browsers. It renders my web tool mostly unusable on mobile. Please fix ASAP!

[kiwicreation]

+1 still not fixed as of commit 99a48a5 (2 days ago). Posted some event logs in #3929 that seems odd to me.

[jimmont]

With Leaflet version 0.7.7 map option dragging: false fixes the problem so possibly an issue somewhere in L.Draggable.
In L.Draggable _onDown L.DomEvent.stopPropagation(e);
Commenting out this stopPropagation fixes the problem, markers are clickable as-expected.
I don't understand the feature well enough to know whether this is helpful.

Oddly the markers work initially with Ionic when setting up the map and details all directly from a controller. As soon as the models are passed from an $http response to populate the map, the markers all appear on the map as expected but aren't clickable anymore (following a clearLayers).

[magnusmanske]

A map with {dragging:false} on 0.7.7 does not fix the issue for me. Android 6.0, Chrome.

[kiwicreation]

Solved my problem in disabling Framework7 _feature_ that are messing up the events. More info.

[IvanSanchez]

Closing in favour of @wikicreation's workaround.

[itamair]

on my ionic project this helped / fixed me: https://github.com/driftyco/ionic/issues/4506#issuecomment-151654171

[jachstet-sea]

I also had this problem and solved it by adding the attribute data-tap-disabled="true" to the element containing the map's div