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'); 

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'); 

• javascript
• mapbox
• mapbox-gl-js

Share Improve this question Follow asked Jul 2, 2018 at 9:26 David David 83544 gold badges1717 silver badges5454 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/dpbx96of/ ]

You can do this by converting the icon to a .cur file; cursor 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 }