Mapbox-gl-js: Add a movement threshold for drag panning

[jlc467]

As a user, very easy to trigger drag event when you really meant for a click event. Can listen to dragstart+end and fire click if drag was only a pixel or two, but wondering if there is an option to set drag threshold directly.. if not, should there be?

[bhousel]

I don't know if we need to make it an option, but I do agree that we should add a tolerance into the click events so that drag/rotate do not start until a user moves more than a few pixels, and clicks do fire even if start/end positions are within the threshold.

[musicformellons]

Maybe related. My experience is that in a mobile screen it happens quite often that I unintentionally apparently swipe the map where I meant just to drag it a little with huge leap to 'unknown territory'. I would also like to have a more controlled/ modest dragging somehow. Would it be possible to have a couple of 'drag tweak settings'?

[yatiac]

This is an issue for us as well.
We are coming from leaflet and with leaflet we had a parameter on the drag event called 'distance' and with that you were able to define a threshold for that.

On MapboxGL you will need to calculate this by hand by doing something like this:

self.map.on('dragend', function(e) {
            var startPos = e.target.dragPan._startPos;
            var endPos = e.target.dragPan._pos;
            var distance = self._getDistance(startPos,endPos);
             if (distance < 20) { return; } // this is a threshold to avoid firing events with small (accidental) moves 
             // any other code you need
         });

Map.prototype._getDistance = function(p1,p2){
    return Math.sqrt(Math.pow(Math.abs(p2.y-p1.y),2)+Math.pow(Math.abs(p2.x-p1.x),2));
};

It would be good to have a distance as a property (as seen here).

[mollymerp]

hi @yatiac! thanks for submitting your suggestion. while this is not a high priority for our development team right now, we would happily consider a pull request implementing this option.

[yatiac]

@mollymerp thank you for your response, my team will work on the PR.

For now we found another solution that seems simpler:

self.map.on('dragend', function(e) {          
            var distance = e.target.dragPan._startPos.dist(e.target.dragPan._pos)
             if (distance < 20) { return; } // this is a threshold to avoid firing events with small (accidental) moves 
             // any other code you need
      });

This can be easily implemented in MapboxGL but we don't have the time right now, if someone else is available, you can take a look at this and implement it in here.

[jlc467]

@yatiac Thanks! Tested your snippet above in a jsbin and it resolved my original issue.

[lucaswoj]

Re-opening to track the task of integrating this enhancement into GL JS core 😄

[jfirebaugh]

I think we should leave this as something that is implemented downstream of Mapbox GL JS. Most operating system's have built in tolerance for mouse events, and I don't think Mapbox GL JS should override that by default.

[hyperknot]

@jfirebaugh this is a different kind of tolerance than what you are referring to, this issue is not filtered by operating systems.

The problem is that when the user clicks on interactive features usually it's not a pixel precise click but a <4px drag, especially when using a mouse. Leaflet had this implemented in core and I agree that this would be nice to have in a polished/tested form in Mapbox GL JS core.

[msbarry]

I'm using mapbox-gl for a very click-heavy application and this issue was starting to bother me. Submitted a pull request that attempts to fix this. Let me know you think.

[hyperknot]

@msbarry this is so nice, thanks for making it into a PR!