increase click tolerance in dash-leaflet

Question

I am using dash-leaflet and I want to increase the area around my features in which they become clickable.

As far as I understood, in leaflet this is possible with the canvas renderer and its option "tolerance".

However, I could not find out how to activate the canvas renderer and how to set this option.

cheers

Answer 1

In dash-leaflet==1.0.0 and later, you can pass a renderer argument to the Map object, where you can specify such options. Here is a small example with a (huge) custom tolerance,

from dash import Dash, html, Output, Input
import dash_leaflet as dl

app = Dash()
app.layout = html.Div([
    dl.Map([
        dl.TileLayer(),
        dl.Polyline(positions=[[57, 10], [57, 11], [56, 11]], id="path")
    ], center=[56, 10], zoom=6, style={'height': '50vh'}, renderer=dict(method="canvas", options=dict(tolerance=100))),
    html.Div(id="log")
])


@app.callback(Output("log", "children"), Input("path", "n_clicks"))
def log(n_clicks):
    return f"You clicked the path {n_clicks if n_clicks else 0} times"


if __name__ == '__main__':
    app.run_server()