Map style not updating - Githubissues

I'm trying to change map style prop by callback:

import dash
from dash import html
from dash.dependencies import Input, Output, State
import dash_leaflet as dl

app = dash.Dash()

app.layout = html.Div([
    dl.Map(dl.TileLayer(), id='map', style={'width': '100%', 'height': '66vh'}, center=[56, 10], zoom=4),
    html.Button('Change Height', id='button')
])

@app.callback(
    Output('map', 'style'),
    Input('button', 'n_clicks'),
    State('map', 'style')
)
def update_map_style(n_clicks, current_style):
    if n_clicks is None:
        raise dash.exceptions.PreventUpdate

    print(f'Current style: {current_style}')
    # Toggle between heights
    if current_style['height'] == '66vh':
        new_style = {'width': '100%', 'height': '50vh'}
    else:
        new_style = {'width': '100%', 'height': '66vh'}

    return new_style

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

When clicking the button multiple times, the following output is observed in the terminal, but no change to the height occurs on the page. Hence, the property is being updated but is not being reflected on the webpage:

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app
 * Debug mode: on
Current style: {'width': '100%', 'height': '66vh'}
Current style: {'width': '100%', 'height': '50vh'}
Current style: {'width': '100%', 'height': '66vh'}
Current style: {'width': '100%', 'height': '50vh'}

Any assistance would be greatly appreciated 😄

emilhe / dash-leaflet

Map style not updating #239