[Bug] With `cooperativeGestures` enabled, the help messages are sometimes misleading

[tomhicks]

Description

We want to use cooperative gestures for iframe embeds, but the message shown assumes mobile/desktop based on the width of the embed.

For instance, you embed an iframe of width 375 into a webpage on desktop, and when you try to scroll over the iframe, the message says you need to use 2 fingers.

Expected Behavior

Instead, the message should either depend on the attempted interaction, or should be user-specified.

An example of depending on the interaction:

• if it's a wheel event, show a desktop message
• if it's a touch event, say you need to use more fingers

For user-specified, it could be a prop like: cooperativeGestures: boolean | "desktop" | "mobile"

or:

cooperativeGestures: boolean, cooperativeGestureMessageType: "auto" | "desktop" | "mobile"

Another alternative (and generally helpful) would be to raise an event for it, like: map.on("gestureprevented") or onGesturePrevented as a prop.

This way, we could show our own UI.

(I'm happy to create a PR for some of these if it's believed to be a good idea)

Steps to Reproduce

1. Create a map with cooperativeGestures enabled, using a desktop browser.
2. Make the window narrow, like 370px wide
3. Try to zoom the map by scrolling
4. The message speaks to you as though you're on a mobile phone

Environment

• Framework version: 7.0.24
• Map library: "maplibre-gl": "^3.0.0",
• Browser: any
• OS: any

Logs

No response

[Pessimistress]

cooperativeGestures is not implemented by this library. You should propose this change to maplibre instead.

[tomhicks]

@Pessimistress Thank you for this!