How to make Leaflet polylines more 'touchable' or tap-friendly? - leaflet

Question

I'm rendering GEOJSON using leaflet, including a variety of linestrings. For whatever reason, I can seldom get the touch events to work. As in, it's very hard to have the fingers actually target the right spot on the screen.
Here's my map:
return (
<Map
style={{
height: '100%',
width: '100%',
margin: '0 auto'
}}
onClick={this.closeAllMapPopups}
ref={(el) => {
this.leafletMap = el;
}}
center={position}
zoom={9}>
<TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}#2x.png?access_token=pk.eyJ1IjoiYawefawelbnMyNCIsImawefbDRtMzcwMDNmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='© Mapbox' />
<GeoJSON data={locations} ref="geojson" style={this.getStyle} onEachFeature={this.onEachFeature}
/>{' '}
</Map>
Here's my onEachFeature:
onEachFeature = (feature, layer) => {
//console.log(layer);
layer.on({
mouseover: (e) => this.MouseOverFeature(e, feature),
click: (e) => this.clickFeature(e, feature),
mouseout: (e) => this.resetHighlight(e, feature),
});
};
The touch events (click = tap) only seem to work when I get lucky. How does one make leaflet polylines more clickable?
Explored the plugin options but most are outdated:
https://github.com/geoloep/Leaflet.ClickTolerance
https://github.com/perliedman/leaflet-touch-helper/

Answer 1

Use the tolerance option of L.Renderer (i.e. use a tolerance option when instantiating a L.Canvas or a L.SVG renderer). The value for that option is given in pixels.
e.g. take the example code in the Leaflet documentation for L.Canvas and include a tolerance:
var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5, tolerance: 20 });
var line = L.polyline( coordinates, { renderer: myRenderer } );