Allow custom cursors via filename/CSS

[jackplo]

Motivation

Custom pointers on layer interactions. I want to be able to change the cursor to a custom .cur/.svg when hovering over different layers on the map. This will allow users to visually identify that certain symbols on the map may have interactive properties.

Design Alternatives

Allow me to use custom CSS classes to overwrite the cursor on mouseover, mouseenter, and mouseleave events or make map.getCanvas().style.cursor able to take custom cursors.

Design

Either design works and both seem minimally invasive to the current functionality of the mapbox cursors. I don't believe there are any drawbacks, I think this is a pretty intuitive feature that would provide significant enhancement to the UI/UX of mapbox.

Mock-Up

Developers:
This could be easy as one line of code for developers. For example in a 'mouseenter' event, a developer could simply set the cursor to a custom .cur/.svg file. Example:

.on('mouseenter', 'LAYERNAME', (evt: any) => {
     this.map.getCanvas().classList.add('CSS CLASS THAT OVERWRITES THE CURSOR');
OR
     this.map.getCanvas().style.cursor = "PATH TO CUSTOM CURSOR LOCATION";
})

End Users:
This would just look like the existing functionality for cursor events but replace it with a custom cursor.

Concepts

This feature could just be an addition to the current wiki page about mouse/cursor events.
I think the terminology could just be "Custom Cursor."
This feature relates to the current cursor functionality associated with mapbox mouse events.
The concept just introduces a new option customization in an intuitive way.

Implementation

For both C++ & Javascript the design implementation would be as simple as the folllowing:

• Check if assigned string is a valid cursor name or a file
• If it is valid cursor assign to that cursor
• If it is a file, verify its a valid filename
• Verify the file has the proper extension (.svg/.cur)
• Assign to new cursor value

Edgecases:

• File does not exist
• File does not have the proper extension
• File size too large
• Cursor height and width are too big

[AryanMankame]

Hi @stepankuzmin and @jackplo,

I have gone through this repo and came across this issue. I have a query regarding what we are considering to be interactive—specifically, when the cursor should change. Is it when the user hovers over the landmarks, or while zooming in or out? As this repo is not responsible for displaying information about the landmarks, I’d like to clarify this.

Thank you!