How do I change the default cursor in leaflet maps?

Set to crosshair:

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

Reset it back:

document.getElementById('map').style.cursor = ''

Edit 5.18.2017: Raw CSS and Javascript via Leaflet Framework (recommended)

I was looking through the source code for the BoxZoom plugin and noticed their approach using Leaflet's built-in DOM mutators and wanted to promote it here...this is certainly the best practice.

Example jsfiddle

Somewhere in your CSS include a class like this..

.leaflet-container.crosshair-cursor-enabled {
    cursor:crosshair;
}

When you want to enable crosshairs, do this in your JS..

// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');

Then, when you want to disable crosshairs, do this in your JS..

L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');

---

Original Answer: Map-level Crosshairs

@scud42 got me on the right path. You can use JQuery to change the Leaflet map cursor like this:

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

Then later, when you want to reset the map cursor, you can do this:

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

---

Edit 1.21.2016: Per-feature Crosshairs

You can also enable crosshairs for individual features supporting the className option, such as a polygon, or feature vertices, etc.

Here's an example of a draggable vertice that will toggle pointer crosshairs (jsfiddle):

var svg_html_default = '<div style="margin:0px;padding:0px;height:8px;width:8px;border-style:solid;border-color:#FFFFFF;border-width:1px;background-color:#424242"</div>';

var default_icon = L.divIcon({
  html: svg_html_default,
  className: 'leaflet-mouse-marker',
  iconAnchor: [5,5],
  iconSize: [8,8]
});

var m = new L.marker([33.9731003, -80.9968865], {
  icon: default_icon,
  draggable: true,
  opacity: 0.7
}).addTo( map );

m.on("mouseover",function(){$('.leaflet-mouse-marker').css('cursor','crosshair');});

m.on("mouseout",function(){$('.leaflet-mouse-marker').css('cursor','');});

Leaflet's styles allow you to change some cursor behavior. Put these in your local CSS to make the change.

/* Change cursor when mousing over clickable layer */
.leaflet-clickable {
  cursor: crosshair !important;
}
/* Change cursor when over entire map */
.leaflet-container {
  cursor: help !important;
}