Question

94

How do I change the default cursor in leaflet maps?

rated 0 times [ 96] [ 2] / answers: 1 / hits: 31848 / 12 Years ago, mon, december 31, 2012, 12:00:00

I am trying to modify the default cursor icon when a certain control button is pressed.
Although I was partially successful by using css on the container div, doing this overrides the move cursor state, which is something I do not want. What I mean with this is that the move icon no longer appears while moving through the map (but not when on markers!).

I'd like to know if there is a non-hacky way through the api to achieve special cursor behaviour without redifining everything.

This is what I tried to do, #map is the container div for the leaflet map.

#map[control=pressed] {

    cursor: url('..custom.png');

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

triston

Add To Favorites

Follow

Total Points: 545

Total Questions: 88

Total Answers: 94

Location: Lebanon

Member since Sun, Aug 2, 2020

4 Years ago

answered 12 Years ago arlethjeanettep · Accepted Answer

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