CODEWITHSUNDEEP
javascriptangularjsleafletangular-leaflet-directive
kardanov
kardanov

Reputation: 675

Tap/click Marker events not working in angular-leaflet-directive on mobile devices



I have problem with click/tap Marker event handling when I try it out on mobile device (Google Nexus 5 + Chrome).
I have map built into my AngularJS app with angular-leaflet-directive. There're some markers on this map. When user click/tap on marker - I want some popup to be opened with extra info.

It works just perfect when I try from my laptop. If I log marker events I see following:

enter image description here

So all the clicks are there, and popup is opened properly.
When I try to debug on my Nexus phone I get no clicks at all. At the same time for some reason double clicks work ok. The log looks like following:

enter image description here

And now the question: what the hell? :) I will really appreciate any advice. I was trying some solutions (i.e. https://github.com/tombatossals/angular-leaflet-directive/issues/743), but they don't seem to work. And I guess the fact that double click is working should most probably mean, that simple click is supposed to work as well without extra tricks for touchend, etc. (please correct me if I'm wrong).

Upvotes: 1

Views: 1157

Answers (1)

kardanov
kardanov

Reputation: 675

So I found the reason, and it was not in Leaflet or angular-leaflet-directive.
I was using Angular Material framework which was hijacking my touches.

Similar problem is described here:
https://github.com/angular/material/issues/1441
And the solution also proposed there is to disable this hijacking:

app = angular.module('MyApp', ['ngMaterial'])
    .config(function( $mdGestureProvider ) {
        $mdGestureProvider.skipClickHijack();
});

I believe this could be useful for some people.

Upvotes: 3

Related Questions