Dash - two maps zoom level synchronization

📊 Plotly Python
3

@MichaelTiemann here’s a simplified example of how you can control one map via another map when you zoom in/out of first map and apply the same update to the second map:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import dash_bootstrap_components as dbc

df = px.data.election()
geojson = px.data.election_geojson()
candidates = df.winner.unique()

fig2 = px.choropleth(
        df, geojson=geojson, color="Bergeron",
        locations="district", featureidkey="properties.district",
        projection="mercator", range_color=[0, 6500])
fig2.update_geos(fitbounds="locations", visible=False)
fig2.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P("Candidate:"),
    dcc.RadioItems(
        id='candidate', 
        options=[{'value': x, 'label': x} 
                 for x in candidates],
        value=candidates[0],
        labelStyle={'display': 'inline-block'}
    ),
    dcc.Graph(id="choropleth"),
    html.P("default map data", id="map_data"),
    dcc.Graph(id="choropleth2", figure=fig2)
])

@app.callback(
    Output("choropleth", "figure"), 
    [Input("candidate", "value")])
def display_choropleth(candidate):
    fig = px.choropleth(
        df, geojson=geojson, color=candidate,
        locations="district", featureidkey="properties.district",
        projection="mercator", range_color=[0, 6500])
    fig.update_geos(fitbounds="locations", visible=False)
    fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

    return fig

@app.callback(Output('choropleth2', 'figure'),
             [Input('choropleth', 'relayoutData')])
def graph_event(select_data):
    fig2.update_layout(select_data)
    return fig2

app.run_server(debug=True)
1 Like