[BUG] On the web, MapLibreMap symbol hover cursor should be an arrow, not a hand

[andynewman10]

Platforms

web

Version of flutter maplibre_gl

0.25

Bug Description

On the web, hovering over a symbol (from a symbol layer) should display an arrow cursor, not a hand. Here is a capture on Edge on Windows:

Is there something specific I need to do to make this happen, besides creating a MapillarySymbolLayer? If not, maybe you should use pointer_interceptor internally? I use it and it works quite well.

https://pub.dev/packages/pointer_interceptor

Note: wrapping the whole MapLibreMap widget in a pointer interceptor does not solve the issue.

Steps to Reproduce

See above description.

Expected Results

The hover cursor for symbols should be an arrow (for clicking/selecting).

Actual Results

The hover cursor for symbols is a hand (which is typically only used when moving/panning).

Code Sample

See above description.

[gabbopalma]

Hi @andynewman10, thanks for the detailed report!

We looked into this and found that the cursor: pointer on symbol hover is set by our wrapper's _handleLayerMouseMove function — it applies to all interactive layers (symbol, fill, circle, line), not just symbols.

After checking the official MapLibre GL JS upstream examples, none of them set cursor: pointer on feature hover. Cursor management is left entirely to the application:

• Create a hover effect (fill layer) — no cursor change
• Create a draggable point (circle layer) — uses 'move' on mouseenter, never 'pointer'
• Create a draggable marker — cursor handled internally by Marker, no manual cursor set

Before we fix this, we'd like to confirm the expected behavior with you:

• Should the cursor stay as the default arrow on hover for all interactive layer types (symbol, fill, circle, line)?
• Or only for symbol layers, leaving pointer for fill/circle/line?

The upstream behavior would suggest removing pointer for all layer types, but we want to make sure this doesn't break your use case or others'

[andynewman10]

Hi @gabbopalma and my apologies for this late response.

Hi @andynewman10, thanks for the detailed report!

We looked into this and found that the cursor: pointer on symbol hover is set by our wrapper's _handleLayerMouseMove function — it applies to all interactive layers (symbol, fill, circle, line), not just symbols.

I'm not sure I understand here: so you are - indeed - setting cursor: pointer in your code?

After checking the official MapLibre GL JS upstream examples, none of them set cursor: pointer on feature hover. Cursor management is left entirely to the application:

Yes, offloading the decision to the application developer is a good approach.

• Create a hover effect (fill layer) — no cursor change
• Create a draggable point (circle layer) — uses 'move' on mouseenter, never 'pointer'
• Create a draggable marker — cursor handled internally by Marker, no manual cursor set

Before we fix this, we'd like to confirm the expected behavior with you:

• Should the cursor stay as the default arrow on hover for all interactive layer types (symbol, fill, circle, line)?
• Or only for symbol layers, leaving pointer for fill/circle/line?

The upstream behavior would suggest removing pointer for all layer types, but we want to make sure this doesn't break your use case or others'

I think you should

• not break compatibility with existing code
• provide a way to define the cursor type for symbol hover. Maybe through an additional property?

The end developer needs to have a way, somehow, to define the cursor.