Add support for double tap and drag for zooming

[cdrini]

This has become a very common interaction in mobile devices: Google maps, Apple.

The way it works:

• double tapping zooms in
• double tapping, and dragging upwards on the second tap zooms in proportional to distance from start tap
  • dragging downwards zooms out

It would be great if this was included in the library and easy to add!

[biodiv]

Thanks for bringing attention to this. I tried what you described in Apple maps and it worked as you described.

I will implement support for multiple taps. eg

const tap = new Tap(domElement, {
  taps: 2
});

The latter of what you described is a Tap followed by a Pan. A Tap requires the finger to be lifted from the surface. We could create something like a TapPan gesture, which then also would support tappanleft, tappanright tappanup and tappandown events.

[cdrini]

That seems good to me! I think a tappan would be enough for me, and then I could use the x/y coordinates to determine the amount of zoom. But tappan{left,right,up,down} would also work!

Thank you for the prompt reply!

[biodiv]

Meanwhile, you could try something like the following approach:

var TAP_ACTIVE = false;

function onTap(event){
    TAP_ACTIVE = true;
    setTimeout(function(){
        TAP_ACTIVE = false;
    }, 500);
}

pointerListener.on("tap", onTap);

function onPan(event){
    if (TAP_ACTIVE == true){
        if (event.detail.live.direction == "up") {
            // do something
        }
    }
}

pointerListener.on("pan", onPan);