Mouseover range/distance - hover

Question

Is there anyway to change default mouseover range? Simple example, I have a map with a bunch o tracks which are 1-2 px wide and are clickable. To click a track and display info you need to click very precisely which can be very annoying. Is there any way to change that tolerance? Just to show what I mean here's my example.
Thanks in advance.
http://members.upcpoczta.pl/w.racek/mapa.html

Answer 1

I'm afraid there is not much you can do about that except for upping the weight on your polylines. It's just the way SVG works, precise. What you also can do, to make selecting a polyline less irritating, is dropping the dasharray. It leads to irregular behaviour on hover because the gaps between the lines don't respond to the mouseover. When hovering you'll think you're on the line but you're not, that can also be very frustrating. See this testcase on Plunker and you'll understand: http://plnkr.co/edit/7WPTWN?p=preview
L.polyline([[0, -180],[0, 180]], {
'dashArray': [10, 50]
})
There is a solution however it's very hacky and performancewise i wouldn't recommend it. For each polyline, add another line, with exactly the same coordinates, make it transparent and set the weight to 10 or more. Hook the mouseovers on the transparent line and use their handlers to change the style of the visible line. Code example:
var visibleLine = L.polyline([[0, -180],[0, 180]], {
'weight': 2,
'opacity': 1,
'dashArray': 3
}).addTo(map);
var transparentLine = L.polyline([[0, -180],[0, 180]], {
'weight': 10,
'opacity': 0
})
.on('mouseover', function (e) {
visibleLine.setStyle({
'color': 'red',
'weight': 4,
'dashArray': 0
});
})
.on('mouseout', function (e) {
visibleLine.setStyle({
color: 'blue',
'weight': 2,
'dashArray': 3
});
})
.addTo(map);
Here's a working example on Plunker: http://plnkr.co/edit/jChoQ0?p=preview