Azure Maps Disabled Drag on Touch

On azure maps I have the examples from : https://learn.microsoft.com/en-us/azure/azure-maps/map-events

Drag is disabled correctly but the page doesn't scroll at all when touch on map Anyone has experienced this at all or have used azure maps before. Using Android Chrome Browser.

Thanks

Solution

UPDATED!

The bellow is my sample on touch and 2 fingers interact with the map disable drag on 1 touch and able scroll. this purpose only for mobile so i am not checking for mobile device 2:

<!DOCTYPE html>
<html>
<head>
    <title>Map Events - Azure Maps Web Control Samples</title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample will highlight the name of the events that are firing as you interact with the map." />
    <meta name="keywords" content="map, gis, API, SDK, events, click, mouse, touch, context menu, wheel, zoomed, panned, dragged, pitched, moved" />
    <meta name="author" content="Microsoft Azure Maps" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=2" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=2"></script>

    <script type='text/javascript'>
        var map, drag;
        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
                }
            });
            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                map.setUserInteraction({dragPanInteraction: false, dblClickZoomInteraction: false});
                map.events.add('touchstart', function (e) {
                    if(e.originalEvent.touches.length === 2) {
                        $('#message').removeClass('messageOverlay');
                        map.setUserInteraction({ dragPanInteraction: true, dblClickZoomInteraction: true });
                    }else {
                        $('#message').addClass('messageOverlay');
                        map.setUserInteraction({dblClickZoomInteraction: false});
                    }
                });
                map.events.add('dragstart', function (e) {
                    if(e.originalEvent.touches.length === 1) {
                        $('#message').addClass('messageOverlay');
                        map.setUserInteraction({dragPanInteraction: false, dblClickZoomInteraction: false});
                    }else {
                        map.setUserInteraction({dragPanInteraction: true, dblClickZoomInteraction: true});
                        $('#message').removeClass('messageOverlay');
                    }
                });
                map.events.add('dragend', function (e) {
                  map.setUserInteraction({dragPanInteraction: false, dblClickZoomInteraction: false});
                });
                map.events.add('touchend', function (e) {
                    $('#message').removeClass('messageOverlay');
                })
            });
        }
    </script>
    <style>
        #message {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            z-index: -1;
            opacity: 0;
            transition: all 0.5s;
            cursor: pointer;
            display: block !important;
            font-size: 23px;
            text-align: center;
            color: #ffffff;
        }
        .messageOverlay {
            transition: all 0.5s;
            background-color: hsla(1, 1%, 1%, 0.5);
            z-index: 1 !important;
            opacity: 1 !important;
        }
    </style>
</head>
<body onload="GetMap()">
<div style="position: relative">
    <div class="" id="message">Use two finger to use the map</div>
    <div id="myMap" style="position:relative;width:100%;min-width:350px;height:400px;"></div>
</div>
<p>Add Lots of new line for scroll</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
I am the end
</body>
</html>

That's it. This is now fully working for me as it should with no glitches