Hello @dme3,
It seems that this is specifically related to mapbox and how it operates.
In the picture, we can see the graph is reading as taking up the entire space.
To update the map, we’d have to use a clientside callback because of how the javascript renders the mapbox.
Give this a try:
import dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import Dash, dcc, html, dash_table, ctx
from dash.dependencies import Input, Output, State
from plotly import graph_objs as go
import plotly.express as px
# Plotly mapbox public token
mapbox_access_token = "key"
### App declaration
#
app = dash.Dash(external_stylesheets=[dbc.themes.SLATE, dbc.icons.FONT_AWESOME],
external_scripts=["https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"])
#
###
### Tabs
#
tab1_content = dmc.TabsPanel(
html.P('0', id = 'tab1_text'),
value = 'tab1',
)
tab2_content = dmc.TabsPanel(
html.P('0', id = 'tab2_text'),
value = 'tab2',
)
tab3_content = dmc.TabsPanel(
dbc.CardBody(
[
html.P('0', id = 'tab3_text'),
html.Div(
dbc.Spinner(dcc.Graph(id="map-graph", responsive=True, style={'display': 'inline-block', 'width': '100%'}))
, id = 'map-div')
], id = 'map-card'
), value='tab3', id='map-panel')
tabs = html.Div([dmc.TabsList(
[
dmc.Tab("Tab 1", value="tab1", style={"color": 'white'}),
dmc.Tab("Tab 2", value="tab2", style={"color": 'white'}),
dmc.Tab("Map", id='map-tab', value="tab3", style={"color": 'white'}),
],
id = 'tabslist'
)])
#
###
header = dbc.CardBody(
[
html.P("Header", style={"color": 'white'}),
dbc.Row([
dbc.Col(dbc.Button('Calculate', id='calculate-button'), width="auto", align="center"),
], justify="between"),
],
)
#### Helper functions
#
def generate_map_fig():
filtered_fig = go.Figure(data=[
go.Scattermapbox(
lat=[48],
lon=[4],
mode="markers",
hoverinfo="lat+lon+text",
)])
filtered_fig.update_layout(
hovermode='closest',
showlegend=False,
mapbox=dict(
accesstoken=mapbox_access_token,
bearing=0,
center=go.layout.mapbox.Center(
lat=48,
lon=4
),
pitch=0,
zoom=12,
style='streets'
),
margin={"r":10,"t":10,"l":10,"b":10}
)
#filtered_fig = px.scatter_geo()
return filtered_fig
#
####
#### Callbacks
#
@app.callback(
[Output('tab1_text', 'children'),
Output('tab2_text', 'children'),
Output('tab3_text', 'children')],
[Input('calculate-button', 'n_clicks')],
State('tab1_text', 'children')
)
def update_output(clicks, value):
result = 42 + int(value)
return result, result, result
@app.callback(
Output('map-graph', 'figure'),
Input('calc-chart','n_clicks')
)
def calcChart(n):
return generate_map_fig()
app.clientside_callback(
"""
function (i) {
setTimeout(function() {
var oldVal;
$("#tabs-tab-tab3").on('click',
function () {
if (oldVal != $('#tab3_text').text()) {
$('#calc-chart').click()
oldVal = $('#tab3_text').text()
}
}
)
$('#calculate-button').on('click',
function () {
$('#calc-chart').click()
if ($('#map-div').is(':visible')) {
setTimeout(function () {
oldVal = $('#tab3_text').text()
}, 300)
}
}
)
}, 300)
return window.dash_clientside.no_update
}
""",
Output('map-div','id'),
Input('map-div','id')
)
#
####
### Layout
#
app.layout = html.Div([
html.Button(id='calc-chart', style={'display':'none'}),
header,
dmc.Divider(variant="solid"),
dmc.Tabs([
tabs,
tab1_content,
tab2_content,
tab3_content,
], value='tab1',id='tabs', persistence=True, variant='pills', color='blue'),
])
#
###
if __name__ == '__main__':
app.run_server(debug=True)
