Search code examples
javascriptleafletmouse-cursor

Leaflet - how can I change the grabbing hand cursor?


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.


Solution

  • You can't override because the object doesn't have support: enter image description here

    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) {})