@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)