0

I have a map with a number of markers. When a user clicks on one marker information for that marker is displayed on a side pane. To accomplish that I have added 'click' listeners to the markers and also store marker identifiers more or less as suggested in this SO answer.

Now, on certain modes I don't want the markers to be clickable (but still want them to appear on the screen). It is easy for me to remove all the 'click' listeners. However, when I hover over them with my mouse, the icon does change from the "open palm" to the "pointed hand" confusing the user. Upon investigating I see that the canvas class normally has the leaflet-zoom-animated class, but when I hover over a marker, the leaflet-interactive class gets added. I can change that cursor using, e.g.:

.leaflet-interactive {
    cursor: crosshair !important;
}

... but this has two problems:

  1. it's not something I can toggle on and off depending on the various user interaction modes my application finds itself in
  2. it's still jarring because the cursor does change and, further, I can't change it to the open palm cursor that Leaflet is normally using, since that's a non-default cursor and it's not clear to me how to access it.
Marcus Junius Brutus
  • 26,087
  • 41
  • 189
  • 331

2 Answers2

1

If you can remove the click listener, I suppose that you can also add a css class to your marker. Here is an example http://jsfiddle.net/Mossart/w9830at1/7/ (look at the top marker)

var breakside = [45.571601194035345, -122.65673562884331];
var marker1 = L.marker(breakside).addTo(map);
marker1._icon.classList.add("not-clickable");

CSS:

.not-clickable {
  cursor: grab;
}
Baptiste
  • 1,688
  • 1
  • 15
  • 25
  • I've verified this and it works. Unfortunately, this doesn't help with other `L.circleMarker` objects which don't have an `_icon` property. – Marcus Junius Brutus Mar 11 '20 at 17:00
  • With a circleMarker you can update the option `className` https://leafletjs.com/reference-1.6.0.html#circlemarker-classname – Baptiste Mar 11 '20 at 17:11
  • Unfortunately this doesn't seem to be working. I create normal `L.circleMarker` objects, set the `className` property on them using m.className = 'not-clickable' but the class is not reflected on the `path` DOM elements that correspond to each `L.circleMarker`. I 've tried using both a canvas and a non-canvas renderer. – Marcus Junius Brutus Mar 11 '20 at 18:10
  • ok, so I think I found another method: https://stackoverflow.com/a/60642381/274677 – Marcus Junius Brutus Mar 11 '20 at 18:25
1

This works for L.circleMarker objects on a canvas renderer:

marker.options.interactive = false;

Curiously, it doesn't work on a non-canvas renderer.

Marcus Junius Brutus
  • 26,087
  • 41
  • 189
  • 331