Dash-Leaflet map not updating on callback

Dash Python
2

Path options passed directly to components are considered immutable in React Leaflet, i.e. you can’t modify the color property after the component has been constructed. If you need mutability, you can use the pathOptions property instead. Here is a small example,

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

app = Dash()
app.layout = html.Div(
    [
        dl.Map(
            [
                dl.TileLayer(),
                dl.CircleMarker(
                    center=[56, 10],
                    radius=10,
                    pathOptions={"color": "red"},
                    id="marker",
                ),
            ],
            center=[56, 10],
            zoom=6,
            style={"height": "50vh"},
        ),
        html.Button("Test", id="button"),
    ]
)


@app.callback(
    Output("marker", "pathOptions"),
    Input("button", "n_clicks"),
    prevent_initial_call=True,
)
def set_marker_blue(_):
    return {"color": "blue"}


if __name__ == "__main__":
    app.run()
2 Likes