Leaflet custom controls might be interactive, when the user can use the mouse on them to perform an action, or non-interactive, when they are used only to show information. This should affect the mouse pointer used for elements of the control (and possibly sub-elements of it for partly interactive controls).

What is the correct way to set those pointers for the control container and its sub-elements, if any (e.g. well defined css classes or else)?

2 Answers 2


Building on the answer by IvanSanchez, you can add a class to a layer:

var layer = L.featureGroup([]);
layer.style({'className': 'mask'})

then in CSS

path.leaflet-interactive.mask {cursor: crosshair}

This is done in the Leaflet code by using the cursor CSS property, see https://github.com/Leaflet/Leaflet/blob/9c8590aebc9be74d0a2b71cf9c5e8a996d83b33a/dist/leaflet.css#L193


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.