Leaflet - how can I change the grabbing hand cursor?

Question

I've probably overlooked how to change LeftletJS's cursor when on the map. http://leafletjs.com/reference.htm

I've tried setting map_div.style.cursor = 'crosshair'; - this works on other elements, but not on the map div. I assume this is because Leaflet is overriding it in some way.

I want to be able to switch to the "crosshair" cursor with Javascript (and back).

Is this possible?

Update: I don't have jQuery.

Answer 1

You only need to override the Leaflet's cursor styles. Following example overrides the default cursor:

.leaflet-grab {cursor: auto;}

This one changes the cursor when you're dragging the map:

.leaflet-dragging .leaflet-grab {cursor: move;}

Live sample: Change default Leaflet cursors

Answer 2

You can't override because the object doesn't have support:

Solution---after creating your map use either

JQuery

$('.leaflet-container').css('cursor','crosshair');

or

JavaScript

document.getElementById('map').style.cursor = 'crosshair'
document.getElementById('map').style.cursor = '' //(reset)

You can also use this event to change your mouse:

map_div.on('mousedown', function (e) {})