Is that possible that panzoom can be moved and zoomed with two fingers at the same time?

[HelenCSWS]

What I am trying to do is clone the behavoir on this page:

https://www2.hm.com/en_ca/customer-service/shopping-at-hm/store-locator

Since I need to disabled the panzoom so I can let me page scroll vertically by one finger.

I need to let user are able to use two fingers move the elements too.

I know this is kind of relate to zoom too.

If you can fix that, that will be very helpfull!

Thank you!

[HelenCSWS]

Please try the demo link on a touch screen.

[HelenCSWS]

I am able to implement 2 fingers move and zoom together by twicking the code in below:

 function handleTouchMove(e) {
                if (e.touches.length === 1) {
                    //Disabled the move by 1 finger

                    //e.stopPropagation();
                    //var touch = e.touches[0];

                    //var offset = getOffsetXY(touch);
                    //var point = transformToScreen(offset.x, offset.y);

                    //var dx = point.x - mouseX;
                    //var dy = point.y - mouseY;

                    //if (dx !== 0 && dy !== 0) {
                    //    triggerPanStart();
                    //}
                    //mouseX = point.x;
                    //mouseY = point.y;
                    //console.log(mouseX);
                    //  internalMoveBy(dx, dy);
                } else if (e.touches.length === 2) {
                    multiTouch = true;
                    //it's two finger touch, we need to move first; and keep the mouseX/Y for move;
                    var touch = e.touches[0];

                    var offset = getOffsetXY(touch);
                    var point = transformToScreen(offset.x, offset.y);

                    var dx = point.x - mouseX;
                    var dy = point.y - mouseY;

                    if (dx !== 0 && dy !== 0) {
                        triggerPanStart();
                    }
                    mouseX = point.x;
                    mouseY = point.y;

                    internalMoveBy(dx, dy);
                    //move code up

                    // it's a zoom, let's find direction
                    //Then let's start to move, redefine the mouseX  to mouseXZoom and Y Zoom to caclulate the zoom, 
                    
                    var t1 = e.touches[0];
                    var t2 = e.touches[1];
                    var currentPinchLength = getPinchZoomLength(t1, t2);

                    // since the zoom speed is always based on distance from 1, we need to apply
                    // pinch speed only on that distance from 1:
                    var scaleMultiplier =
                        1 + (currentPinchLength / pinchZoomLength - 1) * pinchSpeed;

                    var firstTouchPoint = getOffsetXY(t1);
                    var secondTouchPoint = getOffsetXY(t2);
                    var mouseXZoom = (firstTouchPoint.x + secondTouchPoint.x) / 2;
                    var mouseYZoom = (firstTouchPoint.y + secondTouchPoint.y) / 2;
                    if (transformOrigin) {
                        console.log("ever come to here?");
                        var offset = getTransformOriginOffset();
                        mouseX = offset.x;
                        mouseY = offset.y;
                    }

                    publicZoomTo(mouseXZoom, mouseYZoom, scaleMultiplier);

                    pinchZoomLength = currentPinchLength;
                    e.stopPropagation();
                    e.preventDefault();


                }
            }