Black Lives Matter. Please consider donating to Black Girls Code today.

Mapbox size not updated when changing display mode

Hi everyone,

I have a map that is controlled by many inputs and that is allowed to be split to compare several features at the same time.

To do so, I create initially 4 maps, one is shown from the beginning while the other are in display mode ‘none’.
Upon clicking a button, the first map is set to display mode ‘none’ while the others are set to ‘inline-block’

Yet, doing so, the map does not display properly as the width is not pass properly from one element to the other.

I tried many things, such as using visibility instead of display but that is not a solution as I need my maps to not use space while invisible.

I also tried to add a hidden div to force the refresh, which was working so far, yet, moving some elements around made this solution fall down, plus, I don’t believe that it is a solution, merely an ugly patch.

I put a minimal example down below to show the problem (as minimal as it can be).

In my full version, which is way more complete that this one, the problem is not appearing on firefox.

Is this a known bug?

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

import flask
import pandas as pd
import time
import os

server = flask.Flask('app')
server.secret_key = os.environ.get('secret_key', 'secret')

app = dash.Dash('app', server=server)

app.scripts.config.serve_locally = False
dcc._js_dist[0]['external_url'] = 'https://cdn.plot.ly/plotly-basic-latest.min.js'

features = [{'label': 'feat1',
             'value': 'feat1'},
            {'label': 'feat2',
             'value': 'feat2'}]
mapbox_access_token = 'pk.eyJ1IjoiamFja2x1byIsImEiOiJjajNlcnh' + \
  '3MzEwMHZtMzNueGw3NWw5ZXF5In0.fk8k06T96' + \
  'Ml9CLGgKmk81w'

app.layout = html.Div([
    dcc.Dropdown(
        id='feature',
        options=features,
        value=features[0]['value'],),

    html.Div([
        html.Div([
            html.Div([
                dcc.Graph(
                    id='map_general',
                    config={'displaylogo': False,
                            'displayModeBar': True,
                            'modeBarButtonsToRemove': ['lasso2d',
                                                       'select2d',
                                                       'toggleHover',
                                                       'toImage',
                                                       'sendDataToCloud']},
                    style={'height': '450px'},
                ),],
                className='firstMap',
            ),],
            style={'position': 'relative'}
        ),],
        style={'width': '100%',
               'display': 'inline-block',
               'height': '450px',},
        id="unified_content",
    ),

    html.Div([
        html.Div([
            html.Div([
                dcc.Graph(
                    id='map_grid1',
                    config={'displaylogo': False,
                            'displayModeBar': False,
                            'staticPlot': True},
                    style={'width': '33.333%',
                           'display': 'inline-block',
                           'height': '450px'}
                ),

                dcc.Graph(
                    id='map_grid2',
                    config={'displaylogo': False,
                            'displayModeBar': False,
                            'staticPlot': True},
                    style={'width': '33.333%',
                           'display': 'inline-block',
                           'height': '450px'}
                ),

                dcc.Graph(
                    id='map_grid3',
                    config={'displaylogo': False,
                            'displayModeBar': True,
                            'modeBarButtonsToRemove': ['toggleHover',
                                                       'select2d',
                                                       'toImage',
                                                       'sendDataToCloud']},
                    style={'width': '33.333%',
                           'display': 'inline-block',
                           'height': '450px'}
                ),],
                style={'height': '450px',
                       'width': '100%'},
                id='SplitMap',
            ),],
            style={'position': 'relative',
                   'height': '450px',}
        ),],
        style={'display': 'none',
               'width': '100%',
               'height': '450px',},
        id="split_content",
    ),

    html.Button([html.P('Split')],
        id='toggle_split_view',
        style={'backgroundColor': '#FFFFFF'}
    )

],
className="container")



@app.callback(Output('map_general', 'figure'),
              [Input('feature', 'value')])
def create_main_map(feat):

    # Create the layout of the map
    layout_map_loc= dict(
        autosize=True,
        height=450,
        font=dict(color='#CCCCCC'),
        titlefont=dict(color='#CCCCCC', size='10'),
        margin=dict(l=0, r=0, b=0, t=0),
        hovermode="closest",
        showlegend=False,
        plot_bgcolor="#191A1A",
        paper_bgcolor="#191A1A",
        title='',
        mapbox=dict(
            accesstoken=mapbox_access_token,
            style="dark",
            center=dict(lon=0, lat=0),
            zoom=1,
        )
    )
    data = []
    data.append(
        dict(
            type='scattermapbox',
            lat=[0],
            lon=[0],)
    )
    return dict(data=data, layout=layout_map_loc)


@app.callback(Output('map_grid1', 'figure'),
              [Input('feature', 'value')])
def create_grid_map1(feat):

    # Create the layout of the map
    layout_map_loc= dict(
        autosize=True,
        height=450,
        font=dict(color='#CCCCCC'),
        titlefont=dict(color='#CCCCCC', size='10'),
        margin=dict(l=0, r=0, b=0, t=0),
        hovermode="closest",
        showlegend=False,
        plot_bgcolor="#191A1A",
        paper_bgcolor="#191A1A",
        title='',
        mapbox=dict(
            accesstoken=mapbox_access_token,
            style="dark",
            center=dict(lon=0, lat=0),
            zoom=1,
        )
    )
    data = []
    data.append(
        dict(
            type='scattermapbox',
            lat=[0],
            lon=[0],
            hoverinfo='text',
            showlegend=False,)
    )
    return dict(data=data, layout=layout_map_loc)


@app.callback(Output('map_grid2', 'figure'),
              [Input('feature', 'value')])
def create_grid_map2(feat):

    # Create the layout of the map
    layout_map_loc= dict(
        autosize=True,
        height=450,
        font=dict(color='#CCCCCC'),
        titlefont=dict(color='#CCCCCC', size='10'),
        margin=dict(l=0, r=0, b=0, t=0),
        hovermode="closest",
        showlegend=False,
        plot_bgcolor="#191A1A",
        paper_bgcolor="#191A1A",
        title='',
        mapbox=dict(
            accesstoken=mapbox_access_token,
            style="dark",
            center=dict(lon=0, lat=0),
            zoom=1,
        )
    )
    data = []
    data.append(
        dict(
            type='scattermapbox',
            lat=[0],
            lon=[0],
            hoverinfo='text',
            showlegend=False,)
    )
    return dict(data=data, layout=layout_map_loc)


@app.callback(Output('map_grid3', 'figure'),
              [Input('feature', 'value')])
def create_grid_map3(feat):

    # Create the layout of the map
    layout_map_loc= dict(
        autosize=True,
        height=450,
        font=dict(color='#CCCCCC'),
        titlefont=dict(color='#CCCCCC', size='10'),
        margin=dict(l=0, r=0, b=0, t=0),
        hovermode="closest",
        showlegend=False,
        plot_bgcolor="#191A1A",
        paper_bgcolor="#191A1A",
        title='',
        mapbox=dict(
            accesstoken=mapbox_access_token,
            style="dark",
            center=dict(lon=0, lat=0),
            zoom=1,
        )
    )
    data = []
    data.append(
        dict(
            type='scattermapbox',
            lat=[0],
            lon=[0],
            hoverinfo='text',
            showlegend=False,)
    )
    return dict(data=data, layout=layout_map_loc)



@app.callback(Output('unified_content', 'style'),
              [Input('toggle_split_view', 'n_clicks')],
              [State('unified_content', 'style'),])
def select_main_map_map(click_split, style):
    if click_split is None:
        split_mode = False
    else:
        split_mode = click_split%2 == 1

    if split_mode:
        style['width'] = '0%'
        style['display'] = 'none'
    else:
        style['width'] = '100%'
        style['display'] = 'inline-block'

    return style


@app.callback(Output('split_content', 'style'),
              [Input('toggle_split_view', 'n_clicks'),],
              [State('split_content', 'style'),])
def select_split_map(click_split, style):
    if click_split is None:
        split_mode = False
    else:
        split_mode = click_split%2 == 1

    if split_mode:
        style['display'] = 'inline-block'
    else:
        style['display'] = 'none'

    return style


app.css.append_css({
    'external_url': (
    'https://cdn.rawgit.com/plotly/dash-app-stylesheets/96e31642502632e86727652cf0ed65160a57497f/dash-hello-world.css'
    )
})

if 'DYNO' in os.environ:
    app.scripts.append_script({
        'external_url': 'https://cdn.rawgit.com/chriddyp/ca0d8f02a1659981a0ea7f013a378bbd/raw/e79f3f789517deec58f41251f7dbb6bee72c44ab/plotly_ga.js'
    })


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