Mapbox GL JS 自定义光标

Question

Is there a simple way to have a custom cursor for a map? The following code I have works very nicely, it's simple too but it's just a predefined option :

map.getCanvas().style.cursor = 'default';

Is it possible to have something like this? :

map.getCanvas().style.cursor = url('custom.png'); 

Answer 1

You can change the style of the cursor through the css of the mapboxgl canvas container :

.mapboxgl-canvas-container { cursor: url(/path/to/cursor.png), auto !important }

[ https://jsfiddle.net/dpbx96of/ ]

Answer 2

You can do this by converting the icon to a .cur file; cursor.cc is what I used.

I found that .png will not work, but .cur will; then, stdob--'s solution will work:

.mapboxgl-canvas-container { cursor: url(/path/to/cursor.CUR), auto !important }