InvalidateSize dash leaflet

Dash Python
1

Hello every body,
I want to display a map in a modal. But the map is only partially displayed.
On the different threads, I see that I have to use the InvalidateSize function to load the map once the modal is opened. But I can’t do it.

I use this code in python file (This code is in a calback) :

ns = Namespace('dashExtensions', 'dashExtensionssub')
maps = dl.GeoJSON(data=geobuf, format="geobuf",
                     zoomToBounds=True,
                     options=dict(pointToLayer=ns('invalid_size')),
                    )

and my javascript file is :

   window.dashExtensions = Object.assign({}, window.dashExtensions, {
   dashExtensionssub: {
       invalid_size: function(feature, latlng) {
           var map = L.map('map')
           {return map.invalidateSize();}
       },
   },
});

What am I doing wrong ? Have you got an idea please ?

Erwan

2

I found a solution not using javascript, which is to output to the dash leaflet Map component’s invalidateSize property in a serverside callback (see dash leaflet’s MapContainer docs page for a specification of the property).

Suppose you have a dash_leaflet.Map with id my_map, and you want to trigger invalidateSize when a dbc.Button with id my_button is clicked. Then the following will do the trick:

@callback(
    Output(
        component_id="my_map",
        component_property="invalidateSize",
    ),
    Input(
        component_id="my_button",
        component_property="n_clicks",
    ),
    # We need to ensure that invalidateSize is changed,
    # so also read in its current value as a State.
    State(
        component_id="my_map",
        component_property="invalidateSize",
    ),
)
def invalidate_map_size(n_clicks:int, invalidate_size:int) -> int:
    return 1 if invalidate_size == 0 else 0

If it’s essential that this is run clientside, maybe there’s something there you can adapt into javascript?