Prevent draggable marker touch event propagation

[MarcL]

mapbox-gl-js version: v1.9.0

Question

I'm using Mapbox in a Facebook Messenger chatbot which renders the map inside an HTML webview. When dragging a draggable marker, the touchmove event also gets propagated to the parent webview. This then moves it up and down. I can't immediately see a way to get the event in the drag handlers so that I could call event. stopPropagation().

Here's an example of the issue:

Is there an accepted method to achieve this? Can I get access to the events in the drag handlers or is there a better way to do this?

Thanks!

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-events

[mourner]

Try this:

map.on('touchmove', (e) => e.originalEvent.stopPropagation());

[MarcL]

Hi @mourner.

Thanks for the reply. That's perfect - thank you. I didn't know about originalEvent so I was attempting to do e.stopPropagation(). I also had to focus the map too as I have an input on the screen.

Thanks, Marc

[MarcL]

Hi @mourner! 👋

Sorry to re-open this issue. I've just got back to working on the Messenger webview and your solution above only solves half of the problem.

It now avoids propagating the touchmove event in the map and that works great. However, when you have a draggable marker, it moves the webview when you move that around as shown in the gif below:

I thought I might be able to stop event propagation on the drag event for a Marker but it doesn't appear to give me the event.originalEvent in the same way as the Map handler does.

Some example code I tried but it doesn't work as originalEvent is undefined:

const marker = new mapboxgl.Marker({
        draggable
    })
    .setLngLat([longitude, latitude])
    .addTo(map);

// Complains that "event.originalEvent" is undefined
marker.on('drag', (event) => event.originalEvent.stopPropagation();

I'm sure it's something obvious again but is there a way to allow dynamic markers but avoid the event propagation to the parent webview again?

Thanks!

[MarcL]

Hi @mourner.

Sorry to tag you again. Have you got any ideas about the above question?

Thanks, Marc

[paul23093]

Hi guys, did you manage to fix the issue above? +1 for me, trying to use mapbox to drag custom polygons in Telegram webapp bot and got the same behaviour.

[paulomesquita-wsn]

I'm also trying to do a stopPropagation on the drag events of a marker without success