Leaflet: map.tap undefined in Chrome mobile on Android

[033MaX]

I'm currently implementing Leaflet on our CMS and just stumbled upon something strange. I was working on iOS ( iPad an iPhone ) and did not noticed any issue.

I'm using Leaflet.Sleep. This plugin uses the property of the map instance "tap" to switch between mobile and desktop mode.

When I started to test the code on Android, I noticed that the plugin was not working properly. After a few tests, I noticed on Chrome that the property map.tap is undefined.

Steps to reproduce

• Select any android plateform with Chrome browser
• Open https://plnkr.co/edit/wBPTCWAvyh43J1zoDdzG?p=preview
  
  
  
  • If the map is properly initialized you should see the text "click to wake" and you won't be able to drag the map before tapping on it.
  
  
  • If the map is not properly initialized you should see the text "click or hover to wake" and you will be able to drag the map before tapping on it.
  
  

Expected behavior
The property map.tap has too be defined so that the map behave like any other mobile device, and by extension any plugin using map.tap to work correctly.

Current behavior
The property map.tap is undefined. A plugin like LeafletSleep is not initialized properly on a mobile device using Chrome.

Expected behavior ( Environment )
The example in "Steps to reproduce" should work fine with those below.

• Leaflet : 1.3.4 and 1.4
• Android : 5.1.1, 6, 6.0.1, 8, 8.1.0, iOS : 12.1.2, MacOS 10.13.6 High Sierra
• Firefox Mobile for Android, Safari (for iOS and MacOS)

Current behavior ( Environment )
The example in "Steps to reproduce" should be bugged with those below.

• Leaflet : 1.3.4 and 1.4
• Android : 5.1.1, 6, 6.0.1, 8, 8.1.0
• Chrome : 71.0.3778.99

Don't hesitate to ask for more informations if you need.

[IvanSanchez]

When I started to test the code on Android, I noticed that the plugin was not working properly.

Then you should submit a bug report to Leaflet.Sleep, not Leaflet itself.

After a few tests, I noticed on Chrome that the property map.tap is undefined.

And how did you do that? The plunkr you linked doesn't have any explicit checks for this._map.tap === undefined nor anything like console.log(this._map.tap).If the .tap property really becomes undefined, then please provide a minimal example reproducing that.

[033MaX]

Leaflet.Sleep was just the "tool" that allowed me to realize that the map initialization was not consistent on all devices. I did all the tests before opening an issue with and without Leaflet.Sleep.

Indeed, I did all the debugging through the console, and did not include it in the example. Here is a detailed debugging including :

• a console debug right after the map initialization + an alert of the map.tap.enabled state on mobile devices
• a console debug with a 2 sec delay + an alert of the map.tap.enabled state on mobile devices

Since it seems that Leaflet.Sleep bothers you, this example is using only using leaflet.

https://plnkr.co/edit/fUJlGeIHpkLMaljQwR1n?p=preview

You can confirm with this example that Safari and Firefox have map.tab defined and Chrome has not.

The fact is, I'm not even sure what is the good behavior since there is not a lot of documentation about how to handle mobile devices.

But I would be glad to know or understand why this is happening.

[cherniavskii]

I guess Chrome doesn't need tap hacks, looks more like a feature, not a bug.
See:

https://github.com/Leaflet/Leaflet/blob/9fda888df2791ca0df6f182a9d91d393ee49034c/src/map/handler/Map.Tap.js#L134-L136

[IvanSanchez]

This is actually behaviour as intended, see https://github.com/Leaflet/Leaflet/blob/59a2d7504adf96b6469b2fc7d70ebf673747e6e8/src/map/handler/Map.Tap.js#L134

The Tap handler is only needed for browsers which implement touch events but do not implement pointer events. Chromium/Chrome does not need that functionality. Enabling the Tap handler in those browsers results in problems. See #1694, https://github.com/Leaflet/Leaflet/commit/28ba41eceddf756af780182176b88ee3e19a9907, #2037, #2066.

If the problem is that Leaflet.Sleep should use L.Browser.touch instead of this._map.tap then, once again, that's Leaflet.Sleep's problem.

I'm not even sure what is the good behavior since there is not a lot of documentation

You're welcome to submit pull requests amending the documentation (e.g. pointing out that the Tap handler is instantiated only on browsers which need it).

Closing because behaviour as intended.

[033MaX]

I did see that while checking the code, but I haven't been able to find usefull informations as "why" in the different issues on the repository.

Agreed, now it is an issue I'm gonna fix in Leaflet.Sleep code but also on my implementations since I was using it.

Thank your for the detailed feedback Ivan. (and also cherniavskii)

I'm gonna see what I can do to update the documentation. Since I'm not a native english speaker, I'm afraid that what I will redact could be misinterpreted or not clear enough maybe ?

[IvanSanchez]

Since I'm not a native english speaker, I'm afraid that what I will redact could be misinterpreted or not clear enough maybe ?

Don't worry about that. people can always comments or amend pull requests.