Mapbox GL JS long tap/press

Question

When using Mapbox GL JS in a browser, including using the emulation mode in Chrome, the event contextmenu responds to a long click/tap on the map. However, on a real device this event does not fire when the user taps and holds on the map.

What is the best way to listen for long taps on the map in Mapbox GL JS?

Answer 1

Similar issue is discussed here.

My derived solution looks like this:

    if (Browser.isIos()) {
        init_ios_context_menu();
    } else {
        map.on('contextmenu', (e) => {
            show_context_menu_or_whatever(e);
        });
    } // end if

    function init_ios_context_menu() {
        let iosTimeout = null;
        let clearIosTimeout = () => { clearTimeout(iosTimeout); };

        map.on('touchstart', (e) => {
            if (e.originalEvent.touches.length > 1) {
                return;
            }
            iosTimeout = setTimeout(() => {
                show_context_menu_or_whatever(e);
            }, 500);
        });
        map.on('touchend', clearIosTimeout);
        map.on('touchcancel', clearIosTimeout);
        map.on('touchmove', clearIosTimeout);
        map.on('pointerdrag', clearIosTimeout);
        map.on('pointermove', clearIosTimeout);
        map.on('moveend', clearIosTimeout);
        map.on('gesturestart', clearIosTimeout);
        map.on('gesturechange', clearIosTimeout);
        map.on('gestureend', clearIosTimeout);
    };