CODEWITHSUNDEEP
androidiosmobileazure-maps
Rambloid
Rambloid

Reputation: 1

Problem with Azure Maps on Mobile Devices

I am new to Azure maps, switching from Bing Maps in advance of its demise. My simple trial application works correctly on Windows, but map events (I have tried click and contextmenu=right click) do not seem to fire correctly on Samsung Android phone or on iOS (iPhone and iPad). I am using a long press for rightclick, I hear a sound. On Android phone nothing apparently happens, there are no error messages in the Chrome console. On iPad Contextmenu produces an actual Google context menu, which is not the action associated with the Map Event. As I say, all is well on Windows. Thanks in advance for any help, perhaps I am missing something obvious. Rambloid

Tried click and context menu on mobile and expected provided functions to fire. On Android no result, on iOS a Google context menu appeared.

EDIT: Click and context menu on mobile does not with the provided AzureMaps examples either, so it is not just happening in my web page. E.g. https://samples.azuremaps.com/map/add-a-context-menu-to-the-map

Upvotes: 0

Views: 103

Answers (1)

rbrundritt
rbrundritt

Reputation: 17964

This is the first I've heard of this issue, most likely as right click in general isn't used that often in web apps since it would mean disabling the default behavior in the browser that users would usually expect.

Digging into this issue I found that it exists in the underly MapLibre and Mapbox controls that the Azure Maps Web SDK is built on top of.

Testing this out on a Windows touch screen I also found that this doesn't work with touch (context menu only fires for right click of mouse). So it appears that the right click event (context menu) only works with mouse.

That said, it is possible to work around this an add support fairly easily by monitoring the touch events. Here is a simple reusable class I created for this:

class contextMenuTouchSupport {

    constructor(map, maxTouchDragDistance) {
        const self = this;

        self.map = map;
        self.startTime = null;
        self.startPixel = null;

        self.maxTouchDragDistance = maxTouchDragDistance || 10;

        //Monitor and time touch events.
        map.events.add('touchstart', (e) => {
            self.startTime = new Date().getTime();
            self.startPixel = e.pixel;
        });

        map.events.add('touchend', (e) => {
            const endTime = new Date().getTime();

            const dt = endTime - self.startTime;

            //Calculate offset distance. Allow for a little bit of movement of the finger, but not much as then they would be doing something else.
            const dx = self.startPixel[0] - e.pixel[0];
            const dy = self.startPixel[1] - e.pixel[1];

            const distance = Math.sqrt(dx * dx + dy * dy);
                
            //If the touch event lasted more than 500ms, it is likely a context menu event.
            if (dt >= 500 && distance <= self.maxTouchDragDistance) {
                //Clone the event args to make sure we don't modify the original event args used by touch events.
                const args = Object.assign({}, e);

                //Change the type of the event to contextmenu.
                args.type = 'contextmenu';

                //Invoke a context menu event in the map.
                map.events.invoke('contextmenu', args);
            }
        });
    }
}

This class adds touch support for context menu and fires the maps event so that part of your application stays the same. To use this class simple do something like this:

//Wait until the map resources are ready.
map.events.add('ready', function () {

    //Add context menu event in normal way.
    map.events.add('contextmenu', function () {
        alert('context menu event fired');
    });

    //Add the touch support for context menu
    new contextMenuTouchSupport(map);
});

I have a working version of this hosted here that you can try out. http://localhost:57174/Demos/AzureMaps/ContextMenuMobileWorkaround.html

Upvotes: 0

Related Questions