emilhe / dash-leaflet

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dl.Map using zoom leads to Warning

KS-HTK opened this issue · comments

Setting the Zoom property of dl.Map leads to a Warning on the js Console.
Warning: Cannot update a component (`Connect(UnconnectedAppContainer)`) while rendering a different component (`M`).

This code leads to the Warning:

import dash_leaflet as dl
from dash import Dash

app = Dash()
app.layout = dl.Map(
        id="map",
        children=[
            dl.TileLayer(),
        ],
        zoom=12,
        center=[59, 10],
        style={'height': '90vh'}
    )

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

This code uses a "hack" to circumvent the warning untill interaction occurs:
Since id is most likely never changed it can be used to trigger a clientside callback only on initial load.

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

app = Dash()
app.layout = dl.Map(
        id="map",
        children=[
            dl.TileLayer(),
        ],
        style={'height': '90vh'}
    )

inputs = Input("map", "id")
outputs = Output("map", "viewport")
app.clientside_callback("(x) => ({center: [59, 10], zoom: 12})", outputs, inputs)

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

This will only avoid the warning on initial load. If the map is then moved or zoomed it will throw the same warning.

I am not quite sure what the exact problem is, but I think the zoom is set prior to the map beeing fully loaded and thus it leads to this Warning. I know its only a Warning and could be Ignored but I think it should at least be know/documented and maybe be addressed at some point.

I've noticed that as well, seemed to go away when you init the viewport in the mapobject. That said, I'm updated the map center and zoom via a callback and the center works, but not the zoom.

I have just written a patch to address this issue. Could you test if it resolves the issue on your side?

https://pypi.org/project/dash-leaflet/1.0.13rc1/

@KS-HTK
@energyinsights-ai