add mobile gesture handling for pitch

[incanus]

We need gesture support on mobile web to allow the map to be pitched. The way this works gesturally on native mobile is two fingers swiped up or down, both in parallel with each other and approximately the same y-value.

Without this, there isn't a way to pitch on mobile without an external control button or similar that toggles between pitch values a là View elevation profile in https://www.mapbox.com/blog/dc-bikeshare-revisited/.

Related: #2449

[1ec5]

This is a special case of #2618. As far as I can tell, gesture event support exists in mobile browsers and Internet Explorer, Edge, and Safari on the desktop. Blink and Gecko appear to lack gesture event support, but given the importance of mobile Web browsing, I don’t think that should matter.

[ansarikhurshid786]

Any update or work around?

[bFlood]

bump - Any update or work around?

[bFlood]

here's some quick and dirty code just using simple map events, not perfect but it gets the job done until something similar is added to the touch_zoom_rotate handler

demo here: http://bit.ly/2SY7p2S

this.map.on('touchstart', function(data) {
   if (data.points.length == 2) {
      var diff = Math.abs(data.points[0].y - data.points[1].y);
      if (diff <= 50) {
         data.originalEvent.preventDefault();   //prevent browser refresh on pull down
         self.map.touchZoomRotate.disable();    //disable native touch controls
         self.map.dragPan.disable();
         self.dpPoint = data.point;
         self.dpPitch = self.map.getPitch();
      }
   }
});

this.map.on('touchmove', function(data) {
   if (self.dpPoint) {
      data.preventDefault(); 
      data.originalEvent.preventDefault();
      var diff = (self.dpPoint.y - data.point.y) * 0.5;
      self.map.setPitch(self.dpPitch + diff);
   }
});

this.map.on('touchend', function(data) {
    if (self.dpPoint){
      self.map.touchZoomRotate.enable();
      self.map.dragPan.enable();
   }
   self.dpPoint = null;
});

this.map.on('touchcancel', function(data) {   
   if (self.dpPoint){
      self.map.touchZoomRotate.enable();
      self.map.dragPan.enable();
   }
   self.dpPoint = null;
}); 

[ansarikhurshid786]

@bFlood Good job. it's working as expected.

[cs09g]

beyond @bFlood 's solution would be checking distance between two points instead y-distance.
@bFlood 's solution disables rotation when two fingers start rotating from horizontal positions.

...
var diff = Math.abs(data.points[0].y - data.points[1].y);
if (diff <= 50) {
...

to

...
const diffY = data.points[0].y - data.points[1].y;
const diffX = data.points[0].x - data.points[1].x;
const distance = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
if (distance <= 120) {
...

[fishead]

@cs09g Good job. How about remove the alert(distance); ?

const distance = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2)); alert(distance);