Leaflet support for larger click radius with CircleMarker

Question

Does Leaflet support a method for allowing the CircleMarker created to be of, say, radius 5, but allow the radius from the lat/lng of the marker that is sensitive to click events (shows a bound popup) to be, say, 15?

I currently create a second, larger circle with opacity 0 to achieve this, but would like a "cleaner" solution should it exist.

Answer 1

Leaflet doesn't have a click tolerance option like you're looking for. It uses DOM elements for markers, and regular event handling to capture click events.

Your approach of adding a transparent circle or border is a reasonable one, and the one I would likely use if I were in your position. Just keep in mind that at higher zoom levels, 10 extra pixels around a marker is significant, and might confuse users with unexpected behavior if the markers are close or overlapping.

Answer 2

Since Leaflet version 1.3.0, a tolerance may be specified to the Renderer. This property defines "how much to extend click tolerance round a path/object on the map":

var map = L.map('map', {
    renderer: L.canvas({ tolerance: 15 })
});